/* ============================================================
   拾光笔记 · 移动端应用壳与视图样式
   依赖 tokens.css + components.css，页面样式只引用语义令牌
   ============================================================ */

/* hidden 属性始终生效：防止组件自身 display 规则覆盖 UA 的 [hidden]{display:none}，
   否则会出现「回复栏常驻、取消无效」这类隐蔽故障 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--surface-sunken);
  overflow: hidden;
}

/* ---------- 应用壳：头部 / 可滚动内容 / 底部 tab ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin-inline: auto;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 721px) {
  .app { box-shadow: var(--shadow-lg); border-inline: 1px solid var(--border); }
}

.app-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 3.75rem;
  padding: var(--space-2xs) var(--space-sm);
  background: rgb(250 248 245 / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-sticky);
}
:root[data-theme="dark"] .app-header { background: rgb(19 14 11 / 0.92); }

.app-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-sm) var(--space-sm) var(--space-lg);
}

/* ---------- 顶部导航条（子页面） ---------- */
.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  width: 100%;
  min-height: 2.75rem;
}
.navbar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  letter-spacing: var(--tracking-heading);
}
.navbar__spacer { width: 2.75rem; flex-shrink: 0; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition-ui);
}
.icon-btn:hover { background: var(--action-soft); color: var(--text-brand); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; }

/* ---------- 首页顶部圆角搜索框 ---------- */
.search-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--text-3);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-ui);
}
.search-pill:hover { border-color: var(--clay-400); color: var(--text-2); background: var(--surface-hover); }
.search-pill:active { transform: scale(0.98); }
.search-pill svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* 搜索页头部输入框 */
.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--clay-500);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--clay-200);
  color: var(--text-3);
}
.search-bar svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.search-bar .input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: var(--text-sm);
}
.search-bar .input:focus-visible { box-shadow: none; }

/* ---------- 底部 tab 栏 ---------- */
.tabbar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  padding-bottom: max(env(safe-area-inset-bottom), var(--space-3xs));
  background: rgb(250 248 245 / 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  z-index: var(--z-sticky);
}
:root[data-theme="dark"] .tabbar { background: rgb(19 14 11 / 0.95); }

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: 3rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.2;
  cursor: pointer;
  transition: var(--transition-ui);
}
.tabbar__item:hover { color: var(--text-brand); }
.tabbar__item:active { transform: scale(0.94); }
.tabbar__item svg { width: 1.375rem; height: 1.375rem; }
.tabbar__item.is-active { color: var(--text-brand); font-weight: var(--weight-semibold); }

.tabbar__badge {
  position: absolute;
  top: 0.1875rem;
  left: calc(50% + 0.125rem);
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--berry-500);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-xs);
}
.tabbar__badge[hidden] { display: none; }

/* ---------- 首页品牌行 ---------- */
.home-brand { padding: var(--space-2xs) var(--space-3xs) var(--space-sm); }
.home-brand h1 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3xs);
}
.home-brand p { font-size: var(--text-xs); color: var(--text-3); }

/* ---------- 双列信息流卡片 ---------- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.flow-card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.flow-card__cover {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}
.flow-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flow-card__cover--ph {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--stone-400);
  background:
    radial-gradient(120% 120% at 15% 15%, rgb(255 255 255 / 0.4), transparent 50%),
    var(--surface-sunken);
}
.flow-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-1);
  transition: var(--transition-ui);
}
.flow-card:hover .flow-card__title,
.flow-card:focus-visible .flow-card__title { color: var(--text-brand); }
.flow-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.flow-card__meta time { overflow: hidden; text-overflow: ellipsis; }

/* 加载更多 */
.load-more { display: grid; justify-items: center; padding-block: var(--space-lg) var(--space-2xs); }

/* ---------- 列表区块通用 ---------- */
.content-h {
  margin: var(--space-md) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  letter-spacing: var(--tracking-heading);
}
.stack-list { display: grid; gap: var(--space-2xs); }

.pressable:active { transform: scale(0.985); }

