/* ==========================================================================
 * auth.css — 登录 / 注册界面 + 同步状态提示
 * ==========================================================================
 * 配色原则（本轮）：**完全继承 app.css 的全局主题令牌**
 *   · 不再自带任何品牌色 / 背景色；主色、辅助色、中性色、状态色一律取
 *     `--brand / --surface / --text / --ok / --warn / --danger / --line …`
 *   · 因此登录页与主界面完全一致，并随「深色 / 浅色」主题一起切换
 *   · 背景、粒子、颗粒由全局 body 提供（此处不再覆盖）
 *
 * 排版原则：间距一律取全局刻度 --sp-1(8) / --sp-2(16) / --sp-3(24) / --sp-4(32)；
 *          字号取 --fs-title / --fs-body / --fs-label / --fs-sm / --fs-xs。
 * ========================================================================== */

/* ---------- 认证态：隐藏应用外壳，只留登录卡 ---------- */
body.auth-mode .sidebar,
body.auth-mode .topbar,
body.auth-mode .sync-bar-host { display: none !important; }
body.auth-mode .only-mobile { display: none !important; }
body.auth-mode #app { display: block; }

/* 把 #view(.content) 的内边距与限宽归零，避免底部空白与淡色矩形断层 */
body.auth-mode .content { padding: 0; max-width: none; }
body.auth-mode .main { min-height: 100vh; }

/* ==========================================================================
 * 居中容器（纯 flex 居中，无负 margin / left% / transform 偏移）
 * ========================================================================== */
.auth-wrap {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);                 /* 32px */
  padding: var(--sp-4) var(--sp-2); /* 32 / 16 */
  box-sizing: border-box;
  width: 100%;
}

/* ==========================================================================
 * 登录卡（全部使用主题令牌）
 * ========================================================================== */
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: var(--sp-4);             /* 32px */
  border-radius: var(--radius);     /* 16px */
  background: var(--card-sheen), var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  overflow: hidden;
}
/* 顶部一条主色发丝线（单色、来自令牌，替代原来与主题无关的三色彩条） */
.auth-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);                 /* 16px */
  margin-bottom: var(--sp-3);       /* 24px */
}

.logo.big {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .25);
  flex: 0 0 auto;
}

.auth-title {
  font-size: var(--fs-title);       /* 1.125rem */
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.3;
}

.auth-sub {
  font-size: var(--fs-sm);          /* .75rem */
  color: var(--text-3);             /* 用中性辅助色，去掉原先的蓝色杂色 */
  margin-top: 2px;
  line-height: 1.6;
}

/* ==========================================================================
 * 登录 / 注册切换
 * ========================================================================== */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);                 /* 8px */
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);       /* 24px */
}

.auth-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-label);       /* .8125rem */
  font-weight: 600;
  padding: .625rem 0;               /* 触控高度 ≈ 40px */
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.auth-tab:hover { color: var(--text); background: var(--surface-hover); }
.auth-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.auth-tab.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* ==========================================================================
 * 表单（16px 垂直节奏）
 * ========================================================================== */
.auth-card .field { margin-bottom: var(--sp-2); }   /* 16px */

.field-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-1);       /* 8px */
}

.auth-card input[type="text"],
.auth-card input[type="password"] {
  min-height: 44px;                 /* 触控目标下限 */
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
}

.auth-error { margin: 0 0 var(--sp-2); }

/* ==========================================================================
 * 主按钮（令牌驱动的 --grad-brand，已满足白字 AA）
 * ========================================================================== */
.auth-card .btn.primary.block { margin-top: var(--sp-1); }
.auth-card .btn.primary.block.lg {
  min-height: 46px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 650;
}

/* ==========================================================================
 * 卡内辅助信息
 * ========================================================================== */
.auth-hint {
  margin-top: var(--sp-3);          /* 24px */
  padding-top: var(--sp-2);         /* 16px */
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-3);
}

.auth-server {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.auth-server .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-4); flex: 0 0 6px;
}
.auth-server .dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* ==========================================================================
 * 页脚（次要层级）
 * ========================================================================== */
.auth-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
  max-width: 440px;
  line-height: 1.8;
}
.auth-foot code {
  font-family: var(--mono);
  background: var(--surface-2);
  padding: .1rem .35rem;
  border-radius: 5px;
  color: var(--text-2);
}

/* ==========================================================================
 * 同步状态条 / 侧栏用户信息（全部令牌化）
 * ========================================================================== */
.sync-bar-host:empty { display: none; }

.sync-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
}
.sync-bar.warn { border-color: var(--line); background: var(--warn-soft); color: var(--warn); }
.sync-bar.bad  { background: var(--danger-soft); color: var(--danger); }
.sync-bar .sync-actions { margin-left: auto; display: flex; gap: 6px; }

.user-box {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--line);
}
.user-box .user-name {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-2);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn.tiny.block { width: 100%; }

/* ==========================================================================
 * 响应式：320 → 2560 稳定居中，无横向溢出
 * ========================================================================== */
@media (max-width: 520px) {
  .auth-wrap { padding: var(--sp-3) var(--sp-2); gap: var(--sp-3); }
  .auth-card { padding: var(--sp-3); }
}
@media (max-width: 360px) {
  .auth-wrap { padding: var(--sp-2) var(--sp-2); }
  .auth-card { padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-sm); }
  .logo.big { width: 42px; height: 42px; font-size: 1.1rem; }
  .auth-title { font-size: 1.0625rem; }
}
@media (min-width: 1440px) {
  .auth-wrap { gap: var(--sp-5); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .auth-wrap { justify-content: flex-start; padding-top: var(--sp-3); gap: var(--sp-2); }
  .auth-card { padding: var(--sp-3); }
  .auth-brand { margin-bottom: var(--sp-2); }
  .auth-tabs { margin-bottom: var(--sp-2); }
}