/* ============================================================
   登录 / 账号 —— 沿用素纸·墨字系统，不用彩色按钮、不用圆角卡片
   ============================================================ */

/* 顶栏入口：登录前是一个词，登录后是昵称（长了截断，别把导航挤走） */
#btn-acct { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-acct.signed { color: var(--v); }
#btn-acct::after { content: ""; }

/* 登录回执：导航下方飘一条，几秒后自己走 */
.auth-note {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  top: calc(var(--nav-h, 60px) + 16px);
  max-width: calc(100vw - 36px);
  padding: 9px 16px; background: var(--paper);
  border: 1px solid var(--hair); border-left: 2px solid var(--v);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  box-shadow: 0 12px 34px rgba(20, 18, 14, .12);
}

.auth-modal { width: min(430px, 100%); }
.auth-body, .acct-body { padding: 24px 26px 26px; }

.auth-lede {
  margin: 0 0 22px; font-size: 14px; line-height: 1.9; color: var(--ink-2);
}
.auth-lede b { color: var(--ink); }

.btn-block { display: block; width: 100%; text-align: center; padding: 11px 16px; font-size: 14px; }

.auth-hint {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--ink-4);
}
.auth-name-note {
  margin: 6px 0 0; font-size: 11px; line-height: 1.7; color: var(--ink-4);
  opacity: .85;
}

/* 「或」的分隔：两侧发丝线 */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px;
  font: 400 11px/1 var(--sans); letter-spacing: .14em; color: var(--ink-4);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.auth-field { display: block; position: relative; margin-bottom: 10px; }
.auth-field input, .auth-row input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--hair-2); border-radius: 2px; background: var(--card);
  color: var(--ink); font: 14.5px var(--sans); font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease);
}
.auth-field input:focus, .auth-row input:focus { outline: 0; border-color: var(--ink); }
.auth-field input::placeholder, .auth-row input::placeholder { color: var(--ink-4); }

.auth-err {
  display: block; min-height: 16px; padding-top: 5px;
  font-size: 11.5px; color: var(--v);
}

.auth-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 18px; }
.auth-row .btn { height: 42px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.auth-row .btn:disabled { color: var(--ink-4); border-color: var(--hair); cursor: default; }

.auth-msg {
  margin: 14px 0 0; min-height: 18px;
  font-size: 12.5px; line-height: 1.8; color: var(--v); overflow-wrap: anywhere;
}

/* 已登录：头像 / 昵称 / 账号 */
.acct-state {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hair);
}
.acct-av {
  flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink-3);
  font: 400 17px/1 var(--serif);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 没有头像图时，用昵称首字压一方墨章 */
.acct-av.txt { background: var(--ink); color: var(--paper); box-shadow: none; }
.acct-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct-id b { font: 400 20px/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.acct-id span { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.acct-row {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 0;
  border-bottom: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2);
}
.acct-row b { margin-left: auto; font: 400 17px/1 var(--serif); color: var(--v); font-variant-numeric: tabular-nums; }
.acct-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-3); }
.acct-acts { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 清单面板里的同步状态行 */
.list-sync {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  padding: 9px 12px; border-left: 2px solid var(--hair-2);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-3);
}
.list-sync.on { border-left-color: var(--v); color: var(--ink-2); }
.list-sync b { font-weight: 600; color: var(--ink); }
.list-sync button { margin-left: auto; flex: none; color: var(--v); font-size: 12.5px; text-decoration: underline; }