/* ============================================================
   共享记事本（共纸）— 统一设计系统 v2
   极简 · 治愈 · 清爽（产品宪法：空白纸哲学，零打扰）

   文件所有权：本文件由「编码卡 A (web-builder)」独占修改。
   主题通过 body[data-theme] 切换（paper/cream/ink/mist/night）。

   ────────────────────────────────────────────────────────────
   ★ 与编码卡 B (web-logic) 的共享契约（§8）— 只引用下列类名/token，不自造
   ────────────────────────────────────────────────────────────
   【设计 tokens（全部在 :root 与 body[data-theme=*] 定义，勿散落硬编码）】
     --bg --bg-surface --text --text-weak --text-faint
     --accent --accent-weak --accent-strong --on-accent
     --border --danger --ok
     --c-todo --c-decision --c-question --c-note   (共识区分类色)
     --dur-1 --dur-2 --dur-3 --dur-4 --ease-out --ease-in-out
     --r-input --r-card --r-pop --r-panel --shadow-sm --shadow-md
   【App Shell 结构类】
     .app-shell  .app-shell--meeting  .app-topbar  .topbar-brand  .brand-mark
     .brand-name  .topbar-divider  .space-name  .topbar-tools  .icon-btn
   【菜单弹层类】
     .app-menu  .menu-head  .menu-row  .menu-label  .menu-logout
   【状态/动效触发类（B 加类名 → A 的类负责动画，B 只增删类）】
     .hidden（隐藏，已有）  [hidden]（属性隐藏，admin 用）
     .busy（AI 书记员整理中呼吸；按钮提交中态由 :disabled 自带 spinner，无需类）
     .fade-up（进入：opacity+translateY，180-240ms，用于新共识条目/新列表项）
     .area-flash（来源书写区高亮脉冲，已有）
     .badge .sync-badge .offline-badge（连接/同步/离线 徽标，B 自行创建节点）
     .waiting-hint（会议"等待成员书写…"空态）
   【既有类名（B 的 JS 已引用，A 保留并统一为 token 样式）】
     .theme-dot .active .note .tool-btn .sm .logout-btn
     .timeline-item .timeline-empty .preview
     .area-card .mine .area-head .area-nick .area-input .area-view
     .consensus-sec .sec-待办 .sec-决策 .sec-问题 .sec-备注 .consensus-empty
     .copy-row .copy-tip .ai-status
     .auth-page .auth-brand .auth-logo .auth-card .auth-tabs .auth-tab
     .auth-form .auth-field .auth-btn .auth-error .auth-foot .auth-status
     .team-title .team-block .team-desc .team-divider .auth-link
   【B 的交互职责提示（§5/§6/§8）】
     1. 术语「团队」→「空间」：login.js/app.js/meeting.js/admin.js 中的界面文案。
     2. 动效触发：B 只 add/remove 类（.fade-up/.area-flash/.is-busy 等），动画由本 CSS 负责。
     3. 焦点/无障碍：菜单开关时同步 .app-menu 触发器 aria-expanded；共识区更新 aria-live="polite"（仅会议页）；主题点顺序与 meta 色值保持不变（§7 硬契约）。
     4. 首页空态：移除 app.js 中「想到什么，直接写下来……」引导文案，仅保留断网提示「连接断开，正在重连……」。
   ============================================================ */

/* ============================================================
   设计 tokens（§3）
   ============================================================ */

:root {
  /* 字体（不引外部字体，无网络依赖） */
  --font-sans: 'PingFang SC', 'Noto Sans SC', 'HarmonyOS Sans SC',
    'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 圆角阶梯（§3：不搞一刀切） */
  --r-input: 6px;   /* 输入 */
  --r-card: 10px;   /* 卡片 */
  --r-pop: 14px;    /* 弹层 */
  --r-panel: 16px;  /* 大面板 */

  /* 间距阶梯（4px 基准） */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* 阴影（低不透明度双层，尽量用留白/边框代替） */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* 动效时长 token（§3） */
  --dur-1: 120ms;  /* 微反馈 */
  --dur-2: 180ms;  /* 小 UI */
  --dur-3: 240ms;  /* 中 UI */
  --dur-4: 400ms;  /* 页面级 */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);

  /* ===== 语义颜色（浅色默认 = paper，§3：两层色板） ===== */
  --bg: #F7F5F0;          /* 纸面米白 主背景 */
  --bg-surface: #FFFFFF;  /* 卡片/弹层表面 */
  --text: #2B2B2B;        /* 墨色 主文字（≥4.5:1） */
  --text-weak: #6B655E;   /* 弱文本（≥3:1） */
  --text-faint: #A09A90;  /* 更弱文本/占位（非正文） */
  --accent: #E06A5B;      /* 唯一强调色：暖珊瑚（Hick 定律，3-5 处/屏） */
  --accent-weak: #F4DDD7; /* 强调色弱底 */
  --accent-strong: #C84A39; /* 实底按钮（白字对比 ≥4.5:1） */
  --on-accent: #FFFFFF;   /* 实底按钮上的文字 */
  --border: #E8E4DA;
  --danger: #C0392B;
  --ok: #3E7D5A;

  /* 共识区分类语义色 */
  --c-todo: #C77B4A;
  --c-decision: #4F8A6B;
  --c-question: #C0604A;
  --c-note: #9AA5B0;
}