/* ---------- 分类页 ---------- */
.cat-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-ui);
}
.cat-row:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cat-row:active { transform: scale(0.985); }
.cat-row__name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-1); }
.cat-row__count { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }
.cat-row__chevron { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--text-4); }

.cat-tile {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.cat-tile--clay  { background: var(--action-soft);  color: var(--action-soft-text); }
.cat-tile--sage  { background: var(--sage-100);     color: var(--sage-700); }
.cat-tile--sun   { background: var(--sun-100);      color: var(--sun-700); }
.cat-tile--sky   { background: var(--sky-100);      color: var(--sky-700); }
.cat-tile--berry { background: var(--berry-100);    color: var(--berry-700); }
.cat-tile--stone { background: var(--surface-sunken); color: var(--text-2); }

/* 分类色标签（扩展自 .tag） */
.tag--sky   { background: var(--sky-100);   color: var(--sky-700); }
.tag--berry { background: var(--berry-100); color: var(--berry-700); }

/* ---------- 消息列表 ---------- */
.msg-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  min-height: 4rem;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-ui);
}
.msg-row:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.msg-row:active { transform: scale(0.985); }
.msg-row.is-unread { background: var(--surface-raised); border-color: var(--border-brand); }

.msg-row__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
.msg-row__icon svg { width: 1.25rem; height: 1.25rem; }
.msg-row__icon--clay { background: var(--action-soft); color: var(--action-soft-text); }
.msg-row__icon--sky  { background: var(--sky-100); color: var(--sky-700); }

.msg-row__body { flex: 1; min-width: 0; display: grid; gap: 0.125rem; padding-block: 0.125rem; }
.msg-row__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
}
.msg-row__summary {
  font-size: var(--text-xs);
  color: var(--text-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.msg-row__time { font-size: var(--text-xs); color: var(--text-4); }

.msg-row__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--berry-500);
}
.msg-row__dot[hidden] { display: none; }

/* ---------- 个人中心 ---------- */
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  font: inherit;
  text-align: left;
  transition: var(--transition-ui);
}
button.profile-hero { cursor: pointer; }
button.profile-hero:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.profile-hero__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
}
.profile-hero__mail { font-size: var(--text-xs); color: var(--text-3); }
.profile-hero__hint { font-size: var(--text-xs); color: var(--text-3); }
.profile-hero__chevron { margin-left: auto; width: 1rem; height: 1rem; color: var(--text-4); flex-shrink: 0; }

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar--xl { width: 4rem; height: 4rem; font-size: var(--text-xl); }
.avatar--click { cursor: pointer; transition: var(--transition-ui); }
.avatar--click:hover { box-shadow: 0 0 0 3px var(--clay-200); }

.menu { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-ui);
}
.menu-item:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.menu-item:active { transform: scale(0.985); }
.menu-item__icon { display: grid; place-items: center; color: var(--text-brand); flex-shrink: 0; }
.menu-item__icon svg { width: 1.25rem; height: 1.25rem; }
.menu-item__label { flex: 1; min-width: 0; font-weight: var(--weight-medium); color: var(--text-1); }
.menu-item__chevron { width: 1rem; height: 1rem; color: var(--text-4); flex-shrink: 0; }
.menu-item--danger .menu-item__icon,
.menu-item--danger .menu-item__label { color: var(--error-text); }
.menu-item--danger:hover { border-color: var(--berry-400); background: var(--error-soft); }

/* ---------- 登录页 ---------- */
.form-card {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.form { display: grid; gap: var(--space-sm); }
.form-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3xs);
}
.form-sub { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--space-sm); }

.field-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs); align-items: stretch; }
.field-row .input { height: 100%; }
.field-row .btn { flex-shrink: 0; min-width: 7.5rem; }

.verify-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-ui);
}
.verify-box:hover { border-color: var(--clay-400); color: var(--text-brand); }
.verify-box svg { width: 1.125rem; height: 1.125rem; }
.verify-box.is-loading { color: var(--text-3); cursor: wait; border-color: var(--border-strong); }
.verify-box.is-ok {
  border: 1.5px solid var(--success);
  background: var(--success-soft);
  color: var(--success-text);
  animation: ws-check-pop var(--duration-fast) var(--ease-out-back);
}

