/* ============================================================
   登录 / 注册 —「接入」
   ============================================================ */

.page-login {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- 背景：一间很亮、但没有出口的房间 ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(178deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 76%, var(--bg-d) 100%);
}

.bg__fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}

.bg__fog--1 {
  width: 68vw; height: 68vw;
  left: -24vw; top: -20vw;
  background: radial-gradient(closest-side, var(--fog-a), transparent);
  animation: drift-a 36s ease-in-out infinite alternate;
}

.bg__fog--2 {
  width: 52vw; height: 52vw;
  right: -16vw; top: 6vh;
  background: radial-gradient(closest-side, var(--fog-b), transparent);
  animation: drift-b 44s ease-in-out infinite alternate;
}

.bg__fog--3 {
  width: 66vw; height: 66vw;
  left: 14vw; bottom: -36vw;
  background: radial-gradient(closest-side, var(--fog-c), transparent);
  animation: drift-c 52s ease-in-out infinite alternate;
}

.bg__horizon {
  position: absolute;
  left: -20%; right: -20%;
  top: 58%;
  height: 42%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.26) 100%);
}

html[data-theme="night"] .bg__horizon {
  background: linear-gradient(180deg, transparent 0%, rgba(120, 160, 190, 0.04) 42%, rgba(120, 160, 190, 0.07) 100%);
}

.bg__horizon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

html[data-theme="night"] .bg__horizon::before {
  background: linear-gradient(90deg, transparent, rgba(180, 210, 230, 0.16), transparent);
}

/* 房间左边的窗，光有点过曝 */
.bg__window {
  position: absolute;
  left: -6vw;
  top: -14vh;
  width: 46vw;
  height: 84vh;
  transform: rotate(-4deg);
  background: linear-gradient(118deg, var(--window) 0%, rgba(255, 255, 255, 0.32) 38%, transparent 72%);
  filter: blur(56px);
  opacity: 0.65;
  animation: window-breathe 18s ease-in-out infinite alternate;
}

html[data-theme="night"] .bg__window {
  background: linear-gradient(118deg, rgba(120, 180, 220, 0.16) 0%, rgba(60, 120, 160, 0.08) 38%, transparent 72%);
  opacity: 0.9;
}

@keyframes window-breathe {
  to { opacity: 0.85; transform: rotate(-4deg) scale(1.03); }
}

.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, transparent 38%, var(--vignette) 100%);
}

.bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(22, 24, 27, 0) 0px,
      rgba(22, 24, 27, 0) 2px,
      var(--scan) 2px,
      var(--scan) 3px);
  opacity: 0.9;
}

.bg__grain {
  position: absolute;
  inset: -50%;
  animation: grain-shift 0.9s steps(4) infinite;
}

html[data-theme="night"] .bg__grain { mix-blend-mode: screen; }

@keyframes drift-a { to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-5vw, 6vh, 0) scale(1.12); } }
@keyframes drift-c { to { transform: translate3d(4vw, -5vh, 0) scale(1.06); } }
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(1%, 3%); }
}

/* ---------- 浮尘 ---------- */
.dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.dust span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: float-up linear infinite;
  opacity: 0;
}

html[data-theme="night"] .dust span { background: rgba(220, 230, 240, 0.7); }

@keyframes float-up {
  0%   { transform: translate3d(0, 12vh, 0); opacity: 0; }
  12%  { opacity: 0.45; }
  70%  { opacity: 0.3; }
  100% { transform: translate3d(3vw, -96vh, 0); opacity: 0; }
}

/* ---------- 舞台 ---------- */
.stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100dvh;
  padding: 26px 34px 22px;
}

.stage__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stage__tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- 竖排小字 ---------- */
.edge-note {
  position: fixed;
  right: 15px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--ink-3);
  opacity: 0.75;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  width: min(424px, calc(100vw - 36px));
  margin: auto;
  padding: 32px 34px 22px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: linear-gradient(158deg, var(--card-a), var(--card-b));
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  animation: card-in 1s cubic-bezier(0.19, 0.72, 0.19, 1) both;
}

html[data-theme="night"] .card {
  box-shadow: var(--shadow-card), 0 0 80px -30px rgba(90, 150, 200, 0.25);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.card::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.card::after { right: 9px; bottom: 9px; border-left: 0; border-top: 0; }

/* ---------- 应用标识 ---------- */
.app { display: flex; align-items: center; gap: 15px; }

.app__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line), 0 3px 8px -2px rgba(0, 0, 0, 0.18);
}

.app__icon svg { display: block; width: 100%; height: 100%; }

.app__id h1 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.app__id p {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.17em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ---------- 模式切换 ---------- */
.tabs {
  display: flex;
  gap: 22px;
  margin: 22px 0 20px;
  border-bottom: 1px solid var(--line-2);
}

.tab {
  position: relative;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: var(--ink-4);
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tab:hover { color: var(--ink-2); }

.tab.is-active { color: var(--ink); }

.tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--ink);
}

/* ---------- 表单 ---------- */
.page-login .field input {
  padding: 4px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
}

.page-login .field input:focus { border-bottom-color: var(--ink); }

.page-login #staff {
  font-family: var(--mono);
  font-size: 14.5px;
  letter-spacing: 0.2em;
}

.page-login .peek { right: 0; bottom: 12px; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 22px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.link {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.link:hover { color: var(--ink); border-bottom-color: var(--line); }

/* ---------- 主按钮 ---------- */
.submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  overflow: hidden;
  border: 1px solid var(--btn);
  border-radius: 3px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 12.5px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.submit:hover { opacity: 0.9; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.7); }
.submit:active { transform: scale(0.995); }
.submit:disabled { cursor: default; }

.submit__arrow {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0;
  text-indent: 0;
  transition: transform 0.25s ease;
}

.submit:hover .submit__arrow { transform: translateX(4px); }

.submit.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.14) 48%, transparent 76%);
  transform: translateX(-100%);
  animation: sweep 1.1s linear infinite;
}

@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- 提示 ---------- */
.msg {
  min-height: 17px;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.6;
}

.msg.is-error { color: var(--warn); }

.msg.is-whisper { color: var(--ink-4); letter-spacing: 0.14em; }

/* ---------- 卡片底栏 ---------- */
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.meta b { font-weight: 400; color: var(--ink-2); }

.status { display: inline-flex; align-items: center; gap: 6px; }

.status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(95, 143, 108, 0.5);
  animation: pulse 3.4s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 143, 108, 0.45); }
  60%  { box-shadow: 0 0 0 5px rgba(95, 143, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 143, 108, 0); }
}

/* ---------- 页脚 ---------- */
.notice {
  max-width: 460px;
  margin: 0 auto;
  padding-bottom: 2px;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
}

.notice b { font-weight: 400; color: var(--ink-2); }

.legal {
  margin-top: 10px;
  text-align: center;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
}

/* ---------- 离场 ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.page-login.is-leaving .veil { opacity: 1; }

.page-login.is-leaving .card {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: none;
}

/* ---------- 小屏 ---------- */
@media (max-width: 900px) {
  .edge-note { display: none; }
}

@media (max-width: 560px) {
  .stage { padding: 20px 18px 18px; }

  .stage__tools .dim { display: none; }

  .card {
    width: 100%;
    max-width: 424px;
    padding: 26px 22px 20px;
  }

  .app__icon { width: 42px; height: 42px; }
  .app__id h1 { font-size: 19px; }

  .notice { font-size: 10.5px; letter-spacing: 0.05em; }
  .legal { font-size: 8px; }
  .meta { font-size: 8.5px; letter-spacing: 0.06em; }
}