/* ---------- 主题变体（背景纸色不同，强调色统一为珊瑚） ---------- */

body[data-theme="cream"] {
  --bg: #F6F1E7;
  --bg-surface: #FFFDF7;
  --border: #EAE1D0;
}

body[data-theme="ink"] {
  --bg: #EEF2EC;
  --bg-surface: #FFFFFF;
  --border: #DFE7DF;
}

body[data-theme="mist"] {
  --bg: #EEF1F6;
  --bg-surface: #FFFFFF;
  --border: #E1E7EF;
}

body[data-theme="night"] {
  --bg: #121417;          /* 深夜主背景（§6/§7 硬契约，勿改） */
  --bg-surface: #1C1F24;
  --text: #E4E1DA;
  --text-weak: #9C978D;
  --text-faint: #5F5B53;
  --accent: #E8806F;      /* 深底上用更亮的珊瑚，保证对比 */
  --accent-weak: #4A2C27;
  --accent-strong: #E8806F;
  --on-accent: #1B1513;
  --border: #2A2E33;
  --danger: #E08A82;
  --ok: #8FBB97;
  --c-todo: #D9A96B;
  --c-decision: #8FBB97;
  --c-question: #E09A83;
  --c-note: #8B98A5;
}

/* ============================================================
   基础
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: var(--font-sans); }
button { touch-action: manipulation; }
input, textarea { font-size: 16px; } /* 防 iOS 聚焦自动放大 */

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* 全局焦点环（§6） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 克制、统一的滚动条 */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
*::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* 数字等宽（时间线、码等） */
.timeline-item time, .replay-time, .team-pop-code, .auth-status {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   App Shell（§2：三张业务页统一顶栏）
   ============================================================ */

.app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* 顶栏：细（52px），背景随主题，不喧宾夺主 */
.app-topbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  background-color: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0; /* 允许空间名省略 */
}

.brand-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.brand-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: nowrap;
}

.topbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
}

/* 空间名：可点，触发菜单；超长省略、移动端不换行（§2.4） */
.space-name {
  border: none;
  background: none;
  color: var(--text-weak);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-input);
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-name:hover { color: var(--text); }

.topbar-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* 图标按钮：≥44px 触控（§2.4/§6） */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: none;
  color: var(--text-weak);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.icon-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.icon-btn.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.icon-btn.accent:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.icon-btn:disabled { opacity: 0.55; cursor: default; }

.icon-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* 主题切换点：44px 触控命中区（视觉小圆点通过 ::after 扩大命中区） */
.themes {
  display: flex;
  align-items: center;
  gap: 2px;
}

.theme-dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background-clip: padding-box;
}

/* 扩到 44px 触控命中区（视觉仍是 22px 圆点） */
.theme-dot::after {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}

.theme-dot.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

body[data-theme="night"] .theme-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ============================================================
   菜单弹层（低频动作：邀请码、退出）
   ============================================================ */

.app-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: var(--s-3);
  z-index: 80;
  min-width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pop);
  box-shadow: var(--shadow-pop);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.menu-head { min-width: 0; }

.menu-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--text-weak);
  min-width: 0;
}

.menu-label { flex: 0 0 auto; color: var(--text-weak); }

.menu-logout {
  align-self: stretch;
  justify-content: center;
}

