/* =========================================================
   RikaiSpace · 设计系统
   白底淡蓝主色 · 简约现代 · 桌面侧栏 / 移动端底部导航自适应
   ========================================================= */
:root {
  /* 第 2 层：主题色（风格可覆盖，"跟随背景取色"时也写这三个） */
  --accent: #3f7ef4;
  --accent-strong: #2e6be0;
  --accent-ink: #ffffff;
  --primary: var(--accent);              /* 兼容旧变量名 */
  --primary-strong: var(--accent-strong);
  --primary-weak: #e8f0fe;
  --primary-faint: #f4f8ff;
  /* 第 3 层：表面（被"面板不透明度"改写） */
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-sunken: #f5f8fd;
  --surface-rgb: 255 255 255;
  --panel-alpha: 1;
  --card: var(--surface);                /* 兼容旧变量名 */
  --bg: var(--surface-sunken);
  --bg-2: var(--surface-2);
  /* 第 4 层：文字与描边（永远不透明） */
  --text: #1b2536;
  --text-2: #5d6b83;
  --text-3: #97a3b8;
  --line: #e5ebf4;
  --danger: #e5484d;
  --danger-weak: #fdeeee;
  --ok: #25a566;
  /* 第 1 层：结构 */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 43, 99, .05), 0 12px 32px -16px rgba(23, 43, 99, .18);
  --shadow-sm: 0 1px 2px rgba(23, 43, 99, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  /* 外观引擎运行时写入：背景图 / 遮罩 / 毛玻璃 */
  --bg-image: none;
  --scrim-alpha: 0;
  --scrim-color: 12 16 24;
  --glass-blur: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
/* 自定义背景层：固定铺满，居中裁剪；遮罩压在图片之上、内容之下，不拦截点击 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--bg-image);
  background-position: var(--bg-x, 50%) var(--bg-y, 50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: scale(var(--bg-scale, 1));
  transform-origin: var(--bg-x, 50%) var(--bg-y, 50%);
  opacity: 0;
  transition: opacity .28s ease;
}
html[data-has-bg] body { background-color: var(--bg); }
html[data-has-bg] body::before { opacity: 1; }
/* 遮罩：只压暗背景，不压暗内容 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgb(var(--scrim-color) / var(--scrim-alpha));
  transition: background-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, body::before, body::after { transition: none; }
}
button { font-family: inherit; }
input, textarea { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
code {
  font-family: Consolas, "SF Mono", monospace;
  font-size: 13px;
  background: var(--primary-faint);
  padding: 2px 6px;
  border-radius: 6px;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 通用组件 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-strong); }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: #c6d7f5; color: var(--primary-strong); background: var(--primary-faint); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #d13b40; }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }

.spinner {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: rot .7s linear infinite;
  flex: none;
}
.spinner-dark { border-color: rgba(63, 126, 244, .25); border-top-color: var(--primary); }
@keyframes rot { to { transform: rotate(360deg); } }

.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  flex: none;
}

/* ---- 等级徽章：Lv.N + 本级经验进度 ---- */
.level-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px 4px;
  border-radius: 7px;
  border: 1px solid #dbe6fb;
  background: linear-gradient(180deg, #fbfdff, #eef4ff);
  color: #2b5bd7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.25;
  overflow: hidden;
  flex: none;
  vertical-align: middle;
}
.level-chip-text { position: relative; z-index: 1; }
/* 进度槽：即使 0% 也有一条淡线，读起来像"进度条"而不是"没有进度" */
.level-chip::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: rgba(43, 91, 215, .12);
}
.level-chip-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #6ea2ff, #2b5bd7);
  border-radius: 0 2px 2px 0;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .level-chip-bar { transition: width .3s ease; }
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--primary-weak);
  color: var(--primary-strong);
}
.badge-demo { background: #fdf3d9; color: #93701d; }
/* 「已暂停」不是错误状态：用中性暖灰，别用红色（红色容易被读成"出错了"） */
.badge-paused { background: #f1ece3; color: #7a6a52; }
.room-head-main [data-paused="1"] { color: #8a6d3b; }
html[data-has-bg] .badge-paused { background: rgba(255, 250, 240, .82); color: #6f5c3f; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.label-opt { color: var(--text-3); font-weight: 400; font-size: 12px; }
.field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  font-size: 15px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(63, 126, 244, .14);
  background: var(--card);
}
.field.invalid input { border-color: var(--danger); }
.field.invalid input:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.field-msg { display: none; font-size: 12.5px; color: var(--danger); margin-top: 5px; }

.form-error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  background: var(--danger-weak);
  border: 1px solid #f5d4d5;
  color: #b3363a;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}
.form-error svg { flex: none; margin-top: 2px; }

.hint {
  background: var(--primary-faint);
  border: 1px dashed #c9dcf9;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 18px;
}
.hint-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary-strong); margin-bottom: 3px; }
.hint-body { padding-left: 2px; }

/* ---------- 认证页 / 欢迎页 ---------- */
.auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: radial-gradient(1100px 480px at 50% -8%, #e2ecff 0%, rgba(226, 236, 255, 0) 65%), var(--bg);
}
.auth-card, .welcome-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 30px 28px;
}
.welcome-card { max-width: 470px; text-align: center; padding: 42px 34px 34px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.back-link:hover { color: var(--primary); }
.auth-title { margin: 0 0 6px; font-size: 21px; }
.auth-sub { margin: 0 0 20px; color: var(--text-2); font-size: 13.5px; }
.auth-switch { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--text-2); }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #4e8ef7, #2e6be0);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 19px;
  flex: none;
  box-shadow: 0 4px 10px -3px rgba(46, 107, 224, .5);
}
.brand-mark-sm { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.brand-mark-lg { width: 62px; height: 62px; font-size: 30px; border-radius: 17px; margin: 0 auto 16px; }
/* 品牌图样占位：正式图样确认前使用中立空白框，保持尺寸稳定 */
.brand-mark.placeholder { background: #eef2f8; border: 1.5px dashed #c9d5e8; box-shadow: none; }
.welcome-name { margin: 0 0 8px; font-size: 26px; letter-spacing: 1px; }
.welcome-slogan { color: var(--text-2); font-size: 14px; margin: 0 0 20px; }
.welcome-feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--primary-faint);
  border: 1px solid #dde9fc;
  padding: 5px 12px;
  border-radius: 999px;
}
.feat-chip svg { color: var(--primary); }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome-foot { margin: 22px 0 0; font-size: 11.5px; color: var(--text-3); }

/* ---------- 应用骨架 ---------- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg, var(--card));
  border-right: 1px solid var(--sidebar-border, var(--line));
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--text-3); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--primary-faint); color: var(--primary-strong); }
.nav-item.active { background: var(--primary-weak); color: var(--primary-strong); font-weight: 650; }

/* ---------- 左侧导航折叠 ---------- */
.nav-collapse {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 28px; margin-bottom: 8px;
  border: none; background: none; color: var(--text-3); cursor: pointer;
  border-radius: 6px; transition: color .15s, background .15s;
}
.nav-collapse:hover { background: var(--primary-faint); color: var(--text); }
.nav-collapse svg { transition: transform .2s; }

/* 折叠态：侧栏收窄为图标栏，文字隐藏，图标居中 */
.shell[data-nav-collapsed="1"] { grid-template-columns: 72px 1fr !important; }
.shell[data-nav-collapsed="1"] .nav-collapse svg { transform: rotate(180deg); }
.shell[data-nav-collapsed="1"] .sidebar { padding: 18px 10px 14px; }
.shell[data-nav-collapsed="1"] .brand { justify-content: center; padding: 4px 0 16px; }
.shell[data-nav-collapsed="1"] .brand-text,
.shell[data-nav-collapsed="1"] .nav-item span:not(.nav-badge),
.shell[data-nav-collapsed="1"] .me-chip-name,
.shell[data-nav-collapsed="1"] .me-chip-sub { display: none; }
.shell[data-nav-collapsed="1"] .nav-item { justify-content: center; padding: 10px 8px; }
.shell[data-nav-collapsed="1"] .nav-badge { position: absolute; top: 4px; right: 4px; }
.shell[data-nav-collapsed="1"] .me-chip { justify-content: center; padding: 8px 4px; }
.side-footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.me-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.me-chip:hover { background: var(--primary-faint); }
.me-chip-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.me-chip-sub { font-size: 11.5px; color: var(--text-3); }
.topbar { display: none; }
.page { grid-column: 2; padding: 30px 34px 70px; }
.page-inner { max-width: 680px; margin: 0 auto; }
.bottom-nav { display: none; }

/* ---------- 首页 ---------- */
.hero {
  background: linear-gradient(135deg, #e9f1ff, #f7faff);
  border: 1px solid #dbe7fc;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.hero-title { margin: 0; font-size: 20px; }
.hero-name { color: var(--primary-strong); }
.hero-sub { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; }
.section { margin-top: 18px; }

/* ---------- 空状态 / 错误状态 ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 46px 24px;
  background: var(--card);
  border: 1px dashed #d8e2f0;
  border-radius: var(--radius);
}
.empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--primary-weak);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.empty-icon-error { background: var(--danger-weak); color: var(--danger); }
.empty-title { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.empty-desc { font-size: 13.5px; color: var(--text-2); max-width: 400px; margin-bottom: 4px; }
.empty .btn { margin-top: 12px; }

.loading-block { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 60px 0; color: var(--text-2); font-size: 14px; }
.skeleton-block { padding: 4px 0; }
.skel {
  border-radius: 10px;
  background: linear-gradient(90deg, #edf1f8 25%, #f7fafe 45%, #edf1f8 65%);
  background-size: 220% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { to { background-position: -120% 0; } }

/* ---------- 我的 ---------- */
.me-head { display: flex; align-items: center; gap: 16px; }
.me-name { font-size: 18px; font-weight: 700; }
.me-user { font-size: 13px; color: var(--text-3); }
.me-badges { margin-top: 6px; display: flex; gap: 6px; }
.me-bio { margin: 16px 0 0; font-size: 14px; color: var(--text-2); }
.me-bio.is-empty { color: var(--text-3); }
.me-meta { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.me-actions { margin-top: 18px; }
.me-note, .me-env { margin-top: 14px; }
.note-title { font-size: 13.5px; font-weight: 650; margin-bottom: 8px; }
.note-list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
.note-list li { margin: 3px 0; }
.env-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); padding: 4px 0; flex-wrap: wrap; }

/* ---------- 404 ---------- */
.nf-card { text-align: center; padding: 44px 30px; }
.nf-code { font-size: 44px; font-weight: 800; color: #cdd9ee; letter-spacing: 2px; }
.nf-title { font-size: 17px; font-weight: 650; margin-top: 6px; }
.nf-desc { color: var(--text-2); font-size: 13.5px; margin: 8px 0 20px; }

/* ---------- toast / dialog ---------- */
#toast-root {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 400px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  animation: toastIn .22s ease;
}
.toast svg { flex: none; }
.toast-ok svg { color: var(--ok); }
.toast-err svg { color: var(--danger); }
.toast-out { opacity: 0; transform: translateY(-6px); transition: .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 25, 45, .42);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn .16s ease;
}
.dialog { width: min(92vw, 380px); background: var(--card); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.dialog-title { font-size: 16.5px; font-weight: 700; }
.dialog-msg { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- 页面通用头 ---------- */
.page-head { margin-bottom: 18px; }
.page-title { margin: 0; font-size: 22px; }
.page-sub { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }

/* ---------- 发布器 ---------- */
.hero-compact { padding: 20px 22px; }
.composer { margin-top: 16px; }
.composer-head { display: flex; gap: 12px; }
.composer-avatar { flex: none; }
.composer-main { flex: 1; min-width: 0; }
.composer-main textarea {
  width: 100%;
  border: none;
  resize: vertical;
  min-height: 76px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
  padding: 6px 2px;
  font-family: inherit;
}
.composer-main textarea:focus { outline: none; }
.composer-counter { text-align: right; font-size: 11.5px; color: var(--text-3); }
.composer-err {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-weak);
  border-radius: 8px;
  padding: 7px 10px;
}
.composer-meta { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.meta-field { flex: 1; min-width: 180px; }
.meta-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.meta-field input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  font-size: 14px;
  color: var(--text);
}
.meta-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }
.minutes-input { display: flex; align-items: center; gap: 8px; }
.minutes-input input { max-width: 110px; }
.minutes-unit { font-size: 12.5px; color: var(--text-3); }
.preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preset-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  transition: all .15s;
}
.preset-chip:hover { border-color: #c6d7f5; color: var(--primary-strong); background: var(--primary-faint); }

.composer-images { margin-top: 12px; }
.img-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.img-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--primary-faint);
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb.is-uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
}
.thumb-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(63, 126, 244, .25);
  border-top-color: var(--primary);
  animation: rot .7s linear infinite;
}
.thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 30, 50, .62);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.thumb-remove:hover { background: rgba(20, 30, 50, .85); }
.add-image-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 76px;
  height: 76px;
  border: 1.5px dashed #c9d8f2;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 12px;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  margin-top: 0;
}
.add-image-btn:hover { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-faint); }
.img-hint { margin-top: 7px; font-size: 11.5px; color: var(--text-3); }

