/* ═══════════════════════════════════════════════════════
   SPACESENSE 账号体系 v1 · auth.css
   范围：① 全站导航登录入口（.ss-auth） ② auth.html 三合一页面
   视觉：方案C 浅色五 token —— #FAFAF7 / #151515 / #77736B / #E6E2DA / #8C6A4A
   本文件独立加载，不改 gallery-common/desktop，与其他并行任务零冲突。
   ═══════════════════════════════════════════════════════ */

/* ── ① 导航登录入口 ─────────────────────────────────── */
.ss-auth { position: relative; flex: none; margin-left: 14px; display: flex; align-items: center; }
.ss-auth-login {
  font-size: 14px; color: #151515; white-space: nowrap;
  padding: 5px 14px; border: 1px solid #E6E2DA; border-radius: 999px;
  transition: border-color .2s ease, color .2s ease;
}
.ss-auth-login:hover { color: #8C6A4A; border-color: #8C6A4A; text-decoration: none; }

.ss-auth-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: #151515; font-family: inherit;
  padding: 5px 12px; border: 1px solid #E6E2DA; border-radius: 999px;
  background: transparent; cursor: pointer; white-space: nowrap;
  max-width: 180px;
}
.ss-auth-chip .ss-auth-name { overflow: hidden; text-overflow: ellipsis; }
.ss-auth-chip:hover { color: #8C6A4A; border-color: #8C6A4A; }
.ss-auth-chip .ss-auth-caret { font-size: 10px; color: #77736B; transition: transform .2s ease; }
.ss-auth.open .ss-auth-caret { transform: rotate(180deg); }

.ss-auth-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px;
  background: #FFFFFF; border: 1px solid #E6E2DA; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(21,21,21,.10);
  padding: 6px; display: none; z-index: 120;
}
.ss-auth.open .ss-auth-menu { display: block; }
.ss-auth-menu .ss-auth-mail {
  padding: 8px 10px; font-size: 12px; color: #77736B;
  border-bottom: 1px solid #E6E2DA; margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.ss-auth-menu button,
.ss-auth-menu .ss-auth-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 9px 10px; font-size: 14px; font-family: inherit; color: #151515;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  text-decoration: none;
}
.ss-auth-menu button:hover,
.ss-auth-menu .ss-auth-item:hover { background: rgba(140,106,74,.08); color: #8C6A4A; text-decoration: none; }
.ss-auth-menu .ss-auth-item.hidden,
.ss-auth-menu .ss-auth-admin.hidden { display: none; }
.ss-auth-menu .ss-auth-logout { border-top: 1px solid #E6E2DA; border-radius: 0; margin-top: 4px; }
.ss-auth-menu .ss-auth-logout:hover { border-radius: 6px; }

/* 移动端：顶栏空间紧张时入口保持可见、不挤压品牌区 */
@media (max-width: 768px) {
  .ss-auth { margin-left: auto; margin-right: 48px; }
  .topnav .navlinks ~ .ss-auth { margin-left: 8px; margin-right: 48px; }
  .ss-auth-login { font-size: 13px; padding: 4px 12px; }
  .ss-auth-chip { font-size: 13px; padding: 4px 10px; max-width: 120px; }
}

/* ── ② auth 三合一页面 ──────────────────────────────── */
.ssauth-page {
  min-height: calc(100vh - 54px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 16px 80px;
}
.ssauth-card {
  width: 100%; max-width: 420px;
  background: #FFFFFF; border: 1px solid #E6E2DA; border-radius: 12px;
  padding: 36px 32px 32px;
  box-shadow: 0 12px 40px rgba(21,21,21,.05);
}
.ssauth-kicker {
  font-size: 11px; letter-spacing: .28em; color: #77736B;
  text-transform: uppercase; margin: 0 0 8px; text-align: center;
}
.ssauth-title {
  font-size: 24px; font-weight: 600; color: #151515;
  margin: 0 0 24px; text-align: center; letter-spacing: .02em;
}

/* tab 切换 */
.ssauth-tabs { display: flex; border-bottom: 1px solid #E6E2DA; margin-bottom: 24px; }
.ssauth-tab {
  flex: 1; padding: 10px 4px 12px;
  font-size: 15px; font-family: inherit; color: #77736B;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; letter-spacing: .04em;
}
.ssauth-tab[aria-selected="true"] { color: #151515; font-weight: 600; border-bottom-color: #8C6A4A; }
.ssauth-tab:hover { color: #8C6A4A; }

/* 表单 */
.ssauth-form { display: none; }
.ssauth-form.active { display: block; }
.ssauth-field { margin-bottom: 16px; }
.ssauth-field label {
  display: block; font-size: 12px; color: #77736B;
  letter-spacing: .06em; margin-bottom: 6px;
}
.ssauth-field input {
  width: 100%; padding: 11px 14px;
  font-size: 15px; font-family: inherit; color: #151515;
  background: #FAFAF7; border: 1px solid #E6E2DA; border-radius: 8px;
  outline: none; transition: border-color .2s ease;
}
.ssauth-field input:focus { border-color: #8C6A4A; background: #FFFFFF; }
.ssauth-field input.input-error { border-color: #B0524A; }

.ssauth-code-row { display: flex; gap: 10px; }
.ssauth-code-row input { flex: 1; min-width: 0; }
.ssauth-send {
  flex: none; padding: 0 14px; font-size: 13px; font-family: inherit;
  color: #8C6A4A; background: #FFFFFF; border: 1px solid #8C6A4A;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.ssauth-send:hover:not(:disabled) { background: rgba(140,106,74,.08); }
.ssauth-send:disabled { color: #77736B; border-color: #E6E2DA; cursor: not-allowed; }

.ssauth-submit {
  width: 100%; padding: 12px; margin-top: 8px;
  font-size: 15px; font-family: inherit; font-weight: 600; letter-spacing: .12em;
  color: #FAFAF7; background: #151515; border: none; border-radius: 8px;
  cursor: pointer; transition: background .2s ease;
}
.ssauth-submit:hover:not(:disabled) { background: #8C6A4A; }
.ssauth-submit:disabled { opacity: .55; cursor: wait; }

.ssauth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.ssauth-links button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-family: inherit; color: #77736B;
}
.ssauth-links button:hover { color: #8C6A4A; text-decoration: underline; }

/* 提示条：错误 / 成功 / 信息 */
.ssauth-msg {
  display: none; margin: 0 0 16px; padding: 10px 14px;
  font-size: 13px; line-height: 1.6; border-radius: 8px;
  overflow-wrap: anywhere;
}
.ssauth-msg.show { display: block; }
.ssauth-msg.error { color: #B0524A; background: rgba(176,82,74,.08); border: 1px solid rgba(176,82,74,.25); }
.ssauth-msg.ok { color: #5B7A4A; background: rgba(91,122,74,.08); border: 1px solid rgba(91,122,74,.25); }
.ssauth-msg.info { color: #77736B; background: #FAFAF7; border: 1px solid #E6E2DA; }

.ssauth-hint { font-size: 12px; color: #77736B; margin: 6px 0 0; line-height: 1.6; }
.ssauth-meter { display: flex; gap: 4px; margin-top: 8px; }
.ssauth-meter i { flex: 1; height: 3px; background: #E6E2DA; border-radius: 2px; }
.ssauth-meter i.on-weak { background: #B0524A; }
.ssauth-meter i.on-mid { background: #D4B896; }
.ssauth-meter i.on-strong { background: #5B7A4A; }

/* 成功页 */
.ssauth-done { text-align: center; padding: 12px 0 4px; }
.ssauth-done .ssauth-done-icon {
  width: 48px; height: 48px; margin: 0 auto 16px;
  border-radius: 50%; background: rgba(140,106,74,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #8C6A4A;
}
.ssauth-done p { font-size: 14px; color: #77736B; margin: 0 0 20px; }

/* 390 档零横滚：卡片不溢出、输入框不溢出 */
@media (max-width: 480px) {
  .ssauth-page { padding: 32px 14px 64px; }
  .ssauth-card { padding: 26px 20px 24px; }
  .ssauth-title { font-size: 20px; }
}