/* 团队信息弹层内联元素（既有类，保留） */
.team-name-line {
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-name-line b { color: var(--accent); font-weight: 600; }

.team-pop-code {
  font-size: 15px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--r-input);
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 邀请码大字展示（§v6：邀请更醒目） */
.team-pop-code--lg {
  display: block;
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.28em;
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 邀请码区块：大字 + 复制码/复制链接 + 说明文案 */
.menu-invite {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.menu-actions {
  display: flex;
  gap: var(--s-2);
}
.menu-actions .tool-btn { flex: 1 1 0; white-space: nowrap; }

.menu-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-weak);
  margin: 0;
}

/* 通用小按钮（复制、退出等） */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-weak);
  font-size: 14px;
  border-radius: var(--r-card);
  cursor: pointer;
}
.tool-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tool-btn.sm { min-height: 36px; padding: 0 10px; font-size: 13px; }
.logout-btn { color: var(--text-faint); }

/* ============================================================
   首页：随手记（一张永远摊开的纸）
   ============================================================ */

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.note-stage {
  height: 100%;
  width: 100%;
  max-width: 720px;   /* 桌面书写区限宽（§2.5） */
  margin: 0 auto;
  padding: clamp(20px, 4vw, 24px) clamp(20px, 4vw, 24px) 48px;
  display: flex;
  flex-direction: column;
}

.note {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  caret-color: var(--accent);
  overflow-y: auto;
  font-feature-settings: "kern";
}

.note::placeholder { color: var(--text-faint); opacity: 0.8; }

/* ============================================================
   时间线面板 / 回放视图（覆盖层）
   ============================================================ */

.timeline-panel, .replay-view {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}

.replay-view { z-index: 60; }

.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

.timeline-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.timeline-hint {
  font-size: 13px;
  color: var(--text-weak);
  margin-bottom: var(--s-6);
  line-height: 1.7;
}

.timeline-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.timeline-item {
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pop);
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  cursor: pointer;
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
}
.timeline-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.timeline-item time {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-weak);
  opacity: 0.9;
}

.timeline-item .preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  opacity: 0.85;
}

.timeline-empty, .consensus-empty {
  color: var(--text-weak);
  font-size: 14px;
  text-align: center;
  margin-top: var(--s-12);
  letter-spacing: 0.02em;
  line-height: 2;
}

.replay-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.replay-time { font-size: 14px; color: var(--text-weak); }
.replay-view .note { pointer-events: none; }

/* ============================================================
   会议页（模式二：并行书写 + AI 共识区）
   ============================================================ */

.meeting-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
}

.writing-side {
  padding: var(--s-6) var(--s-6) var(--s-8);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.meeting-hint {
  font-size: 13px;
  color: var(--text-weak);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.area-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
  align-items: start;
}

.area-card {
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.area-card.mine {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: color-mix(in srgb, var(--accent-weak) 34%, var(--bg-surface));
}

.area-head { margin-bottom: var(--s-2); display: flex; align-items: center; }

.area-nick {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-weak);
}
.area-card.mine .area-nick { color: var(--accent); font-weight: 600; }

.area-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  line-height: 1.85;
  min-height: 180px;
}
.area-input::placeholder { color: var(--text-faint); opacity: 0.7; }

.area-view {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.92;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 180px;
}

/* 公共共识区 */
.consensus-side {
  border-left: 1px solid var(--border);
  padding: var(--s-6) var(--s-4) var(--s-4);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
body[data-theme="night"] .consensus-side { background: color-mix(in srgb, #fff 3%, transparent); }

.consensus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ai-status {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-weak);
  letter-spacing: 0;
}

.consensus-body { flex: 1; }

.consensus-sec {
  margin-bottom: var(--s-6);
  border-left: 3px solid var(--border);
  padding-left: var(--s-3);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

.consensus-sec h4 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: var(--s-2);
  font-weight: 600;
}

.consensus-sec h4::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec-c, var(--text-weak));
}

.sec-待办 { --sec-c: var(--c-todo); border-left-color: var(--c-todo); }
.sec-决策 { --sec-c: var(--c-decision); border-left-color: var(--c-decision); }
.sec-问题 { --sec-c: var(--c-question); border-left-color: var(--c-question); }
.sec-备注 { --sec-c: var(--c-note); border-left-color: var(--c-note); }

.consensus-sec ul { list-style: none; padding: 0; }

.consensus-sec li {
  font-size: 14px;
  line-height: 1.8;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  word-break: break-word;
}
.consensus-sec li:last-child { border-bottom: none; }
.consensus-sec li.empty { color: var(--text-weak); border-bottom: none; }
.sec-备注 li { color: var(--text); opacity: 0.85; }