/* ---------- 个人设置 ---------- */
.settings-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md);
  width: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  transition: var(--transition-ui);
}
.settings-avatar:hover { border-color: var(--clay-400); background: var(--surface-hover); }
.settings-avatar__hint { font-size: var(--text-xs); color: var(--text-3); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 文章详情 ---------- */
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}
.article-head h1 {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-xs);
}
.article-head .tag { margin-right: var(--space-2xs); }

.comment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
}
.comment + .comment { border-top: 1px solid var(--border); }
.comment__head { display: flex; align-items: baseline; gap: var(--space-2xs); margin-bottom: var(--space-3xs); }
.comment__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-1); font-family: var(--font-display); }
.comment__time { font-size: var(--text-xs); color: var(--text-4); }
.comment__text { font-size: var(--text-sm); color: var(--text-2); }
.comment__reply-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-brand);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: var(--space-3xs) 0;
  -webkit-tap-highlight-color: transparent;
}
.comment__reply-btn:active { opacity: 0.65; }
.comment.is-replying {
  background: var(--action-soft);
  border-radius: var(--radius-md);
  padding-inline: var(--space-xs);
  margin-inline: calc(var(--space-xs) * -1);
}
.comment.is-replying .comment__text { color: var(--text-1); }

/* ---------- 消息详情 ---------- */
.msg-detail__head { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.msg-detail__time { font-size: var(--text-xs); color: var(--text-3); }
.msg-detail__card {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.msg-detail__card p { font-size: var(--text-base); color: var(--text-2); }

/* ---------- 静态文案页（关于 / 隐私） ---------- */
.doc-card {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.doc-card .prose { max-width: none; }
.doc-card .prose p { color: var(--text-2); }

/* ---------- 空状态 ---------- */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-4);
  margin-bottom: var(--space-3xs);
}
.empty__icon svg { width: 2rem; height: 2rem; }
.empty__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-2); }
.empty__desc { font-size: var(--text-sm); color: var(--text-3); max-width: 18rem; }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5.25rem;
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  pointer-events: none;
  z-index: var(--z-toast);
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  max-width: min(85%, 26rem);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--stone-900);
  color: var(--stone-50);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  animation: ws-scale-in var(--duration-base) var(--ease-out-back) both;
}
.toast--success svg { width: 1rem; height: 1rem; color: var(--sage-300); }
.toast--info svg { width: 1rem; height: 1rem; color: var(--sky-400); }
.toast.is-leaving { animation: ws-fade-in var(--duration-fast) var(--ease-in) reverse both; }

/* ---------- 补充：视图辅助类 ---------- */
.btn--block { width: 100%; }

.form-title { margin-bottom: var(--space-2xs); }

.article-prose { margin-top: var(--space-sm); }

.comment__body { flex: 1; min-width: 0; }

.msg-detail__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.msg-detail__head .badge { vertical-align: middle; }

.settings-fields { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }

.doc-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3xs);
}
.doc-desc { font-size: var(--text-sm); color: var(--text-3); }
.doc-card .divider { margin-inline: 0; }

.search-results { margin-top: var(--space-2xs); }

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
}

/* ============================================================
   扩展视图样式（评论 / 积分 / 注册 / 登录模式切换 / 文档页）
   全部引用 tokens.css 语义令牌，跟随日夜间换肤
   ============================================================ */

/* ---------- 评论表单 ---------- */
.comment-form-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  gap: var(--space-xs);
}
.comment-form-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
}
.comment-form-card textarea.input { min-height: 6rem; resize: vertical; }
.comment-form-card__actions { display: flex; justify-content: flex-end; }
.comment-reply-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--action-soft);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.comment-reply-bar button {
  border: 0; background: transparent; color: var(--text-brand);
  font-size: var(--text-sm); cursor: pointer; padding: 0 var(--space-3xs);
}
.comment-login-hint {
  margin-top: var(--space-md);
  text-align: center;
}
.comment-login-hint .btn { margin-top: var(--space-2xs); }