.composer-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.vis-field { flex: 1; min-width: 220px; }
.vis-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.vis-field select {
  width: 100%;
  max-width: 300px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  font-size: 13.5px;
  color: var(--text);
}
.vis-field select:focus { outline: none; border-color: var(--primary); }
.vis-note { margin-top: 5px; font-size: 11.5px; color: var(--text-3); }

/* ---------- 动态流 ---------- */
.feed-tabs { display: flex; align-items: center; gap: 8px; margin: 20px 0 14px; }
.feed-tabs .tab {
  border: none;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.feed-tabs .tab:hover { color: var(--primary-strong); }
.feed-tabs .tab.active { background: var(--primary-weak); color: var(--primary-strong); }
.feed-refresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .15s;
}
.feed-refresh:hover { border-color: #c6d7f5; color: var(--primary-strong); }

.feed { display: flex; flex-direction: column; gap: 14px; }
.feed .empty, .feed .loading-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.feed-more { margin-top: 2px; }
.feed-end { text-align: center; color: var(--text-3); font-size: 12px; padding: 12px 0 2px; }

.post { padding: 18px 20px; }
.post-head { display: flex; gap: 11px; align-items: flex-start; }
.post-head-main { flex: 1; min-width: 0; }
.post-name-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.post-name { font-size: 15px; font-weight: 650; }
.post-user { font-size: 12px; color: var(--text-3); }
.post-time { display: block; font-size: 12px; color: var(--text-3); }
.post-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.post-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
.chip-topic { background: var(--primary-weak); color: var(--primary-strong); }
.chip-time { background: #eaf7f0; color: #1d7a4f; }

.post-content {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.post-imgs { margin-top: 12px; display: grid; gap: 6px; }
.post-imgs img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--primary-faint);
  display: block;
}
.imgs-1 img { max-height: 420px; object-fit: contain; }
.imgs-2, .imgs-4 { grid-template-columns: 1fr 1fr; }
.imgs-2 img, .imgs-4 img { aspect-ratio: 1; object-fit: cover; }
.imgs-3 { grid-template-columns: 1fr 1fr 1fr; }
.imgs-3 img { aspect-ratio: 1; object-fit: cover; }

.post-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.action-btn:hover:not(:disabled) { background: var(--primary-faint); color: var(--primary-strong); }
.action-btn:disabled { opacity: .6; cursor: wait; }
.action-btn.danger:hover:not(:disabled) { background: var(--danger-weak); color: var(--danger); }
.like-btn.liked { color: #e5484d; }
.like-btn.liked svg { fill: #e5484d; }
.like-btn.liked:hover:not(:disabled) { background: var(--danger-weak); color: #d13b40; }
.action-spacer { flex: 1; }

/* ---------- 评论区 ---------- */
.post-comments { margin-top: 4px; padding-top: 6px; }
.comments-empty { color: var(--text-3); font-size: 12.5px; padding: 8px 2px; }
.comment-item { display: flex; gap: 9px; padding: 9px 2px; align-items: flex-start; }
.comment-item + .comment-item { border-top: 1px solid var(--line); }
.comment-main { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.comment-name { font-size: 13px; font-weight: 650; }
.comment-time { font-size: 11.5px; color: var(--text-3); }
.comment-text { font-size: 14px; line-height: 1.6; margin-top: 1px; white-space: pre-wrap; word-break: break-word; }
.comment-del {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  flex: none;
}
.comment-del:hover { color: var(--danger); background: var(--danger-weak); }
.comment-input-row { display: flex; gap: 8px; padding-top: 10px; }
.comment-input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  font-size: 14px;
  color: var(--text);
}
.comment-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }

/* ---------- 规划卡片（诚实占位） ---------- */
.plan-card { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.plan-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--primary-weak);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  flex: none;
}
.plan-body { flex: 1; min-width: 0; }
.plan-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.plan-title { margin: 0; font-size: 16.5px; }
.badge-plan { background: #eef1f6; color: var(--text-2); font-weight: 600; }
.plan-desc { margin: 7px 0 0; color: var(--text-2); font-size: 13.5px; }
.plan-strong { color: #93701d; background: #fdf6e3; border-radius: 8px; padding: 8px 11px; font-size: 13px; }
.plan-list { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; }
.plan-list li { margin: 3px 0; }

/* ---------- 举报对话框 ---------- */
.report-dialog { width: min(92vw, 400px); }
.report-preview {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-3);
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 11px;
  word-break: break-all;
}
.report-reasons { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.report-reason {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  border: 1px solid transparent;
  transition: all .12s;
}
.report-reason:hover { background: var(--primary-faint); }
.report-reason input { accent-color: var(--primary); }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
.report-dialog textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfe;
  font-size: 14px;
  padding: 9px 11px;
  resize: vertical;
  font-family: inherit;
  color: var(--text);
}
.report-dialog textarea:focus { outline: none; border-color: var(--primary); }
.report-err { color: var(--danger); font-size: 12.5px; margin-top: 8px; min-height: 16px; }

/* ---------- 我的举报 ---------- */
.my-reports { display: flex; flex-direction: column; gap: 10px; }
.my-reports .empty { border: none; padding: 20px 10px; box-shadow: none; }
.report-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fbfcfe;
}
.report-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-reason { font-size: 13.5px; font-weight: 650; }
.badge-warn { background: #fdf3d9; color: #93701d; }
.report-preview-line { margin-top: 5px; font-size: 12.5px; color: var(--text-2); word-break: break-all; }
.report-time { margin-top: 5px; font-size: 11.5px; color: var(--text-3); }

/* ---------- 我的：UID 行与资料编辑 ---------- */
.me-uid-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 12px;
  background: var(--primary-faint);
  border: 1px solid #dde9fc;
  border-radius: 10px;
  flex-wrap: wrap;
}
.me-uid-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; }
.me-uid {
  font-family: Consolas, "SF Mono", monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-strong);
  letter-spacing: 1px;
  user-select: all;
}
.me-uid-note { font-size: 11.5px; color: var(--text-3); flex: 1; min-width: 120px; text-align: right; }

.me-edit { margin-top: 14px; }
.me-edit form { margin-top: 6px; }
.me-edit .field { margin-bottom: 14px; }
.me-edit textarea {
  width: 100%;
  min-height: 86px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  color: var(--text);
}
.me-edit textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(63, 126, 244, .14);
  background: var(--card);
}
.me-edit .field.invalid textarea { border-color: var(--danger); }
.edit-note { margin-top: 10px; font-size: 11.5px; color: var(--text-3); }

/* ---------- 自习室列表 ---------- */
.room-create-card { padding: 14px 16px; }
.room-create-form { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
/**
 * 窄屏防溢出：flex 子项的 min-width 默认是 auto（= 内容宽度），
 * 一旦 select/number 有固有宽度就缩不下去，会把整页撑出横向滚动（实测 390 视口下 scrollWidth=470）。
 * 这里统一 min-width: 0 允许收缩，并在窄屏改为竖排。
 */
.room-create-row { display: flex; gap: 9px; flex-wrap: wrap; min-width: 0; }
.room-create-row > * { min-width: 0; }
.room-create-row input:first-child { flex: 1 1 160px; }
.room-create-row input[type="number"] { width: 130px; flex: 0 0 auto; }
.room-create-row select { flex: 1 1 160px; width: auto; max-width: 100%; }
.room-create-form input {
  height: 38px;
  max-width: 100%;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfe;
  font-size: 14px;
  color: var(--text);
}
.room-create-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }
.room-create-hint { font-size: 11.5px; color: var(--text-3); }

.room-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.room-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.room-row:hover { border-color: #c6d7f5; box-shadow: var(--shadow-sm); color: var(--text); }
.room-row-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--primary-weak); color: var(--primary-strong);
  display: grid; place-items: center;
}
.room-row-main { flex: 1; min-width: 0; }
.room-row-top { display: flex; align-items: center; gap: 8px; }
.room-row-name { font-size: 15px; font-weight: 650; }
.room-row-topic { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.room-row-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-3); margin-top: 5px; flex-wrap: wrap; }
.room-online-chip { color: var(--ok); font-weight: 600; }
.room-focus-chip { font-weight: 600; }
.room-focus-chip.on { color: var(--accent-strong); }
.room-focus-chip.rest { color: var(--text-2); }
.room-focus-chip.paused { color: var(--text-3); }