/* 可追溯：共识条目可点击（§7 契约：结构/类名不变，仅换样式） */
.consensus-sec li:not(.empty) { cursor: pointer; }
.consensus-sec li:not(.empty):hover { color: var(--accent); }

.copy-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.copy-tip { font-size: 13px; color: var(--accent); }

/* 会议响应式（双栏 → 单栏） */
@media (max-width: 900px) {
  .app-shell--meeting { overflow-y: auto; }
  .meeting-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .writing-side { overflow: visible; }
  .consensus-side {
    border-left: none;
    border-top: 1px solid var(--border);
    overflow: visible;
  }
  .area-list { grid-template-columns: 1fr; }
}

/* ============================================================
   登录页（居中卡片，统一 token）
   ============================================================ */

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(2rem + env(safe-area-inset-top)) 1.4rem calc(2rem + env(safe-area-inset-bottom));
  gap: 1.6rem;
}

.auth-brand { text-align: center; }

.auth-brand h1 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-2);
  color: var(--text);
}

.auth-brand p {
  font-size: 13px;
  color: var(--text-weak);
  letter-spacing: 0.06em;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #5C5244));
  margin-bottom: var(--s-4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.auth-logo svg { width: 34px; height: 34px; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--s-6) var(--s-6) var(--s-4);
  box-shadow: var(--shadow-md);
}

.auth-tabs {
  display: flex;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  background: none;
  border: none;
  padding: var(--s-2) 2px var(--s-3);
  font-size: 16px;
  color: var(--text-weak);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: 44px;
}
.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-field span { font-size: 13px; color: var(--text-weak); }

.auth-field input {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 12px 14px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  min-height: 44px;
}
.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.auth-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-input);
  padding: 12px;
  min-height: 44px;
  font-size: 16px;
  letter-spacing: 0.2em;
  cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-btn:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #000); }
.auth-btn:disabled { opacity: 0.72; cursor: default; box-shadow: none; }

/* 提交中轻 spinner（§5） */
.auth-btn:disabled::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  margin-right: 8px;
}

.auth-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--danger);
  min-height: 1.2em;
  margin: 0;
}
/* 错误 = 图标 + 文案 + 颜色三信号（§6） */
.auth-error::before {
  content: '⚠';
  flex: 0 0 auto;
  font-size: 14px;
}
.auth-error:empty { display: none; }

.auth-foot {
  font-size: 12px;
  color: var(--text-weak);
  margin-top: var(--s-4);
  line-height: 1.7;
}

.auth-status {
  font-size: 14px;
  color: var(--text-weak);
  min-height: 1.2em;
  text-align: center;
}

/* 团队（空间）步骤 */
.team-title { font-size: 16px; margin-bottom: var(--s-4); color: var(--text); }

.team-block h3 {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 600;
}

.team-desc {
  font-size: 13px;
  color: var(--text-weak);
  margin-bottom: var(--s-4);
  line-height: 1.7;
}

.team-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-faint);
  font-size: 13px;
  margin: var(--s-6) 0;
}
.team-divider::before, .team-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-link {
  background: none;
  border: none;
  color: var(--text-weak);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: var(--s-6);
  width: 100%;
  min-height: 44px;
}

/* ============================================================
   首页无空间引导卡（§v6：已登录未入空间时显示，卡 B 控制 .hidden）
   ============================================================ */

.no-team-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom));
}

.no-team-card__inner {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-md);
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.no-team-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--text);
}

.no-team-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-weak);
}

.no-team-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* 加入空间按钮：次要（描边）风格，仍是大按钮体量 */
#noTeamJoinBtn {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: none;
}
#noTeamJoinBtn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#noTeamJoinBtn:disabled::before { display: none; }

.no-team-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent);
  min-height: 1.2em;
  margin: 0;
}
.no-team-msg:empty { display: none; }

/* ============================================================
   后台管理 Admin（统一 token 风格，保留既有逻辑/结构）
   ============================================================ */

.admin-page {
  min-height: 100vh;
  min-height: 100dvh;
}

/* 口令门 */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}

.gate-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pop);
  box-shadow: var(--shadow-md);
  padding: 36px 28px;
  width: 100%;
  max-width: 380px;
}
.gate-card h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.gate-card .sub { margin: 0 0 var(--s-6); font-size: 13px; color: var(--text-weak); }

