/* ============================================================
   蓝柠云 · 登录/注册页样式（Calm Glass 蓝白灰）
   ------------------------------------------------------------
   分区：
     01  页面容器
     02  左侧品牌
     03  右侧表单卡片
     04  响应式
     05  细节点缀
   色调、材质、层级一律引用 style.css 01 的令牌；
   背景层的全屏渐变与光斑由 style.css 03 提供。
   ============================================================ */

/* 显式 display 规则会覆盖 UA 的 [hidden]，统一兜底 */
[hidden] { display: none !important; }

/* ===== 01 · 页面容器 ===== */
.auth-body { min-height: 100vh; }

.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
  width: min(1060px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 48px;
}

/* ===== 02 · 左侧品牌 ===== */
.auth-brand h1 {
  margin-top: 34px;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.24;
  letter-spacing: -.4px;
  font-weight: 800;
}

.auth-brand-sub {
  margin-top: 16px;
  max-width: 30em;
  font-size: 16px;
  color: var(--text-secondary);
}

.auth-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}
.auth-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-secondary);
}
.auth-points .check { width: 20px; height: 20px; margin-top: 0; }

.auth-quote {
  margin-top: 36px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  color: var(--text-secondary);
  max-width: 26em;
}
.auth-quote b {
  color: var(--signal-primary);
  font-size: 20px;
  line-height: 0;
  margin-right: 6px;
  vertical-align: -3px;
}

/* ===== 03 · 右侧表单卡片 ===== */
.auth-card {
  border-radius: calc(var(--radius-lg) + 4px);
  padding: clamp(26px, 4vw, 38px);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--material-thin);
  border: 1px solid var(--line-soft);
  margin-bottom: 26px;
}

.auth-tab {
  text-align: center;
  padding: 9px 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s;
}
.auth-tab:hover { color: var(--signal-primary); background: var(--accent-soft); }
.auth-tab.active {
  color: #fff;
  background: var(--signal-primary);
  box-shadow: none;
}

.auth-form { display: grid; gap: 16px; }

.field { display: grid; gap: 7px; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .3px;
}

.field input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--canvas-elevated);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: var(--text-tertiary); }
.field input:focus {
  outline: none;
  border-color: var(--signal-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-error {
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: #b4232a;
  background: #fdeaea;
  border: 1px solid #f6c6c8;
}
.dark .form-error {
  color: #ffb4b8;
  background: rgba(220, 70, 80, .14);
  border-color: rgba(255, 130, 140, .3);
}

.auth-submit { width: 100%; margin-top: 6px; }
.auth-submit[disabled] { opacity: .6; cursor: wait; transform: none; }

.auth-switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.auth-switch a { color: var(--signal-primary); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }

.auth-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

/* ===== 04 · 响应式 ===== */
@media (max-width: 860px) {
  .auth-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    width: min(460px, calc(100% - 40px));
    padding-block: 36px;
    align-content: start;
    margin-top: 6vh;
  }
  .auth-brand { text-align: left; }
  .auth-brand h1 { margin-top: 18px; font-size: clamp(26px, 6vw, 32px); }
  .auth-quote { display: none; }
}

/* ===== 05 · 细节点缀 ===== */
.auth-brand { position: relative; overflow: hidden; }
.auth-brand::after {
  content: "";
  position: absolute; right: -34px; bottom: -34px;
  width: 170px; height: 170px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363b796' stroke-width='1.4'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='2.2'/><path d='M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M18.4 5.6l-4.2 4.2M9.8 14.2l-4.2 4.2'/></svg>") center/contain no-repeat;
  opacity: .1; pointer-events: none;
}
.dark .auth-brand::after { opacity: .16; }