/* ---------- 房间页 ---------- */
.room-head-main { flex: 1; min-width: 0; }
.room-head-ops { display: flex; gap: 7px; flex: none; }
.room-members { padding: 12px 15px; margin-top: 12px; }
/* 房间同步番茄钟 */
.room-sync-pomodoro { padding: 12px 15px; margin-top: 12px; }
.sync-pomodoro-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sync-pomodoro-title { font-size: 13px; font-weight: 650; color: var(--text); }
.sync-pomodoro-timer { font-family: Consolas, "SF Mono", monospace; font-size: 18px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.sync-pomodoro-timer[data-done="1"] { color: var(--danger, #c0392b); }
.sync-pomodoro-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.sync-pomodoro-ops { margin-left: auto; display: flex; gap: 6px; }
.sync-form-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sync-form-fields label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.sync-form-fields input { width: 90px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 14px; }
.room-members-title { font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-bottom: 8px; }
.room-member { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.room-member-main { flex: 1; min-width: 0; }
.room-member-name-row { display: flex; align-items: center; gap: 7px; }
.room-member-name { font-size: 13.5px; font-weight: 600; }
.focus-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #93701d;
  background: #fdf3d9;
  border-radius: 999px;
  padding: 1px 9px;
  margin-top: 3px;
}
.room-kick-btn {
  border: none; background: none; color: var(--text-3);
  font-size: 11.5px; cursor: pointer; padding: 3px 8px; border-radius: 6px; flex: none;
}
.room-kick-btn:hover { color: var(--danger); background: var(--danger-weak); }
.room-chat-body { height: calc(100vh - 420px); min-height: 280px; }

/* ---------- 番茄钟 ---------- */
.po-panel { display: flex; flex-direction: column; gap: 12px; }
.po-active { text-align: center; padding: 26px 20px; }
.po-status-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.po-status-chip {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
  background: var(--primary-weak); color: var(--primary-strong);
}
.po-status-chip.paused { background: #fdf3d9; color: #93701d; }
.po-status-chip.completed { background: #eaf7f0; color: #1d7a4f; }
.po-status-chip.abandoned, .po-status-chip.expired { background: #eef1f6; color: var(--text-2); }
.po-focus-meta { font-size: 12.5px; color: var(--text-2); }
.po-countdown {
  font-family: Consolas, "SF Mono", monospace;
  font-size: 58px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary-strong);
  margin: 14px 0 6px;
  line-height: 1;
}
.po-countdown.done { color: var(--ok); }
.po-server-note { font-size: 11.5px; color: var(--text-3); margin-bottom: 14px; }
.po-btn-row { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }

.po-config { padding: 18px 20px; }
.po-focus-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.po-focus-row input { width: 110px; }
.po-config .field input, .po-config .field select {
  width: 100%; height: 40px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fbfcfe; font-size: 14px; color: var(--text);
}
.po-config .field input:focus, .po-config .field select:focus { outline: none; border-color: var(--primary); }
.po-config-note { margin-top: 12px; font-size: 11.5px; color: var(--text-3); }
.preset-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 目标 ---------- */
.goal-create { padding: 16px 18px; }
.goal-create .field { margin-bottom: 10px; }
.goal-create .field input {
  width: 100%; height: 40px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fbfcfe; font-size: 14px; color: var(--text);
}
.goal-create .field input:focus { outline: none; border-color: var(--primary); }
.goal-create-row { display: flex; gap: 9px; margin-bottom: 12px; }
.goal-create-row input {
  flex: 1; height: 40px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fbfcfe; font-size: 14px; color: var(--text);
}
.goal-create-row input:focus { outline: none; border-color: var(--primary); }
.goal-card { padding: 16px 18px; }
.goal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.goal-title { font-size: 15px; font-weight: 650; }
.goal-status {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--primary-weak); color: var(--primary-strong);
}
.goal-status.completed { background: #eaf7f0; color: #1d7a4f; }
.goal-status.abandoned { background: #eef1f6; color: var(--text-2); }
.goal-note { margin-top: 6px; font-size: 13px; color: var(--text-2); }
.goal-progress { margin-top: 10px; }
.goal-progress-label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.goal-progress-bar { height: 7px; border-radius: 999px; background: var(--primary-faint); margin-top: 5px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4e8ef7, #2e6be0); transition: width .3s; }
.goal-meta { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.goal-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---------- 专注历史 ---------- */
.po-history-row { padding: 13px 16px; position: relative; }
.po-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.po-history-title { font-size: 14px; font-weight: 650; }
.po-history-meta { margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.po-history-del {
  position: absolute; top: 10px; right: 12px;
  border: none; background: none; color: var(--text-3);
  font-size: 11px; cursor: pointer; padding: 2px 7px; border-radius: 6px;
}
.po-history-del:hover { color: var(--danger); background: var(--danger-weak); }
.po-history-row .po-status-chip { font-size: 10.5px; padding: 2px 9px; }

/* ---------- 成长卡片与经验流水 ---------- */
.me-growth { margin-top: 14px; }
.growth-head { display: flex; align-items: center; gap: 14px; }
.growth-level {
  width: 54px; height: 54px; border-radius: 14px; flex: none;
  background: linear-gradient(135deg, #4e8ef7, #2e6be0);
  color: #fff; font-size: 17px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px -3px rgba(46, 107, 224, .45);
}
.growth-xp-info { flex: 1; min-width: 0; }
.growth-xp-total { font-size: 16px; font-weight: 700; }
.growth-next { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.growth-head + .goal-progress-bar { margin-top: 12px; }
.growth-today { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.growth-rules-note {
  margin-top: 12px; padding: 9px 11px;
  background: var(--primary-faint); border: 1px dashed #c9dcf9;
  border-radius: 9px; font-size: 11.5px; color: var(--text-2); line-height: 1.7;
}
.me-xp-events { margin-top: 14px; }
.xp-events-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.xp-events-list .empty { border: none; padding: 18px 10px; box-shadow: none; }
.xp-event-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.xp-event-row:last-child { border-bottom: none; }
.xp-event-row.skipped .xp-event-label { color: var(--text-3); }
.xp-event-main { flex: 1; min-width: 0; }
.xp-event-label { font-size: 13.5px; font-weight: 600; }
.xp-event-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.xp-event-amount { font-family: Consolas, "SF Mono", monospace; font-size: 14px; font-weight: 700; flex: none; }
.xp-event-amount.pos { color: var(--ok); }
.xp-event-amount.neg { color: var(--danger); }
.xp-event-amount.zero { color: var(--text-3); font-weight: 600; }
.like-btn.static { cursor: default; }
.like-btn.static:hover { background: none; color: var(--text-2); }

/* ---------- 我的动态（me 页自己发布的动态） ---------- */
.me-posts { margin-top: 14px; }
.me-posts-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.me-posts-list .empty { border: none; padding: 18px 10px; box-shadow: none; }
.me-post-row { padding: 9px 2px; border-bottom: 1px solid var(--line); }
.me-post-row:last-child { border-bottom: none; }
.me-post-content {
  font-size: 13.5px; line-height: 1.6; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.me-post-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* ---------- 好友共同任务 ---------- */
.collab-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.collab-list .empty { border: none; padding: 18px 10px; box-shadow: none; }
.collab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.collab-row:last-child { border-bottom: none; }
.collab-main { flex: 1; min-width: 0; }
.collab-title { font-size: 13.5px; font-weight: 600; }
.collab-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.collab-ops { display: flex; gap: 6px; flex: none; align-items: center; }
.collab-done-label { font-size: 12px; color: var(--ok); font-weight: 600; }
.collab-friend-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; }
.collab-friend-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }

/* ---------- AI 助手 ---------- */
.ai-banner {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 16px;
}
.ai-banner.offline { background: #fdf6e3; border: 1px solid #f0e2b6; }
.ai-banner.online { background: var(--primary-faint); border: 1px solid #cfe0fb; }
.ai-banner-icon { flex: none; margin-top: 2px; }
.ai-banner.offline .ai-banner-icon { color: #b08a2e; }
.ai-banner.online .ai-banner-icon { color: var(--primary-strong); }
.ai-banner-title { font-size: 15px; font-weight: 700; }
.ai-banner.offline .ai-banner-title { color: #8a6a1e; }
.ai-banner-desc { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.6; }

.ai-body { display: flex; flex-direction: column; gap: 14px; }
.ai-tasks { display: flex; flex-direction: column; gap: 10px; }
.ai-task-card { padding: 16px 18px; }
.ai-task-head { display: flex; gap: 12px; align-items: flex-start; }
.ai-task-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--primary-weak); color: var(--primary-strong);
  display: grid; place-items: center;
}
.ai-task-head-main { flex: 1; min-width: 0; }
.ai-task-title { font-size: 15px; font-weight: 650; }
.ai-task-desc { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.ai-task-disabled-note { margin-top: 9px; font-size: 12px; color: #b08a2e; background: #fdf6e3; border-radius: 8px; padding: 6px 10px; }
.ai-task-vision-note { margin-top: 9px; font-size: 12px; color: var(--text-2); background: var(--bg); border-radius: 8px; padding: 6px 10px; }

.ai-task-form { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 13px; display: flex; flex-direction: column; gap: 10px; }
.ai-form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ai-form-note { font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.ai-task-form textarea {
  width: 100%; min-height: 90px; resize: vertical;
  border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe;
  font-size: 14px; padding: 9px 11px; font-family: inherit; color: var(--text);
}
.ai-task-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }
.ai-scope-row { display: flex; gap: 14px; }
.ai-scope-item { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.ai-scope-item input { accent-color: var(--primary); }
.ai-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px dashed #c9d8f2; border-radius: 9px; padding: 7px 12px;
  color: var(--text-2); font-size: 12.5px; cursor: pointer; width: fit-content;
}
.ai-attach-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.ai-img-preview { position: relative; width: 130px; height: 130px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ai-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-img-remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(20, 30, 50, .62); color: #fff; cursor: pointer; line-height: 1;
}
.ai-preview-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ai-payload-preview {
  margin: 0; padding: 10px 12px; max-height: 160px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word;
  font-family: Consolas, "SF Mono", monospace;
}
.ai-form-error {
  background: var(--danger-weak); border: 1px solid #f5d4d5; color: #b3363a;
  font-size: 13px; border-radius: 9px; padding: 8px 11px;
}

.ai-result-dialog { width: min(94vw, 560px); max-height: 86vh; overflow-y: auto; }
.ai-disclose {
  margin-top: 8px; font-size: 12px; font-weight: 600; color: #93701d;
  background: #fdf3d9; border-radius: 8px; padding: 6px 10px;
}
.ai-sent-toggle {
  border: none; background: none; color: var(--primary-strong); font-size: 12.5px;
  cursor: pointer; padding: 2px 0; text-align: left;
}
.ai-result-box { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ai-block { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; position: relative; }
.ai-text { font-size: 14px; line-height: 1.7; }
.ai-code {
  margin: 0; font-family: Consolas, "SF Mono", monospace; font-size: 12.5px;
  background: var(--bg); border-radius: 8px; padding: 10px; overflow-x: auto; white-space: pre;
}
.ai-block-edit {
  position: absolute; top: 7px; right: 9px; border: none; background: none;
  color: var(--text-3); font-size: 11.5px; cursor: pointer; padding: 2px 7px; border-radius: 6px;
}
.ai-block-edit:hover { color: var(--primary-strong); background: var(--primary-faint); }
.ai-block-editor {
  width: 100%; min-height: 90px; border: 1px solid var(--primary); border-radius: 8px;
  font-size: 13.5px; padding: 9px 11px; font-family: inherit; resize: vertical; color: var(--text);
}
.ai-block-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.ai-usage-note { margin-top: 10px; font-size: 11.5px; color: var(--text-3); }

.ai-history { padding: 16px 18px; }
.ai-history-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ai-history-list .empty { border: none; box-shadow: none; padding: 18px 10px; }
.ai-history-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.ai-history-row:last-child { border-bottom: none; }
.ai-history-main { flex: 1; min-width: 0; }
.ai-history-title { font-size: 13.5px; font-weight: 600; }
.ai-history-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ---------- 隐私说明页 ---------- */
.privacy-card { max-width: 620px; padding: 30px 32px; }
.privacy-section { margin-top: 20px; }
.privacy-section h3 { margin: 0 0 8px; font-size: 15px; }
.privacy-section ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }
.privacy-section li { margin: 3px 0; }
.privacy-foot { margin-top: 24px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- 导航角标 ---------- */
.nav-item { position: relative; }
.nav-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.bottom-nav .nav-badge { top: 0; right: 6px; }

/* ---------- 好友页 ---------- */
.fr-search-card { padding: 16px 18px; }
.fr-search-row { display: flex; gap: 8px; }
.fr-search-row input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfe;
  font-size: 14px;
  color: var(--text);
}
.fr-search-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }
.fr-search-hint { margin-top: 7px; font-size: 11.5px; color: var(--text-3); }
.fr-search-hint-inline { padding: 10px 2px 2px; font-size: 13px; color: var(--text-3); }
.fr-search-result { margin-top: 6px; }
.fr-empty-line { padding: 12px 2px; font-size: 13.5px; color: var(--text-2); }

.fr-hit { display: flex; align-items: center; gap: 11px; padding: 12px 4px; border-top: 1px solid var(--line); }
.fr-hit-main { flex: 1; min-width: 0; }
.fr-hit-name { font-size: 14.5px; font-weight: 650; }
.fr-hit-user { font-size: 12px; color: var(--text-3); }
.fr-hit-ops { display: flex; align-items: center; gap: 10px; }
.fr-rel-label { font-size: 12px; color: var(--text-3); text-align: right; }

.fr-tabs { display: flex; gap: 6px; margin: 18px 0 12px; flex-wrap: wrap; }
.fr-tabs .tab {
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.fr-tabs .tab:hover { color: var(--primary-strong); }
.fr-tabs .tab.active { background: var(--primary-weak); color: var(--primary-strong); }
.tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: 1px;
}

.fr-panel { display: flex; flex-direction: column; gap: 10px; }
.fr-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.fr-row-main { flex: 1; min-width: 0; }
.fr-name-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.fr-name { font-size: 14.5px; font-weight: 650; }
.fr-user { font-size: 12px; color: var(--text-3); }
.fr-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.fr-req-msg { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.fr-row-ops { display: flex; align-items: center; gap: 7px; flex: none; }
.fr-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}
.fr-online-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(37, 165, 102, .18); }
.fr-online-dot.off { background: #c6d0de; }

.fr-more-wrap { position: relative; }
.fr-more-btn {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
}
.fr-more-btn:hover { background: var(--primary-faint); color: var(--primary-strong); }
.fr-menu {
  position: absolute;
  right: 0;
  top: 34px;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 5px;
  min-width: 128px;
}
.fr-menu-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--text);
  border-radius: 7px;
  cursor: pointer;
}
.fr-menu-item:hover { background: var(--primary-faint); }
.fr-menu-item.danger { color: var(--danger); }
.fr-menu-item.danger:hover { background: var(--danger-weak); }

/* ---------- 会话列表 ---------- */
.conv-list { display: flex; flex-direction: column; gap: 10px; }
.conv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.conv-row:hover { border-color: #c6d7f5; box-shadow: var(--shadow-sm); color: var(--text); }
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conv-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.conv-name { font-size: 14.5px; font-weight: 650; }
.conv-time { font-size: 11.5px; color: var(--text-3); flex: none; }
.conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.conv-preview {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-badge {
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* ---------- 聊天视图 ---------- */
.chat-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; position: sticky; top: 0; z-index: 20; }
.chat-back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-2);
  flex: none;
}
.chat-back:hover { background: var(--primary-faint); color: var(--primary-strong); }
.chat-peer-avatar { flex: none; }
.chat-peer-main { flex: 1; min-width: 0; }
.chat-peer-name { font-size: 15px; font-weight: 650; line-height: 1.3; }
.chat-peer-status { font-size: 11.5px; color: var(--text-3); }
.chat-peer-status.on { color: var(--ok); }

.chat-body {
  height: calc(100vh - 260px);
  min-height: 320px;
  overflow-y: auto;
  padding: 16px 4px 8px;
  display: flex;
  flex-direction: column;
}
.chat-load-more { text-align: center; }
.chat-load-more-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-size: 12.5px;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  margin: 0 auto 10px;
}
.chat-load-more-btn:hover { color: var(--primary-strong); border-color: #c6d7f5; }
.chat-messages { display: flex; flex-direction: column; gap: 10px; }
.chat-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 30px 0; }
/**
 * .chat-msg 用 grid 而不是 flex：
 * 三列 = 头像 / 气泡 / 时间戳（时间戳放气泡外，避免短消息被挤成窄条），两行 = 气泡行 / 时间戳行。
 * flex 版本要靠 order + flex-basis:100% 凑「时间戳换行」，在 row-reverse（mine）下会算反，
 * 对方消息的时间戳还会漂到头像右侧。grid 声明一次就对，且天然支持镜像。
 *
 * 结构（第 2 列 = 气泡与时间戳共用的列，宽度由气泡撑开）：
 *   theirs: [头像] [昵称+气泡]  [空]
 *           [空]   [时间戳]      [空]
 *   mine:   [空]   [昵称+气泡]  [头像]
 *           [空]   [时间戳右对齐] [空]
 */
.chat-msg {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  column-gap: 8px;
  align-items: end;
  justify-content: start;
}
/* 头像贴住气泡底部（气泡上方还有昵称，所以要对齐到气泡而不是 wrap 底边） */
.chat-msg > .avatar { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 3px; }
.chat-msg > .chat-msg-wrap { grid-column: 2; grid-row: 1; min-width: 0; }
/**
 * 时间戳行：单元格与气泡同宽，所以这里不能加左右 padding（会撑宽列、破坏右对齐）。
 * 用 padding-top 只管行距，文字水平位置交给 text-align + 气泡自身的左右内边距。
 * 想让「刚刚」与气泡内文字对齐，就用 padding 的负补偿技巧：不改变列宽。
 */
.chat-msg > .chat-msg-meta {
  grid-column: 2; grid-row: 2;
  padding: 3px 0 0;
  min-width: 0;
}
/* mine：整体镜像——头像挪到右边，气泡与时间戳靠右 */
.chat-msg.mine { justify-content: end; }
.chat-msg.mine > .avatar { grid-column: 3; }
.chat-msg.mine > .chat-msg-wrap { grid-column: 2; justify-self: end; }
.chat-msg.mine > .chat-msg-meta { grid-column: 2; text-align: right; }
.chat-bubble {
  max-width: 76%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px 6px;
  font-size: 14.5px;
  line-height: 1.55;
  word-break: break-word;
}
.chat-msg.mine .chat-bubble { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-msg-meta { font-size: 10.5px; color: var(--text-3); }

.chat-input { margin-top: 10px; padding: 10px 14px; position: sticky; bottom: 12px; z-index: 20; }
.chat-input-row { display: flex; gap: 9px; }
.chat-input-row input {
  flex: 1;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  font-size: 14.5px;
  color: var(--text);
}
.chat-input-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63, 126, 244, .13); }
.chat-input-row input:disabled { background: var(--bg); color: var(--text-3); }
.chat-notice {
  background: #fdf6e3;
  border: 1px solid #f0e2b6;
  color: #93701d;
  font-size: 12.5px;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
}

/* ---------- 移动端 ---------- */
@media (max-width: 879px) {
  .shell { display: block; }
  .sidebar { display: none; }
  .topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 40;
    height: 54px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-title { font-size: 16px; font-weight: 650; }
  .page { padding: 18px 16px 110px; }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .bottom-nav .nav-item { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 5px 8px; border-radius: 10px; min-width: 0; }
  .bottom-nav .nav-item svg { width: 19px; height: 19px; }
  .hero { padding: 20px; }
  .welcome-actions { grid-template-columns: 1fr; }
  .auth-wrap { padding: 20px 16px; }
  .composer { padding: 16px; }
  .post { padding: 15px 16px; }
  .imgs-3 { grid-template-columns: 1fr 1fr; }
  .imgs-4 img, .imgs-3 img, .imgs-2 img { aspect-ratio: 1; }
  .feed-tabs .tab { padding: 5px 10px; }
  .plan-card { flex-direction: column; }
  .chat-body { height: calc(100vh - 320px); }
  .chat-bubble { max-width: 84%; }
  .fr-hit-ops { flex-direction: column; align-items: flex-end; gap: 4px; }
  .po-countdown { font-size: 44px; }
  .room-chat-body { height: calc(100vh - 480px); min-height: 240px; }
  .bottom-nav .nav-item { font-size: 10px; padding: 5px 5px; }
}

/* ---------- 双人屏幕共享（阶段 9） ---------- */
.duo-share { margin: 12px 0 0; padding: 14px 15px; }
.page-inner.duo-size-large { max-width: 1000px; }
.page-inner.duo-size-max { max-width: none; }
.duo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.duo-status { font-size: 12.5px; color: var(--text-2); }
.duo-layout-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 10px; }
.duo-layout-controls label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.duo-layout-controls select { max-width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--text); font: inherit; }
.duo-videos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.duo-share[data-layout="remote"] .duo-videos, .duo-share[data-layout="local"] .duo-videos { grid-template-columns: minmax(0, 1fr) minmax(100px, 22%); }
.duo-share[data-layout="remote"] .duo-video-remote { grid-column: 1; grid-row: 1; }
.duo-share[data-layout="remote"] .duo-video-local { grid-column: 2; grid-row: 1; }
.duo-video { margin: 0; min-width: 0; }
.duo-video figcaption { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.duo-video-box { position: relative; min-width: 0; width: 100%; max-height: max(180px, calc(100dvh - 260px)); background: #0b1220; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.duo-video-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #0b1220; }
.duo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.duo-note { font-size: 12px; color: var(--text-2); margin-top: 9px; line-height: 1.6; }
@media (max-width: 720px) {
  .duo-videos, .duo-share[data-layout="remote"] .duo-videos, .duo-share[data-layout="local"] .duo-videos { grid-template-columns: minmax(0, 1fr); }
  .duo-share[data-layout="remote"] .duo-video-remote { grid-column: 1; grid-row: 1; }
  .duo-share[data-layout="remote"] .duo-video-local { grid-column: 1; grid-row: 2; width: 45%; justify-self: center; }
  .duo-share[data-layout="local"] .duo-video-local { grid-column: 1; grid-row: 1; }
  .duo-share[data-layout="local"] .duo-video-remote { grid-column: 1; grid-row: 2; width: 45%; justify-self: center; }
}

.duo-media-info { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.55; word-break: break-word; }
/* ---------- 房间码 / 房间文件（阶段 10） ---------- */
.room-code-join { margin-top: 12px; padding: 12px 15px; }
.room-code-join-form { display: flex; gap: 8px; flex-wrap: wrap; }
.room-code-join-form input { flex: 1; min-width: 190px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; letter-spacing: 1px; text-transform: uppercase; background: var(--card); }
.room-code-join-hint { font-size: 12px; color: var(--text-2); margin-top: 7px; line-height: 1.6; }
.room-code-card, .room-files-card { margin-top: 12px; padding: 14px 15px; }
.room-code-head, .room-files-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.room-code-status, .room-files-meta { font-size: 12px; color: var(--text-2); }
.room-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-code-value { font: 700 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 3px; background: #f1f5fb; border: 1px dashed var(--line); padding: 6px 12px; border-radius: 8px; }
.room-code-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.room-code-note, .room-files-note { font-size: 12px; color: var(--text-2); margin-top: 9px; line-height: 1.6; }
.room-files-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.room-file-progress { font-size: 12px; color: var(--text-2); }
.room-file-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.room-file-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.room-file-row:first-child { border-top: 0; }
.room-file-main { flex: 1; min-width: 0; }
.room-file-name { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-file-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.room-file-ops { display: flex; gap: 6px; flex: none; }
.room-file-empty { font-size: 12.5px; color: var(--text-2); padding: 4px 0; }
@media (max-width: 720px) { .room-code-value { font-size: 17px; letter-spacing: 2px; } }
/* ---------- 品牌图与开发者信息 ---------- */
.brand-img { object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 2px; box-shadow: none; }
.brand-mark.brand-img { border-radius: 11px; }
.brand-mark-sm.brand-img { border-radius: 9px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 2px 0 16px; }
.auth-brand img { width: 96px; height: 96px; border-radius: 20px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.auth-brand-credit { font-size: 12px; color: var(--text-2); }
.welcome-portrait { width: 128px; height: 128px; border-radius: 24px; object-fit: contain; background: #fff; border: 1px solid var(--line); display: block; margin: 0 auto 14px; }
.side-credit { margin-top: 10px; font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.5; }

/* =========================================================
   v1.1：更新公告 / 我的任务 / 自习室任务 / 头像 / 资料卡
   ========================================================= */
.avatar { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---- 更新公告 ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 56, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.announce-modal {
  width: min(560px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.announce-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.announce-header h2 { font-size: 16px; margin: 0; }
.modal-close {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  padding: 4px; border-radius: 8px; line-height: 0;
}
.modal-close:hover { background: var(--primary-faint); }
.announce-body { padding: 6px 20px 4px; overflow: auto; }
.announce-item { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.announce-item:last-child { border-bottom: 0; }
.announce-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-3); }
.announce-version {
  background: var(--primary-weak); color: var(--primary-strong);
  border-radius: 999px; padding: 1px 9px; font-weight: 650;
}
.announce-title { font-size: 15px; margin: 8px 0 6px; }
.announce-list { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; }
.announce-list li { margin: 5px 0; }
.announce-note { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.announce-footer {
  padding: 13px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end;
}

/* ---- 我的任务 ---- */
.tasks-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tasks-hint { font-size: 12.5px; color: var(--text-3); margin: 6px 0 12px; }
.tasks-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tab {
  background: none; border: none; cursor: pointer;
  padding: 8px 12px; font-size: 14px; color: var(--text-2);
  border-bottom: 2px solid transparent;
}
.tab.is-active { color: var(--primary-strong); border-bottom-color: var(--primary); font-weight: 650; }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.task-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; display: flex; gap: 12px;
  justify-content: space-between; align-items: flex-start; background: var(--card);
}
.task-item.task-completed { background: var(--primary-faint); }
.task-item.task-completed .task-title { color: var(--text-3); text-decoration: line-through; }
.task-main { flex: 1; min-width: 0; }
.task-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-title { font-weight: 650; word-break: break-word; }
.task-due {
  font-size: 12px; color: var(--text-3); background: var(--primary-faint);
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.task-due-today { color: #a86800; background: #fff4e0; }
.task-due-overdue { color: var(--danger); background: var(--danger-weak); }
.task-note {
  margin: 6px 0 0; font-size: 13.5px; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.task-meta { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.task-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.task-form {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.task-form[hidden] { display: none; }
.task-form-actions { display: flex; gap: 8px; }

/* ---- 自习室：本次任务 ---- */
.room-tasks-card { margin-bottom: 12px; padding: 14px 15px; }
.room-tasks-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.room-tasks-status { font-size: 12px; color: var(--text-2); }
.room-tasks-note { font-size: 12px; color: var(--text-2); margin: 6px 0 9px; line-height: 1.6; }
.room-tasks-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; }
.room-task-option { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 3px 2px; }
.room-task-option-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-task-option-due { font-size: 12px; color: var(--text-3); }
.room-tasks-empty { font-size: 12.5px; color: var(--text-2); padding: 2px 0; }
.room-member-tasks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.room-task-chip {
  font-size: 11.5px; color: var(--primary-strong); background: var(--primary-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 双人画面下方：头像 + 任务 ---- */
.duo-video figcaption.duo-person { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; padding: 0; }
.duo-avatar { flex: none; line-height: 0; }
.duo-avatar-el { cursor: pointer; }
.duo-person-main { flex: 1; min-width: 0; }
.duo-person-name {
  font-size: 12.5px; font-weight: 650; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duo-task-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.duo-task-chip {
  font-size: 11px; color: var(--primary-strong); background: var(--primary-faint);
  border-radius: 999px; padding: 0 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 点击头像：公开资料卡 ---- */
.user-card { width: min(360px, 100%); }
.user-card-head { display: flex; gap: 12px; align-items: center; }
.user-card-name { font-size: 16px; font-weight: 700; }
.user-card-uid { font-size: 12px; color: var(--text-3); }
.user-card-bio { margin: 12px 0 0; font-size: 14px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }

/* ---- 我的页：头像操作 ---- */
.me-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.me-avatar-actions { display: flex; gap: 4px; }

@media (max-width: 640px) {
  .task-item { flex-direction: column; }
  .task-actions { justify-content: flex-start; }
  .announce-modal { max-height: 90vh; }
  /* 窄屏下创建表单整行竖排，避免 select + number 并排撑宽页面 */
  .room-create-row { flex-direction: column; align-items: stretch; }
  .room-create-row > *, .room-create-row input[type="number"], .room-create-row select { width: 100%; flex: 1 1 auto; }
}

/* =========================================================
   v1.2：开发者详情 / 任务一级页 / 总结 / 音乐厅 / 自习计时
   ========================================================= */

/* ---- 经验飘字 ---- */
.xp-float {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -50%);
  font-weight: 800; font-size: 15px; color: var(--primary-strong);
  background: var(--card); border: 1px solid var(--primary-weak);
  padding: 4px 10px; border-radius: 999px;
  box-shadow: var(--shadow);
  animation: xp-rise 1.6s ease-out forwards;
}
@keyframes xp-rise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.92); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}
.xp-float-reduced { animation: none; opacity: 1; }

/* ---- 页面头 ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-title { font-size: 19px; margin: 0; }
.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }

/* ---- 开发者详情 ---- */
.dev-card { max-width: 620px; }
.dev-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dev-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.dev-title { margin: 0; font-size: 20px; }
.dev-sub { font-size: 13px; color: var(--text-2); }
.dev-list { margin: 0 0 16px; }
.dev-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.dev-row dt { color: var(--text-2); font-size: 13.5px; }
.dev-row dd { margin: 0; font-weight: 600; }
.dev-note p { margin: 6px 0; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.dev-muted { font-size: 12.5px; color: var(--text-3); }

/* ---- 我的：更多功能 ---- */
.me-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.me-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; background: var(--card);
}
.me-link:hover { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-faint); }

/* ---- 分段控件 ---- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.seg-btn { border: none; background: none; padding: 6px 14px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.seg-btn.is-active { background: var(--primary); color: #fff; font-weight: 600; }

/* ---- 统计卡片 ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat-label { font-size: 12.5px; color: var(--text-2); }
.stat-value { font-size: 22px; font-weight: 800; line-height: 1.3; }
.stat-unit { font-size: 12px; color: var(--text-3); }

/* ---- 图表 ---- */
.chart-wrap { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; overflow-x: auto; padding-bottom: 4px; }
.chart-col { flex: 1 0 22px; min-width: 22px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.bar { width: 8px; border-radius: 3px 3px 0 0; min-height: 1px; }
.bar-pomodoro { background: #7aa7f7; }
.bar-study { background: #3f7ef4; }
.chart-label { font-size: 10.5px; color: var(--text-3); margin-top: 6px; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot-pomodoro { background: #7aa7f7; }
.dot-study { background: #3f7ef4; }
.legend-note { color: var(--text-3); }
.summary-range-note { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0; }
.summary-note { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.7; }
.summary-table { margin-top: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; flex-wrap: wrap; }
.summary-date { color: var(--text-2); }
.summary-metrics { color: var(--text); }

/* ---- 音乐厅 ---- */
.music-card { max-width: 720px; }
.music-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.music-item {
  text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  color: var(--text);
}
.music-item:hover { border-color: var(--primary); background: var(--primary-faint); }
.music-item.is-active { border-color: var(--primary); background: var(--primary-weak); }
.music-name { font-weight: 700; font-size: 15px; }
.music-desc { font-size: 12.5px; color: var(--text-2); }
.music-controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.music-volume { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.music-volume input { width: 140px; }
.music-note { font-size: 12.5px; color: var(--text-3); line-height: 1.7; margin: 10px 0 0; }

/* ---- 自习计时 ---- */
.study-card { margin-bottom: 12px; padding: 14px 15px; }
.study-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.study-status { font-size: 12.5px; color: var(--text-2); }
.study-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.study-timer { font: 700 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primary-strong); }
.study-note { font-size: 12px; color: var(--text-3); margin: 8px 0 0; line-height: 1.6; }
.room-task-done { margin-left: 4px; }

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .seg { align-self: flex-start; }
  .chart { height: 140px; }
  .stat-value { font-size: 19px; }
  .music-controls { gap: 12px; }
  .music-volume input { width: 110px; }
  .dev-row { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-float { animation: none; opacity: 1; }
}

/* =========================================================
   v1.3：主题背景 / 设置 / 状态 / 本地音乐
   ========================================================= */
html[data-theme="warm"] {
  --bg: #fdf8f2; --card: #fffdf9; --text: #2a231b;
  --text-2: #6b5f52; --text-3: #9b8d7e; --line: #f0e6d9;
  --primary: #c97b3c; --primary-strong: #a85f28;
  --primary-weak: #fbe9d7; --primary-faint: #fef6ee;
}
html[data-theme="blue"] {
  --bg: #eef4fd; --card: #ffffff; --text: #16233a;
  --text-2: #4a5b78; --text-3: #8394ad; --line: #d9e5f6;
  --primary: #2f6fe0; --primary-strong: #2459ba;
  --primary-weak: #dbe9fe; --primary-faint: #eef5ff;
}
html[data-theme="dark"] {
  --bg: #12161f; --card: #1a2030; --text: #e6ecf7;
  --text-2: #a9b6cc; --text-3: #7b8799; --line: #2a3446;
  --primary: #5b93f7; --primary-strong: #87b0ff;
  --primary-weak: #1e2a44; --primary-faint: #182034;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
}
html[data-theme="dark"] .task-item,
html[data-theme="dark"] .music-item,
html[data-theme="dark"] .me-link,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .announce-modal,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .room-code-value,
html[data-theme="dark"] .task-form input,
html[data-theme="dark"] .task-form textarea {
  background: var(--card); color: var(--text);
}
html[data-theme="dark"] .empty-icon { background: var(--primary-weak); }
html[data-theme="dark"] .chart-wrap { background: var(--card); }
html[data-theme="dark"] .duo-video-box { background: #05080f; }

/* ---- 设置页 ---- */
.settings-card { margin-bottom: 14px; max-width: 780px; }
.settings-note { font-size: 12.5px; color: var(--text-3); line-height: 1.7; margin: 8px 0 0; }
.settings-note b { color: var(--text-2); font-weight: 650; }
.settings-note-top { margin: 4px 0 0; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.status-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; text-align: left;
  color: var(--text);
}
.status-item.is-active { border-color: var(--primary); background: var(--primary-faint); }
.status-symbol { font-size: 16px; font-weight: 700; color: var(--primary-strong); }
.status-label { font-size: 13.5px; font-weight: 650; }
.status-desc { font-size: 11.5px; color: var(--text-3); }
.status-custom { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin-top: 10px; }
.status-custom[hidden] { display: none; }
.settings-actions { margin-top: 12px; }

/* ---- 头像状态点 ---- */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
/* 状态点只在头像容器内绝对定位；万一脱离容器也退化为普通小圆点，不会撑成满屏色块 */
.status-dot {
  width: 14px; height: 14px;
  border-radius: 50%; background: #25a566; color: #fff;
  border: 2px solid var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.avatar-wrap .status-dot {
  position: absolute; right: -3px; bottom: -3px;
  width: 40%; height: 40%; min-width: 12px; min-height: 12px;
}
.status-dot[data-mode="dnd"] { background: #e5484d; }
.status-dot[data-mode="away"] { background: #b08900; }
.status-dot[data-mode="studying"] { background: #3f7ef4; }
.status-dot[data-mode="custom"] { background: #7a5af5; }
.status-dot[data-online="false"] {
  background: #97a3b8; color: #fff;
}

/* ---- 本地音乐 ---- */
.local-music { margin-top: 14px; }
.local-track-list { list-style: none; margin: 10px 0; padding: 0; max-height: 240px; overflow: auto; }
.local-track {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.local-track.is-current { background: var(--primary-faint); border-radius: 6px; }
.local-track-name {
  flex: 1; min-width: 0; text-align: left; background: none; border: none;
  color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.local-track-dur { color: var(--text-3); font-size: 12px; }
.local-track-empty { padding: 10px 2px; color: var(--text-3); font-size: 13px; }
.music-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.music-volume-val { font-size: 12px; color: var(--text-3); min-width: 34px; }
.music-section-title { font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }

/* ---- 好友列表增强 ---- */
.friend-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); }
.friend-row.is-pinned { background: var(--primary-faint); border-radius: 8px; }
.friend-main { flex: 1; min-width: 0; }
.friend-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.friend-note-tag { font-size: 11px; color: var(--text-3); }
.friend-star { color: #d99a00; font-size: 12px; }
.friend-sub { font-size: 12px; color: var(--text-3); }
.friend-ops { display: flex; gap: 4px; flex-wrap: wrap; }
.friend-status-text { font-size: 12px; color: var(--text-2); margin-left: 4px; }

@media (max-width: 640px) {
  .theme-grid, .status-grid { grid-template-columns: repeat(2, 1fr); }
  .status-custom { grid-template-columns: 1fr; }
  .local-track { flex-wrap: wrap; }
}

/* ---- 跨页共享小窗 ---- */
.media-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; max-width: min(460px, calc(100vw - 36px));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.media-bar[hidden] { display: none; }
.media-bar-preview {
  width: 96px; height: 56px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  background: #0e1626;
}
.media-bar-preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-bar-main { min-width: 0; flex: 1; }
.media-bar-title { font-size: 13px; font-weight: 700; white-space: nowrap; }
.media-bar-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.media-bar-actions { display: flex; gap: 6px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .media-bar { left: 12px; right: 12px; bottom: 74px; max-width: none; flex-wrap: wrap; }
  .media-bar-actions { width: 100%; justify-content: flex-end; }
}

/* ---- 建房任务弹窗 ---- */
.overlay--blur {
  background: rgba(15, 25, 45, .34);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.dialog--task {
  position: relative;
  width: min(94vw, 460px);
  max-height: 86vh;
  overflow: auto;
  padding: 26px;
}
.dialog-close {
  position: absolute; right: 12px; top: 10px;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-3);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dialog-close:hover { background: var(--primary-faint); color: var(--text); }
.dialog--task .dialog-sub {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}
/* 任务完成分享：可编辑草稿 textarea */
.share-draft-input {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  color: var(--text);
  box-sizing: border-box;
}
.share-draft-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-weak); }

.task-picker { margin-top: 16px; }
.picker-trigger {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 14px; cursor: pointer;
}
.picker-trigger:hover { border-color: #c6d7f5; }
.picker-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.picker-caret { color: var(--text-3); transition: transform .15s ease; }
.picker-open .picker-caret { transform: rotate(180deg); }

.picker-panel {
  margin-top: 8px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow-sm);
  max-height: 240px; overflow: auto;
}
.picker-panel[hidden] { display: none; }
.picker-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.picker-row:hover { background: var(--primary-faint); }
.picker-check { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.picker-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker-row-title { font-size: 14px; }
.picker-row-meta { font-size: 11.5px; color: var(--text-3); }
.picker-empty {
  padding: 12px 10px; font-size: 13px; color: var(--text-2);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.picker-empty p { margin: 0; }
.picker-add {
  width: 100%; margin-top: 4px; padding: 9px;
  background: none; border: none; border-top: 1px dashed var(--line);
  color: var(--primary-strong); font-size: 13px; cursor: pointer;
}
.picker-add:hover { background: var(--primary-faint); }
.picker-new { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.picker-new input {
  height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.picker-new-actions { display: flex; gap: 8px; justify-content: flex-end; }

.task-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.task-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 4px 6px 4px 10px;
  background: var(--primary-weak); color: var(--primary-strong);
  border-radius: 999px; font-size: 12.5px;
}
.task-chip-remove {
  border: none; background: none; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 2px;
  cursor: pointer; opacity: .7;
}
.task-chip-remove:hover { opacity: 1; }

@media (max-width: 640px) {
  .dialog--task { width: 100%; padding: 20px 16px; max-height: 88vh; }
  .dialog--task .dialog-actions { flex-direction: column-reverse; }
  .dialog--task .dialog-actions .btn { width: 100%; }
}

/* ---- 五人共享：谁在共享（数据源缺失时整块不渲染） ---- */
.share-media-card { margin-bottom: 14px; }
.share-media-head { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.share-media-list { display: flex; flex-direction: column; gap: 6px; }
.share-media-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px; background: var(--primary-faint);
}
.share-media-row-main { min-width: 0; flex: 1; }
.share-media-row-name { display: flex; align-items: center; gap: 6px; }
.share-media-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25a566; flex: none;
}
.share-media-row-sub { font-size: 11.5px; color: var(--text-3); }
.share-media-empty { margin: 0; font-size: 13px; color: var(--text-2); }
html[data-theme="dark"] .share-media-row { background: var(--primary-weak); }

/* ---- 音乐厅唱片机 ---- */
.turntable-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 0 4px;
}
.turntable {
  position: relative; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.turntable-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1c1c22 0%, #0c0c10 62%, #000 100%);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
}
/* 唱片纹路：多层同心圆模拟刻痕 */
.turntable-groove {
  position: absolute; inset: 8px; border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 2px,
    transparent 2px, transparent 5px
  );
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
}
/* 中心标签 */
.turntable-label {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b5e, #d9434f);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.turntable-label::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #101014;
}
/* 唱针臂（纯装饰） */
.turntable::before {
  content: '';
  position: absolute; top: 4px; right: 4px; width: 4px; height: 72px;
  background: linear-gradient(#cfd6e4, #8b96ab);
  border-radius: 4px; transform-origin: top center; transform: rotate(28deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.turntable-wrap.is-spinning .turntable-disc {
  animation: turntable-spin 1.8s linear infinite;
}
@keyframes turntable-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .turntable-wrap.is-spinning .turntable-disc { animation: none; }
}
.turntable-caption { font-size: 12.5px; color: var(--text-2); }
@media (max-width: 640px) {
  .turntable { width: 140px; height: 140px; }
}

/* ---- 消息页：通知 tab（G 节） ---- */
.notif-tabs {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.notif-tabs[hidden] { display: none; }
.notif-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text-2); font-size: 13.5px; cursor: pointer;
}
.notif-tab:hover { border-color: var(--primary); color: var(--primary-strong); }
.notif-tab.is-active {
  border-color: var(--primary); background: var(--primary-weak);
  color: var(--primary-strong); font-weight: 650;
}
.notif-tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 通知列表面板 */
.notif-panel {
  margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--panel-bg, var(--card));
  overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px dashed var(--line);
  cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--primary-faint); }
.notif-main { min-width: 0; flex: 1; }
.notif-line { font-size: 13.5px; color: var(--text); }
.notif-quote {
  margin-top: 3px; font-size: 12.5px; color: var(--text-2);
  background: var(--bg-soft, rgba(0,0,0,.03)); border-radius: 6px;
  padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-time { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }

/* ---- 群聊区（G 节） ---- */
.group-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 8px;
}
.group-bar[hidden] { display: none; }
.group-bar-title { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.group-list { margin-bottom: 16px; }
.group-list[hidden] { display: none; }
.group-avatar-box { color: var(--primary-strong); background: var(--primary-weak); font-weight: 700; }
.group-count-chip {
  font-size: 11.5px; color: var(--text-3);
  background: var(--bg-soft, rgba(0,0,0,.04)); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px;
}

/* 建群弹窗 */
.group-create-body { display: grid; gap: 10px; }
.group-create-name {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 14px; background: var(--card); color: var(--text);
}
.group-create-name:focus { outline: none; border-color: var(--primary); }
.group-create-hint { font-size: 12.5px; color: var(--text-3); }
.group-create-hint.is-warn { color: var(--danger); font-weight: 600; }
.group-friend-picker {
  max-height: 260px; overflow: auto; display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px;
}
.group-friend-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
}
.group-friend-item:hover { background: var(--primary-faint); }
.group-friend-item input { width: 15px; height: 15px; accent-color: var(--primary); }

/* 成员面板 */
.group-members-list { max-height: 320px; overflow: auto; display: grid; gap: 2px; }
.group-member-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.group-member-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.group-member-name { font-size: 14px; }
.group-member-role {
  font-size: 11px; font-weight: 700; color: var(--primary-strong);
  background: var(--primary-weak); border-radius: 999px; padding: 1px 8px;
}

/* 群消息：他人消息带昵称 */
/**
 * 气泡容器：`.chat-msg` 是 grid，这一层是列内的竖排容器。
 * 必须 `width: fit-content` + `align-items: flex-start`：默认 stretch 会拉满整列；
 * 而 flex 收缩又会让单个 emoji 被压成竖条（实测 40px 宽、emoji 竖排）。
 */
/**
 * 容器跟随气泡内容宽度（width: max-content），这样时间戳右对齐时不会比气泡窄几像素。
 * 上限仍留给气泡自己的 max-width，容器不再额外压。
 */
.chat-msg-wrap {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
}
/* 单行短消息给个下限，气泡不会瘦成一条；min-width 只给气泡，容器跟着内容走 */
.chat-msg-wrap .chat-bubble {
  width: fit-content;
  max-width: 100%;
  min-width: 56px;
}
/* 容器宽度跟着气泡走（否则 wrap 比气泡窄，时间戳右对齐时会差几个像素） */
.chat-msg.mine > .chat-msg-wrap { align-items: flex-end; }
.chat-msg.theirs .chat-msg-wrap { align-items: flex-start; }
.chat-msg.mine .chat-msg-wrap { align-items: flex-end; }
.chat-msg-sender { font-size: 11.5px; color: var(--text-3); margin: 0 0 2px 4px; }

/* ---- 内置表情面板（首版内置，不开放上传） ---- */
.emoji-panel {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 10px 6px; margin-bottom: 8px;
  background: var(--card); max-height: 216px; overflow: auto;
}
.emoji-panel[hidden] { display: none; }
.emoji-title {
  font-size: 11.5px; font-weight: 700; color: var(--text-3);
  margin: 0 0 6px 2px; letter-spacing: .04em;
}
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px; margin-bottom: 8px;
}
.emoji-cell {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 6px 0; border-radius: 7px;
  color: var(--text);
}
.emoji-cell:hover { background: var(--primary-faint); }
.emoji-kao { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.emoji-cell-wide { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emoji-toggle { flex: none; font-size: 17px; line-height: 1; padding: 6px 9px; }

/* =========================================================
   v1.5：五人共享面板 / 小窗切换与收起
   ========================================================= */
.share-panel { margin-bottom: 14px; }
.share-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.share-head strong { font-size: 14.5px; }
.share-status {
  font-size: 12.5px; color: var(--text-2);
  padding: 2px 9px; border-radius: 999px; background: var(--primary-faint);
}
.share-status[data-state="publishing"] { color: #0f7a4a; background: #e6f7ee; }
.share-status[data-state="watching"] { color: var(--primary-strong); background: var(--primary-weak); }
.share-limit {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.share-limit.is-full { color: var(--danger); font-weight: 700; }

/* 成员条 */
.share-members {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.share-member {
  position: relative;
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.share-member:disabled { cursor: default; opacity: .72; }
.share-member.is-sharing { border-color: #bfe3cf; background: #f3fbf6; }
.share-member.is-watching { border-color: var(--primary); background: var(--primary-weak); opacity: 1; }
.share-member-main { min-width: 0; }
.share-member-name-row { display: flex; align-items: center; gap: 6px; }
.share-member-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.share-member-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.share-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #25a566; flex: none;
  box-shadow: 0 0 0 3px rgba(37, 165, 102, .18);
}

/* 舞台 */
.share-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #0d1420;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.share-stage video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #0d1420;
}
.share-stage video[hidden] { display: none; }
.share-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center;
  color: #cdd8e8;
}
.share-empty[hidden] { display: none; }
.share-empty-title { font-size: 15px; font-weight: 700; color: #e8eef8; }
.share-empty-desc { font-size: 12.5px; max-width: 40ch; line-height: 1.6; color: #9fb0c8; }
.share-stage-badge {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(8, 15, 26, .62); color: #e8eef8; font-size: 12px;
  backdrop-filter: blur(6px);
}
.share-stage-badge[hidden] { display: none; }

/* 控制条 */
.share-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.share-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.share-size select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; font-size: 12.5px;
}
.share-note { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin: 10px 0 0; }
.share-note[data-warn="full"] { color: var(--danger); }

/* 小窗：收起态为胶囊 */
.media-bar.is-collapsed {
  padding: 6px; border-radius: 999px; cursor: pointer; gap: 0;
}
.media-bar.is-collapsed .media-bar-preview,
.media-bar.is-collapsed .media-bar-main,
.media-bar.is-collapsed .media-bar-actions { display: none; }
.media-bar.is-collapsed::before {
  content: attr(data-collapsed-label);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 650;
  color: #fff; background: var(--danger); border-radius: 999px;
}
.media-bar-people { font-size: 11.5px; color: var(--primary-strong); margin-top: 2px; white-space: nowrap; }
.media-bar-people[hidden] { display: none; }

@media (max-width: 640px) {
  .share-stage { aspect-ratio: 4 / 3; }
  .share-actions .btn { flex: 1 1 auto; }
  .share-size { width: 100%; }
  .share-head { gap: 6px; }
  .share-limit { margin-left: 0; }
}

/* 小窗（多人共享）：更宽一点 + 紧凑导航按钮，避免按钮溢出 */
.media-bar { max-width: min(620px, calc(100vw - 36px)); }
.media-bar-main { flex: 1 1 120px; }
.media-bar-title, .media-bar-sub { overflow: hidden; text-overflow: ellipsis; }
.media-bar-nav {
  min-width: 30px; width: 30px; padding: 0; justify-content: center;
  font-size: 17px; line-height: 1; font-weight: 700;
}
.media-bar-actions { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .media-bar { left: 10px; right: 10px; bottom: 74px; max-width: none; flex-wrap: wrap; }
  .media-bar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .media-bar .btn-sm { padding: 0 10px; font-size: 12.5px; }
}

/* 小窗最终微调：标题不截断、预览更紧凑 */
.media-bar { max-width: min(680px, calc(100vw - 32px)); }
.media-bar-preview { width: 88px; height: 52px; }
.media-bar-main { flex: 1 1 150px; min-width: 110px; }
.media-bar-title { white-space: normal; line-height: 1.35; }
.media-bar-actions { gap: 4px; }
.media-bar .btn-sm { padding: 0 10px; }

/* =========================================================
   G 节：群聊与表情面板 —— 窄屏与减少动效
   ========================================================= */
@media (max-width: 640px) {
  .notif-tabs { gap: 6px; }
  .notif-tab { padding: 6px 11px; font-size: 12.5px; }
  .emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .emoji-kao { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emoji-panel { max-height: 190px; }
  .chat-msg-wrap { max-width: 90%; }
  .group-friend-picker { max-height: 200px; }
  .group-members-list { max-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-row, .emoji-cell, .group-friend-item, .notif-tab { transition: none; }
}

/* 成长与月度回顾 */
.me-growth .growth-head { padding: 16px; border-radius: 16px; background: linear-gradient(130deg, var(--primary-faint), transparent); }
.me-growth .growth-level { width: 66px; height: 66px; border-radius: 20px; box-shadow: 0 8px 22px rgba(63,126,244,.22); }
.me-growth .goal-progress-bar { height: 9px; border-radius: 999px; overflow: hidden; }
.me-completed-row { padding: 12px 0; border-bottom: 1px solid var(--border, #e8eef7); }
.me-completed-row:last-child { border-bottom: 0; }
.me-completed-title { font-weight: 600; overflow-wrap: anywhere; }
.growth-monthly-next { margin-top: 12px; color: var(--text-2); font-size: 13px; }
.monthly-dialog { width: min(480px, calc(100vw - 32px)); padding: 28px; text-align: center; }
.monthly-period { color: var(--text-2); font-size: 13px; }
.monthly-dialog h2 { margin: 20px 0 12px; }
.monthly-value { font-size: 20px; font-weight: 700; color: var(--primary, #3f7ef4); overflow-wrap: anywhere; }
.monthly-message { color: var(--text-2); line-height: 1.7; }
.monthly-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.personal-ai-card { margin: 14px 0; }
.personal-ai-card summary { font-weight: 600; cursor: pointer; }
.personal-ai-card label { display: block; margin-top: 12px; }
.personal-ai-card input, .personal-ai-card select, .personal-ai-card textarea { display: block; width: 100%; max-width: 560px; margin-top: 6px; padding: 9px; border: 1px solid var(--border, #d9e3f2); border-radius: 8px; background: var(--card, #fff); color: inherit; box-sizing: border-box; }
.personal-ai-note { font-size: 13px; line-height: 1.6; opacity: .8; }
.personal-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.personal-ai-result { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; margin-top: 12px; border-radius: 10px; background: var(--surface, #f4f7fc); }

/* ---------- 好友的房间（v1.6 七.1） ---------- */
.fr-rooms { margin-bottom: 14px; }
.fr-rooms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-rooms-count { font-size: 12px; color: var(--text-3); }
.fr-rooms-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fr-room-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.fr-room-main { flex: 1; min-width: 0; }
.fr-room-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fr-room-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.fr-room-topic { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .fr-room-row { flex-wrap: wrap; }
  .fr-room-row .btn { width: 100%; }
}

/* ---------- 导航排列方向：左右（默认）/ 上下 ---------- */
.nav-mode {
  display: flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; margin-top: 4px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--text-3); font: inherit; font-size: 11.5px; cursor: pointer;
}
.nav-mode:hover { background: var(--primary-faint); color: var(--text-2); }

/* 顶部横条：导航从左侧栏挪到内容之上，网格从「两列」变「两行」 */
.shell[data-nav-mode="top"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
/* 折叠态在顶部模式下没有意义，必须压掉，否则会残留 72px 的列宽 */
.shell[data-nav-mode="top"][data-nav-collapsed="1"] { grid-template-columns: 1fr !important; }

.shell[data-nav-mode="top"] .sidebar {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  /* 基础样式里 .sidebar 是 height:100vh，横向条必须交回内容高度 */
  height: auto;
  padding: 10px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.shell[data-nav-mode="top"] .brand { flex: 0 0 auto; padding: 0; }
.shell[data-nav-mode="top"] .brand-sub { display: none; }
.shell[data-nav-mode="top"] .nav {
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shell[data-nav-mode="top"] .nav::-webkit-scrollbar { display: none; }
.shell[data-nav-mode="top"] .nav-item { flex: 0 0 auto; justify-content: flex-start; }
.shell[data-nav-mode="top"] .nav-collapse { display: none; }
.shell[data-nav-mode="top"] .side-footer {
  margin-top: 0; padding-top: 0; border-top: 0;
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.shell[data-nav-mode="top"] .me-chip { padding: 4px 6px; }
.shell[data-nav-mode="top"] .me-chip-sub { display: none; }
.shell[data-nav-mode="top"] .nav-mode { margin-top: 0; }

/* 窄屏 + 上下排列 = 组合态：顶部一条可横向滚动图标栏，底部导航让位 */
@media (max-width: 760px) {
  .shell[data-nav-mode="top"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
  }
  .shell[data-nav-mode="top"] .sidebar { display: flex; padding: 8px 10px; gap: 8px; }
  .shell[data-nav-mode="top"] .nav { overflow-x: auto; }
  .shell[data-nav-mode="top"] .me-chip { display: none; }
  .shell[data-nav-mode="top"] .bottom-nav { display: none; }
}

/* ---------- AI 助手聊天（v1.6 二.1） ---------- */
.ai-head-ops { display: flex; gap: 6px; }
.ai-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d3e0; flex: 0 0 8px; }
.ai-dot.on { background: #25a566; box-shadow: 0 0 0 3px rgba(37, 165, 102, .15); }
.ai-status-name { color: var(--text); font-weight: 620; }
.ai-status-model { font-family: Consolas, "SF Mono", monospace; font-size: 11.5px; color: var(--text-2); }
.ai-status-note { color: var(--text-3); }
.ai-status-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--primary-weak); color: var(--primary-strong);
}

.ai-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ai-messages {
  flex: 1; min-height: 300px; max-height: min(56vh, 560px);
  overflow-y: auto; padding: 16px 16px 6px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 12px; font-weight: 650;
  background: var(--primary-weak); color: var(--primary-strong);
}
.ai-msg.user .ai-avatar { background: var(--primary); color: #fff; }
.ai-bubble {
  max-width: min(78%, 620px);
  padding: 9px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.ai-msg.user .ai-bubble { background: var(--primary); border-color: transparent; color: #fff; }
.ai-retry { align-self: flex-end; margin-top: 2px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 7px; }

.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
  animation: ai-blink 1.1s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.ai-empty { margin: auto; text-align: center; padding: 24px 12px; max-width: 460px; }
.ai-empty-title { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.ai-empty-sub { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-chip {
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer;
}
.ai-chip:hover { border-color: var(--primary); color: var(--primary-strong); }

.ai-composer { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--surface); }
.ai-input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: 13.5px; line-height: 1.6;
  background: var(--surface); color: var(--text); resize: vertical; min-height: 64px; outline: none;
}
.ai-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.ai-input:disabled { background: var(--surface-2); color: var(--text-3); }
.ai-send-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ai-hint { font-size: 11.5px; color: var(--text-3); }

.ai-settings { margin-top: 12px; }
.ai-set-card { padding: 16px 18px; }
.ai-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ai-set-note { font-size: 12px; color: var(--text-3); line-height: 1.7; margin: 0 0 12px; }
.ai-set-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ai-set-option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ai-set-option input:disabled + span { color: var(--text-3); }
.ai-set-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.ai-set-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.ai-set-field input {
  height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.ai-set-help { font-size: 11.5px; color: var(--text-3); margin: 10px 0 12px; line-height: 1.7; }
.ai-set-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 560px) {
  .ai-messages { max-height: none; min-height: 240px; }
  .ai-bubble { max-width: 86%; }
  .ai-set-actions { justify-content: stretch; }
  .ai-set-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-typing i { animation: none; opacity: .6; }
}

/* ---------- 吉祥物（v1.6 二.3） ---------- */
.mascot {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center;
}
.mascot[hidden] { display: none; }
.mascot-btn {
  /* 圆角方块而不是正圆：原图是方形线稿，圆形裁切会把举起的手臂切掉 */
  width: 58px; height: 58px; padding: 0; border-radius: 18px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  overflow: hidden; box-shadow: 0 6px 18px -8px rgba(23, 43, 99, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mascot-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(23, 43, 99, .5); }
.mascot-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.mascot-hide {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-3); font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.mascot:hover .mascot-hide,
.mascot:focus-within .mascot-hide { opacity: 1; }

/* 跳出来 + 挥手：只动 transform，不动布局 */
@keyframes mascot-jump {
  0%   { transform: translateY(14px) scale(.86); }
  40%  { transform: translateY(-10px) scale(1.04); }
  65%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  55% { transform: rotate(-9deg); }
  80% { transform: rotate(6deg); }
}
.mascot.is-summoning .mascot-btn { animation: mascot-jump .62s cubic-bezier(.22,.9,.3,1) both; }
.mascot.is-summoning .mascot-btn img { animation: mascot-wave .62s ease-in-out both; }

@media (max-width: 760px) {
  /* 抬到底部导航之上，别盖住导航项 */
  .mascot { right: 14px; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); }
  .mascot-btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot.is-summoning .mascot-btn,
  .mascot.is-summoning .mascot-btn img { animation: none; }
  .mascot-btn { transition: none; }
}

/* 设置面板底部：快捷键与吉祥物 */
.ai-set-extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-set-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ai-set-label { min-width: 84px; color: var(--text-3); }
.ai-kbd {
  font-family: Consolas, "SF Mono", monospace; font-size: 11.5px;
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--text);
}
.ai-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ai-switch input { accent-color: var(--primary); }

/* ---------- 通知设置卡（v1.6 七.2） ---------- */
.me-notify .me-look-body { padding-top: 4px; }
.nt-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 12px;
  font-size: 12.5px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.nt-status.is-on { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); color: var(--text); }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d3e0; flex: 0 0 8px; }
.nt-status.is-on .nt-dot { background: #25a566; box-shadow: 0 0 0 3px rgba(37, 165, 102, .15); }
.nt-status-text { flex: 1 1 auto; min-width: 120px; }
.nt-hint { flex: 1 1 100%; font-size: 11.5px; color: var(--text-3); }

.nt-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.nt-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.nt-row:hover { background: var(--surface-2); }
.nt-row input { accent-color: var(--primary); width: 15px; height: 15px; flex: 0 0 15px; }
.nt-row-label { flex: 1 1 auto; }

.nt-note { margin: 0; font-size: 11.5px; line-height: 1.75; color: var(--text-3); }
.nt-note strong { color: var(--text-2); font-weight: 600; }

/* ---------- 任务每日心得（v1.6 五.2） ---------- */
.dialog--note { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 720px); overflow-y: auto; }
.tn-date-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.tn-date {
  height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px;
}
.tn-tz { font-size: 11.5px; color: var(--text-3); flex: 1 1 100%; }

.tn-input {
  width: 100%; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; line-height: 1.75; resize: vertical; min-height: 130px;
  outline: none;
}
.tn-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

.tn-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tn-hint { font-size: 11.5px; color: var(--text-3); }
.tn-count { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.tn-share-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.tn-share-row[hidden] { display: none; }
.tn-share-vis {
  height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px;
}

.tn-actions { margin-top: 14px; flex-wrap: wrap; }
.tn-actions .btn { flex: 0 0 auto; }

.tn-history { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tn-history-title { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.tn-history-list { display: flex; flex-direction: column; gap: 2px; }
.tn-history-empty { font-size: 12.5px; color: var(--text-3); padding: 6px 2px; }
.tn-history-row {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tn-history-row:hover { background: var(--surface-2); }
.tn-history-row.is-active { background: var(--primary-faint); box-shadow: inset 2px 0 0 var(--primary); }
.tn-history-date { font-size: 12px; color: var(--text-2); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tn-history-text {
  font-size: 12.5px; color: var(--text-3); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 560px) {
  .tn-actions .btn { flex: 1 1 auto; }
  .tn-history-text { display: none; }
}

/* ---------- 动态合集（v1.6 四.3） ---------- */
.coll-card { padding: 0; overflow: hidden; margin-bottom: 14px; }
.coll-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 12px 16px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
}
.coll-head:hover { background: var(--surface-2); }
.coll-ico { display: inline-flex; color: var(--text-2); }
.coll-title { font-weight: 620; }
.coll-count { font-size: 11.5px; color: var(--text-3); }
.coll-chev { margin-left: auto; display: inline-flex; color: var(--text-3); transition: transform .2s ease; }
.coll-card.is-open .coll-chev { transform: rotate(90deg); }

.coll-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.coll-toolbar { display: flex; gap: 8px; margin: 12px 0; }
.coll-new-name {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.coll-new-name:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

.coll-list { display: flex; flex-direction: column; gap: 6px; }
.coll-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.coll-item.is-open { background: var(--surface-2); }
.coll-item-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.coll-item-chev { display: inline-flex; color: var(--text-3); transition: transform .2s ease; }
.coll-item.is-open .coll-item-chev { transform: rotate(90deg); }
.coll-item-name { font-weight: 580; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-item-count { font-size: 11.5px; color: var(--text-3); flex: 0 0 auto; }
.coll-item-ops { display: flex; gap: 2px; flex: 0 0 auto; }
.coll-item-ops .btn { height: 24px; padding: 0 7px; font-size: 11.5px; }

.coll-item-body { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 4px; }
.coll-post {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line);
}
.coll-post-text { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-post-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }
.coll-loading, .coll-empty, .coll-error { font-size: 12.5px; color: var(--text-3); padding: 8px 2px; }
.coll-error { color: #b4322f; }
.coll-rename-input {
  flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 6px;
  border: 1px solid var(--primary); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}

.dialog--coll { width: min(440px, calc(100vw - 32px)); }
.pick-list { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; max-height: 46vh; overflow-y: auto; }
.pick-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer;
}
.pick-row:hover { background: var(--surface-2); }
.pick-row input { accent-color: var(--primary); width: 15px; height: 15px; flex: 0 0 15px; }
.pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-count { font-size: 11.5px; color: var(--text-3); flex: 0 0 auto; }
.pick-new { display: flex; gap: 8px; margin-bottom: 4px; }
.pick-new input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}

@media (max-width: 560px) {
  .coll-post-meta { display: none; }
  .coll-toolbar { flex-wrap: wrap; }
  .coll-toolbar .btn { width: 100%; }
}

/* ---------- AI 建议操作卡片（v1.6 二.4） ---------- */
.ai-msg-wrap {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; max-width: min(78%, 620px);
}
.ai-msg-wrap .ai-bubble { max-width: 100%; }

.ai-action {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 12px 14px;
  font-size: 12.5px;
}
.ai-action.is-done {
  border-color: color-mix(in srgb, #25a566 34%, var(--line));
  background: color-mix(in srgb, #25a566 6%, var(--surface));
}
.ai-action-title { font-weight: 650; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.ai-action-rows { display: flex; flex-direction: column; gap: 4px; }
.ai-action-row { display: flex; gap: 10px; align-items: baseline; }
.ai-action-k { flex: 0 0 74px; color: var(--text-3); }
.ai-action-v { flex: 1 1 auto; min-width: 0; color: var(--text); word-break: break-word; }
.ai-action-note { margin-top: 9px; font-size: 11.5px; color: var(--text-3); line-height: 1.7; }
.ai-action-ops { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ai-action-err { margin-top: 8px; font-size: 12px; color: #b4322f; }
.ai-action-done { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.ai-action-check { color: #25a566; font-weight: 700; }
.ai-action-link { margin-left: auto; font-size: 12px; color: var(--primary-strong); text-decoration: none; }
.ai-action-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .ai-msg-wrap { max-width: 86%; }
  .ai-action-ops .btn { flex: 1 1 auto; }
  .ai-action-k { flex: 0 0 62px; }
}

/* ---------- 首页发布区：默认收起（v1.6 四.2） ---------- */
.composer:not(.is-open) { padding: 0; }
.composer-body[hidden] { display: none; }

.composer-collapsed {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 18px; border: 0; border-radius: inherit;
  background: transparent; color: var(--text-3);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.composer-collapsed:hover { background: var(--surface-2); color: var(--text-2); }
.composer-collapsed:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.composer-collapsed[hidden] { display: none; }

.composer-plus {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-weak); color: var(--primary-strong);
  font-size: 17px; font-weight: 600; line-height: 1;
}
.composer-ph { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-cue {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  color: var(--primary-strong); background: var(--primary-weak);
  padding: 3px 10px; border-radius: 999px;
}

@media (max-width: 480px) {
  .composer-cue { display: none; }
  .composer-ph { font-size: 13px; }
}

/* ---------- 「我的」页面：分组 + 卡片折叠（v1.6 四.1） ---------- */
.me-group-title {
  margin: 22px 0 10px; padding-left: 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-3);
}

/* 复用原来的 .note-title 位置做折叠头：视觉与旧版一致，但整行可点 */
.me-collapse-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 650;
  text-align: left; cursor: pointer;
}
.me-collapse-head:hover .me-collapse-name { color: var(--primary-strong); }
.me-collapse-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.me-collapse-name { flex: 1 1 auto; min-width: 0; }
.me-collapse-chev { flex: 0 0 auto; display: inline-flex; color: var(--text-3); transition: transform .2s ease; }
.card.is-open .me-collapse-chev { transform: rotate(90deg); }

.me-collapse-body { margin-top: 10px; }
.me-collapse-body[hidden] { display: none; }

/* 收起时整张卡压成一行高度，别留一大块空白 */
.card[data-collapse]:not(.is-open) { padding: 14px 20px; }

@media (max-width: 560px) {
  .card[data-collapse]:not(.is-open) { padding: 13px 16px; }
  .me-group-title { margin: 18px 0 8px; }
}