.gate-field { display: flex; gap: var(--s-2); }
.gate-field input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  outline: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  min-height: 44px;
}
.gate-field input:focus { border-color: var(--accent); }
.gate-field button {
  flex: none;
  padding: 10px 18px;
  font-size: 15px;
  border: none;
  border-radius: var(--r-input);
  background: var(--accent-strong);
  color: var(--on-accent);
  cursor: pointer;
  min-height: 44px;
}
.gate-field button:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #000); }
.gate-field button:disabled { opacity: 0.6; cursor: not-allowed; }

.hint {
  margin: var(--s-4) 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--danger);
}

/* 管理面板 */
.panel {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-12);
}
.panel .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.panel .topbar h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.panel .topbar .actions { display: flex; gap: var(--s-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  min-height: 44px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--bg) 70%, var(--bg-surface)); }
.btn.primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #000); }

.banner {
  margin-bottom: var(--s-4);
  padding: 10px 14px;
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 14px;
}
.banner:empty { display: none; }

/* 统计卡片 */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.stat .label { font-size: 12px; color: var(--text-weak); margin-bottom: var(--s-2); }
.stat .value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  color: var(--text);
}
.stat .value.small { font-size: 16px; font-weight: 500; }

/* 表格 */
.section-title { font-size: 15px; font-weight: 600; margin: 28px 0 10px; color: var(--text); }
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--text);
}
th {
  background: color-mix(in srgb, var(--bg) 60%, var(--bg-surface));
  color: var(--text-weak);
  font-weight: 500;
  font-size: 13px;
}
tr:last-child td { border-bottom: none; }
td.empty { text-align: center; color: var(--text-faint); padding: var(--s-6) var(--s-4); }

/* ============================================================
   状态徽标（§5：连接/同步/离线 三态；B 自行创建节点，类可独立成徽标）
   ============================================================ */

/* 三态共用底座：B 以 .badge 为基座再叠加 .sync-badge/.offline-badge，
   底座同时作用于三类，确保任一类单独出现也有完整徽标形态 */
.badge,
.sync-badge,
.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-weak);
}

/* 三态圆点：连接(ok 绿) / 同步(琥珀·进行中) / 离线(danger 红) */
.badge::before,
.sync-badge::before,
.offline-badge::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.badge::before { background: var(--ok); }
.sync-badge::before { background: var(--c-todo); }
.offline-badge::before { background: var(--danger); }

/* 离线态：文案也用 danger 强调（颜色非唯一信号，配合圆点） */
.offline-badge { color: var(--danger); }

.waiting-hint {
  font-size: 14px;
  color: var(--text-weak);
  text-align: center;
  padding: var(--s-8) var(--s-4);
  letter-spacing: 0.02em;
}

/* AI 书记员整理中：呼吸动画（B 实际加 .is-busy，兼容旧 .busy 类名） */
.ai-status.busy, .ai-status.is-busy { color: var(--accent); }