/* hCaptcha 组件容器适配（真实人机验证由 TpHcaptcha 服务端校验） */
.ws-captcha { display: grid; gap: var(--space-3xs); }
.ws-captcha .h-captcha { min-height: 68px; }

/* ---------- 登录模式切换 ---------- */
.login-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: var(--space-3xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  margin-bottom: var(--space-sm);
}
.login-mode button {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-2xs) 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-ui);
}
.login-mode button.is-active {
  background: var(--surface);
  color: var(--text-brand);
  box-shadow: var(--shadow-sm);
}

/* ---------- 积分 ---------- */
.points-hero {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--clay-50), var(--stone-50));
}
:root[data-theme="dark"] .points-hero {
  background: linear-gradient(135deg, rgb(213 99 38 / 0.12), rgb(250 248 245 / 0.04));
}
.points-hero__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-brand);
  line-height: 1;
}
.points-hero__label { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--space-4xs); }
.points-hero__sign { margin-left: auto; }
.points-hero__signed {
  font-size: var(--text-sm);
  color: var(--sage-600);
  display: inline-flex; align-items: center; gap: var(--space-4xs);
}
.points-streak { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--text-3); }

.task-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-soft);
}
.task-row:last-child { border-bottom: 0; }
.task-row__icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--sun-100); color: var(--sun-700);
}
.task-row__icon svg { width: 1.25rem; height: 1.25rem; }
.task-row__body { flex: 1; min-width: 0; }
.task-row__title {
  display: block; font-weight: var(--weight-semibold); color: var(--text-1);
  font-size: var(--text-sm);
}
.task-row__desc { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.task-row__pts {
  font-size: var(--text-xs); color: var(--text-brand);
  background: var(--clay-50); border-radius: var(--radius-full);
  padding: 2px 8px; flex-shrink: 0;
}
:root[data-theme="dark"] .task-row__pts { background: rgb(213 99 38 / 0.16); }
.task-row__btn { flex-shrink: 0; }
.task-row__done { font-size: var(--text-sm); color: var(--text-3); flex-shrink: 0; }

.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.shop-card {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.shop-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-card__desc {
  font-size: var(--text-xs); color: var(--text-3);
  min-height: 2.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.shop-card__price {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  color: var(--text-brand);
  font-size: var(--text-base);
}
.shop-card__price small { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-3); margin-left: 2px; }
.shop-card__stock { font-size: var(--text-xs); color: var(--text-3); }

.log-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-soft);
}
.log-row:last-child { border-bottom: 0; }
.log-row__icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--stone-100); color: var(--stone-700);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
:root[data-theme="dark"] .log-row__icon { background: rgb(250 248 245 / 0.08); color: var(--stone-300); }
.log-row__body { flex: 1; min-width: 0; }
.log-row__label { display: block; font-size: var(--text-sm); color: var(--text-1); font-weight: var(--weight-medium); }
.log-row__note { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row__time { font-size: var(--text-xs); color: var(--text-3); flex-shrink: 0; }
.log-row__num { font-family: var(--font-display); font-weight: var(--weight-bold); flex-shrink: 0; font-size: var(--text-sm); }
.log-row__num.is-plus { color: var(--sage-600); }
.log-row__num.is-minus { color: var(--berry-600); }

/* ---------- 注册视图 ---------- */
.register-switch { text-align: center; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--text-3); }
.register-switch button {
  border: 0; background: transparent; color: var(--text-brand);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; padding: 0 2px;
}

/* ---------- 文档页（关于 / 隐私 / 独立页面） ---------- */
.doc-card .prose { max-width: none; }
.doc-card .prose h1, .doc-card .prose h2 { font-size: var(--text-lg); }

/* ---------- 文章封面（真实附件） ---------- */
.article-hero { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-sm); }

/* ---------- 设置页头像 ---------- */
.settings-avatar img { object-fit: cover; }