/* ============================================================
   动效（§4：只动 transform/opacity；全部包进 no-preference）
   ============================================================ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes breath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes area-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  40% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 主题背景/文字交叉淡化（§4.5：400ms，列明属性 background-color/color） */
  body { transition: background-color var(--dur-4) var(--ease-out), color var(--dur-4) var(--ease-out); }

  /* 进入/退出（§4.3：进入 200-300ms；退出≈75%） */
  .timeline-panel, .replay-view { animation: fade-in var(--dur-3) var(--ease-out); }

  .app-main > * { animation: fade-up var(--dur-3) var(--ease-out) both; }

  /* 文字浮现（§4.4：120ms） */
  .auth-card, .gate-card { animation: fade-up var(--dur-3) var(--ease-out) both; }

  /* 共识区新条目淡入（§4.6：opacity + translateY(4px)，不引起布局跳动） */
  .consensus-sec li:not(.empty) { animation: fade-up var(--dur-2) var(--ease-out) both; }

  /* 进入动效工具类（B 加 .fade-up 触发） */
  .fade-up { animation: fade-up var(--dur-3) var(--ease-out) both; }

  /* hover/press 微反馈（§4.7：opacity/scale，仅 transform/opacity 等非布局属性） */
  .icon-btn, .tool-btn, .auth-tab, .btn, .auth-btn {
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out),
      transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .icon-btn:active, .tool-btn:active, .btn:active, .auth-btn:active { transform: scale(0.98); }

  .theme-dot { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
  .theme-dot:hover { transform: scale(1.08); }

  .timeline-item { transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
  .timeline-item:hover { transform: translateX(2px); }

  .consensus-sec li:not(.empty) { transition: color var(--dur-1) var(--ease-out); }

  .area-card { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .area-card:not(.mine):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

  .area-flash { animation: area-flash 1.6s var(--ease-out); }

  /* 提交 spinner */
  .auth-btn:disabled::before { animation: spin 0.8s linear infinite; }

  /* AI 整理中呼吸（.is-busy 为 B 实际加类，兼容 .busy） */
  .ai-status.busy, .ai-status.is-busy { animation: breath 1.6s var(--ease-in-out) infinite; }

  /* 同步徽标圆点轻呼吸（同步中 = 进行中） */
  .sync-badge::before { animation: breath 1.4s var(--ease-in-out) infinite; }
}

/* 降级兜底：reduced-motion 下几乎静止（§4.8） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   移动端底部导航（§v6：≤720px 显示、>720px 隐藏；三页共用）
   ============================================================ */

.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  text-decoration: none;
  color: var(--text-weak);
  font-size: 11px;
  letter-spacing: 0.04em;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item svg { width: 22px; height: 22px; flex: 0 0 auto; }

.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item:not(.active):hover { color: var(--text); }

/* ============================================================
   移动端（≤720px）与触屏
   ============================================================ */

@media (max-width: 720px) {
  .bottom-nav { display: flex; }

  .app-topbar { padding: 0 var(--s-2); height: 48px; }
  .brand-name { display: none; }        /* 窄屏只留品牌标 + 空间名 */
  .space-name { max-width: 40vw; font-size: 13px; }
  .icon-btn { padding: 0 8px; gap: 4px; }
  .icon-btn .icon-label { display: none; }  /* 窄屏图标按钮仅留图标 */
  #homeLink .icon-label { display: inline; }  /* 例外：会议页返回键保留可见文字「随手记」 */
  .note-stage { padding: var(--s-4) var(--s-4) calc(56px + env(safe-area-inset-bottom) + var(--s-4)); }
  .note { font-size: 16px; line-height: 1.85; }
  .app-menu { left: var(--s-2); right: var(--s-2); min-width: 0; }
  .meeting-main { padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--s-4)); }
  .timeline-panel, .replay-view {
    padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  }
}

/* 触屏：无 hover，按 :active 反馈 */
@media (hover: none) {
  .icon-btn:active, .tool-btn:active, .btn:active, .auth-btn:active { transform: scale(0.98); }
}

/* ============================================================
   便捷更新（v7 卡B）：更新提示条 + 下载页
   ============================================================ */

/* 更新提示条 —— 原生壳内版本落后时由 native.js 注入，结构约定：
     <div id="updateBar" class="update-bar">
       <span class="update-bar-text">发现新版本 vX.Y —— 点击更新（notes）</span>
       <button class="update-bar-close" type="button" aria-label="关闭">×</button>
     </div>
   固定顶部细条：纸色底 + accent 底边；>720px 顶栏上方（顶栏让位下移，不遮顶栏）；
   ≤720px 顶栏下方、不遮底部导航；动效遵守 prefers-reduced-motion。 */
.update-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border-bottom: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.update-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-bar-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-input);
  background: transparent;
  color: var(--text-weak);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.update-bar-close:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* 提示条出现时让壳/登录页让位下移，避免遮挡顶栏（:has 渐进增强，目标环境为 Chromium 原生壳） */
body:has(.update-bar) .app-shell { padding-top: 40px; }
body:has(.update-bar) .auth-page { padding-top: calc(40px + 2rem + env(safe-area-inset-top)); }

/* ≤720px：提示条移到顶栏下方（顶栏保持原位），不遮底部导航 */
@media (max-width: 720px) {
  .update-bar { top: 48px; }
  body:has(.update-bar) .app-shell { padding-top: 0; }
}

/* 提示条滑入（仅 no-preference 下启用；reduce 时由全局降级规则静止） */
@keyframes update-bar-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .update-bar { animation: update-bar-in var(--dur-3) var(--ease-out) both; }
}

/* ---------- 下载页（极简，复用设计 tokens） ---------- */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  width: 100%;
  max-width: 780px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: var(--s-6) var(--s-4);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.dl-card h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--text);
}

.dl-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-weak);
  margin: 0;
}

.dl-btn { text-decoration: none; letter-spacing: 0.06em; }

.dl-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0;
}

.dl-ver {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-weak);
  margin: 0;
}

@media (max-width: 720px) {
  .dl-grid { grid-template-columns: 1fr; max-width: 420px; }
}