/**
 * pages.css — 编辑印刷物美学 · 页面层
 * 阿拉个人品牌网站 · Interactive Tool Journal
 * 首页 / 书架 / 详情 / 体验 / 关于 / 用户中心 各页专属样式
 *
 * @author weihanqiang
 * @date 2026-07-09 17:55
 */

/* =============================================================
 * 通用页面骨架
 * ============================================================= */
.page {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-7) var(--space-8);
}
.page-read {
  max-width: var(--container-read);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-7) var(--space-8);
}

/* 区块标题：等宽小标 + 衬线大标 + 朱砂短线（编辑物栏目头） */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.section-head .section-kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinnabar-deep);
}
.section-head .section-title {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.section-head .section-rule {
  width: 48px;
  height: 3px;
  background: var(--cinnabar);
  border: 0;
  margin-top: var(--space-2);
}

/* =============================================================
 * 首页 · HERO
 * 大衬线主标 + 朱砂印章副标 + 批注金句 + 超大刊号水印
 * ============================================================= */
.hero {
  position: relative;
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
  border-bottom: 3px double var(--paper-edge);
  overflow: hidden;
}
/* 超大刊号水印（No.001）— 记忆点 1 的页面级呈现 */
.hero__watermark {
  position: absolute;
  right: -0.06em;
  bottom: -0.18em;
  font-family: var(--serif-en);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(8rem, 26vw, 20rem);
  line-height: 0.8;
  color: var(--warm-gray-2);
  opacity: 0.22;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
:root[data-widget-theme="dark"] .hero__watermark { opacity: 0.12; }

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinnabar-deep);
  margin-bottom: var(--space-4);
}
.hero__title {
  font-family: var(--serif);
  font-size: var(--fs-mega);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 14ch;
  margin-bottom: var(--space-5);
}
.hero__title .hero__title-accent {
  color: var(--cinnabar);
}
/* 朱砂印章副标 */
.hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
}
/* 批注金句 */
.hero__quote {
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-soft);
  max-width: var(--measure);
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (max-width: 720px) {
  .hero__watermark { font-size: clamp(6rem, 30vw, 12rem); opacity: 0.16; }
  .hero__title { font-size: clamp(2.4rem, 9vw, 3.4rem); }
}

/* =============================================================
 * 首页 · 使命陈述条 .mission-bar
 * 横向通栏，左等宽标签 + 衬线陈述，底纹为纸深
 * ============================================================= */
.mission-bar {
  background: var(--paper-deep);
  border-block: 1px solid var(--paper-line);
  padding-block: var(--space-6);
}
.mission-bar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: baseline;
}
.mission-bar__label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinnabar-deep);
  white-space: nowrap;
  border-right: 2px solid var(--cinnabar);
  padding-right: var(--space-5);
}
.mission-bar__text {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--measure-wide);
}
@media (max-width: 720px) {
  .mission-bar__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .mission-bar__label { border-right: 0; border-bottom: 2px solid var(--cinnabar); padding: 0 0 var(--space-2) 0; }
}

/* =============================================================
 * 首页 · 7天成长路径预览 .path-timeline
 * ============================================================= */
.path-timeline {
  padding-block: var(--space-7);
}
.path-timeline__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.path-timeline__hint {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--warm-gray-1);
}
/* 复用 .timeline 组件，此处仅做容器收束 */
.path-timeline .timeline { padding-bottom: var(--space-3); }

/* =============================================================
 * 首页 · 数据信任条 .stats-bar
 * "7 件工具 · 1 本源书 · 11 篇拆解 · 3 件免费试用"
 * ============================================================= */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
}
.stats-bar__item {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-right: 1px solid var(--paper-line);
  position: relative;
}
.stats-bar__item:last-child { border-right: 0; }
.stats-bar__num {
  font-family: var(--serif-en);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--cinnabar);
  letter-spacing: -0.02em;
}
.stats-bar__num .stats-bar__unit {
  font-family: var(--sans);
  font-size: 0.4em;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.15em;
}
.stats-bar__label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
  margin-top: var(--space-2);
}
@media (max-width: 720px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__item { border-bottom: 1px solid var(--paper-line); }
  .stats-bar__item:nth-child(odd) { border-right: 1px solid var(--paper-line); }
  .stats-bar__item:nth-child(3),
  .stats-bar__item:nth-child(4) { border-bottom: 0; }
  .stats-bar__item:nth-child(even) { border-right: 0; }
}

/* =============================================================
 * 书架页 · .shelf-grid
 * 期刊陈列网格，按 Day 顺序成排
 * ============================================================= */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
/* 书架"排"分隔：每行后一条虚线模拟书架隔板 */
.shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 2px dashed var(--paper-edge);
}
.shelf-row:last-child { border-bottom: 0; margin-bottom: 0; }

.shelf-grid__unlock {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--cinnabar-soft);
  border: 1px dashed var(--cinnabar-mute);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}
.shelf-grid__unlock-text {
  font-family: var(--serif);
  font-size: var(--fs-md);
  color: var(--ink);
}
.shelf-grid__unlock-text .accent { color: var(--cinnabar-deep); font-weight: 700; }

/* =============================================================
 * 详情页 · .detail-header（技能头）
 * 大编号 + 标题 + 状态戳 + 元信息表 + 六维评分条形图
 * ============================================================= */
.detail-header {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 3px double var(--paper-edge);
  margin-bottom: var(--space-7);
}
.detail-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.detail-header__title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin-top: var(--space-3);
}
.detail-header__solve {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-top: var(--space-3);
  max-width: var(--measure);
}

/* 元信息表：等宽键值对，表格化 */
.detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-5);
  background: var(--paper-deep);
}
.detail-meta__cell {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.detail-meta__cell:nth-last-child(-n+2) { border-bottom: 0; }
.detail-meta__key {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
  display: block;
  margin-bottom: 2px;
}
.detail-meta__val {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}

/* 详情评分区 */
.detail-scores {
  margin-top: var(--space-6);
}

/* 上一篇/下一篇导航 */
.detail-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--rule);
}
.detail-nav__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--ink-soft);
  max-width: 48%;
}
.detail-nav__link:hover { color: var(--cinnabar-deep); }
.detail-nav__link .detail-nav__dir {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
}
.detail-nav__link .detail-nav__title {
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 600;
}
.detail-nav__link.next { text-align: right; margin-left: auto; }

/* =============================================================
 * 详情页 · .user-card（工具说明书卡片）
 * Part1 用户卡片区，工具说明书风格
 * ============================================================= */
.user-card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.user-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--paper-line);
}
.user-card__head .user-card__part {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  padding: 0.25em 0.6em;
  border-radius: var(--radius);
}
.user-card__head .user-card__title {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}
.user-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: grid;
  gap: var(--space-6);
}
/* 说明书字段：标签 + 列表 */
.user-card__field .user-card__field-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinnabar-deep);
  margin-bottom: var(--space-2);
}
.user-card__field ul { display: grid; gap: var(--space-2); }
.user-card__field li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--ink-soft);
  line-height: 1.6;
}
.user-card__field li::before {
  content: "›";
  position: absolute;
  left: var(--space-2);
  color: var(--cinnabar);
  font-family: var(--mono);
  font-weight: 700;
}
.user-card__field p { color: var(--ink-soft); line-height: 1.7; }

/* =============================================================
 * 体验页 · .play-screen
 * 四段式交互流的屏幕容器，居中卡片
 * ============================================================= */
.play-screen {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-7);
}
.play-screen__stage {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.play-screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--warm-gray-1);
}
.play-screen__bar .play-screen__dots {
  display: inline-flex;
  gap: 6px;
}
.play-screen__bar .play-screen__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-edge);
}
.play-screen__bar .play-screen__dots span:nth-child(1) { background: var(--cinnabar); }
.play-screen__body {
  padding: var(--space-7) var(--space-6);
}
/* 步骤指示器 */
.play-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--warm-gray-1);
}
.play-stepper .play-stepper__step { display: inline-flex; align-items: center; gap: 0.4em; }
.play-stepper .play-stepper__num {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-edge);
  border-radius: 50%;
  font-weight: 700;
  color: var(--warm-gray-1);
}
.play-stepper .play-stepper__step.is-active .play-stepper__num {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: var(--paper);
}
.play-stepper .play-stepper__step.is-done .play-stepper__num {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--paper);
}
.play-stepper .play-stepper__sep { color: var(--paper-edge); }

/* =============================================================
 * 体验页 · .play-input（输入表单）
 * 动态生成输入项
 * ============================================================= */
.play-input__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.play-input__desc {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
}
.play-field { margin-bottom: var(--space-5); }
.play-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.play-field__label .play-field__hint { color: var(--warm-gray-1); text-transform: none; letter-spacing: 0; }
.play-field__input,
.play-field__textarea,
.play-field__select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: 0.7em 0.9em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.play-field__textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.play-field__input:focus,
.play-field__textarea:focus,
.play-field__select:focus {
  outline: none;
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 3px var(--cinnabar-soft);
}
.play-field__input::placeholder,
.play-field__textarea::placeholder { color: var(--warm-gray-2); }
.play-input__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--rule);
}

/* =============================================================
 * 体验页 · .play-log（工作态日志）
 * 等宽打字机风格，逐行输出 Step1-7
 * ============================================================= */
.play-log {
  background: var(--paper-deep);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: var(--space-5);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink-soft);
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
}
.play-log__line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transform: translateY(2px);
  animation: play-log-in 0.4s var(--ease-out) forwards;
}
@keyframes play-log-in {
  to { opacity: 1; transform: translateY(0); }
}
.play-log__line .play-log__tag {
  color: var(--cinnabar-deep);
  font-weight: 700;
  margin-right: 0.6em;
}
.play-log__line .play-log__step {
  color: var(--moss);
  font-weight: 700;
  margin-right: 0.6em;
}
.play-log__line .play-log__ok { color: var(--moss); }
/* 闪烁光标 */
.play-log__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  background: var(--cinnabar);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: play-blink 1s steps(2, start) infinite;
}
@keyframes play-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .play-log__line { animation: none; opacity: 1; transform: none; }
  .play-log__cursor { animation: none; }
}

/* =============================================================
 * 体验页 · .play-result（产物卡片）
 * 示例产物 + 轻量模板拼装
 * ============================================================= */
.play-result {
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.play-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--paper-line);
}
.play-result__head .play-result__title {
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.play-result__body {
  padding: var(--space-5) var(--space-6);
}
.play-result__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--cinnabar-deep);
  background: var(--cinnabar-soft);
  border-left: 3px solid var(--cinnabar);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--space-5);
  line-height: 1.6;
}
.play-result__content {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--ink);
}
.play-result__content h5 {
  font-family: var(--serif);
  font-size: var(--fs-md);
  margin: var(--space-4) 0 var(--space-2);
}
.play-result__content p { margin-bottom: var(--space-3); color: var(--ink-soft); }
.play-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--rule);
}

/* =============================================================
 * 关于页 · .about-header（编者按头）
 * 大号衬线作者名 + 等宽副标 + 首字下沉自述
 * ============================================================= */
.about-header {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 3px double var(--paper-edge);
  margin-bottom: var(--space-7);
}
.about-header__kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinnabar-deep);
  margin-bottom: var(--space-4);
}
.about-header__name {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.about-header__sub {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--warm-gray-1);
  margin-top: var(--space-3);
}
.about-header__rule {
  width: 64px;
  height: 3px;
  background: var(--cinnabar);
  border: 0;
  margin-top: var(--space-5);
}
.about-body {
  max-width: var(--measure-wide);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--ink-soft);
}
.about-body p { margin-bottom: var(--space-4); }

/* =============================================================
 * 关于页 · .method-cards（方法卡）
 * 三张：积极心理学 / AI / 系统思维
 * ============================================================= */
.method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.method-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-top: 3px solid var(--cinnabar);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.method-card__no {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--warm-gray-2);
}
.method-card__title {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-2) 0 var(--space-3);
}
.method-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.7;
}
.method-card__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--paper-edge);
  width: 100%;
}
@media (max-width: 860px) { .method-cards { grid-template-columns: 1fr; } }

/* 作品时间线（关于页复用 .timeline） */
.about-timeline { margin-top: var(--space-7); }

/* =============================================================
 * 用户中心 · .account-status（状态总览）
 * ============================================================= */
.account-status {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.account-status__card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.account-status__card .account-status__label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
}
.account-status__state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.account-status__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-top: var(--space-2);
}
.account-status__list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.account-status__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--paper-line);
}
.account-status__list li:last-child { border-bottom: 0; }
@media (max-width: 720px) { .account-status { grid-template-columns: 1fr; } }

/* =============================================================
 * 用户中心 · .invite-input（邀请码输入区）
 * ============================================================= */
.invite-input {
  background: var(--cinnabar-soft);
  border: 1px dashed var(--cinnabar-mute);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.invite-input__title {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.invite-input__hint {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--cinnabar-deep);
  margin-bottom: var(--space-4);
}
.invite-input__hint .invite-input__testcode {
  background: var(--paper);
  border: 1px solid var(--cinnabar-mute);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.invite-input__row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.invite-input__field {
  flex: 1 1 240px;
  font-family: var(--mono);
  font-size: var(--fs-md);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: 0.8em 1em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.invite-input__field:focus {
  outline: none;
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 3px var(--cinnabar-soft);
}
.invite-input__field.is-error { border-color: var(--cinnabar); }
.invite-input__msg {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
  min-height: 1.2em;
}
.invite-input__msg.is-error { color: var(--cinnabar-deep); }
.invite-input__msg.is-ok { color: var(--moss); }

/* =============================================================
 * 用户中心 · .trial-bar（试用进度条）
 * 3 次免费试用剩余可视化
 * ============================================================= */
.trial-bar { margin-bottom: var(--space-6); }
.trial-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.trial-bar__label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
}
.trial-bar__count {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--cinnabar);
}
.trial-bar__count .trial-bar__total { color: var(--warm-gray-1); font-size: 0.7em; }
.trial-bar__track {
  display: flex;
  gap: var(--space-2);
  height: 14px;
}
.trial-bar__slot {
  flex: 1;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-full);
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
}
.trial-bar__slot.is-used {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}
.trial-bar__slot.is-used::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 0 6px,
    transparent 6px 12px
  );
}
.trial-bar__foot {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--warm-gray-1);
  margin-top: var(--space-2);
}
.trial-bar__foot.is-exhausted { color: var(--cinnabar-deep); font-weight: 700; }

/* 试用记录列表 */
.trial-history { margin-top: var(--space-6); }
.trial-history__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--paper-line);
  font-size: var(--fs-sm);
}
.trial-history__item:last-child { border-bottom: 0; }
.trial-history__name { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.trial-history__summary { color: var(--ink-mute); font-size: var(--fs-xs); }
.trial-history__time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--warm-gray-1); }

/* =============================================================
 * 书籍卡片 · 书架页 (shelf.html)
 * @author weihanqiang @date 2026-07-09 20:30
 * ============================================================= */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-6, 24px);
  margin-top: var(--space-5, 20px);
}
.book-card {
  display: flex;
  flex-direction: column;
  background: var(--paper, #f4efe4);
  border: 1px solid var(--paper-line, #e0d9cb);
  border-radius: var(--radius-card, 12px);
  text-decoration: none;
  color: var(--ink, #1a1612);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(26, 22, 18, .10);
  border-color: var(--cinnabar, #c0392b);
}
.book-card:hover .book-card__link { color: var(--cinnabar, #c0392b); }

/* 卡片顶部封面区（CSS模拟） */
.book-card__cover {
  position: relative;
  padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px);
  border-bottom: 1px solid var(--paper-line, #e0d9cb);
  background:
    linear-gradient(135deg, rgba(192,57,43,.06) 0%, rgba(47,74,58,.06) 100%),
    var(--paper-2, #efe9dd);
}
.book-card__no {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--warm-gray-1, #8a8276);
  letter-spacing: -.02em;
}
.book-card__cover .stamp {
  position: absolute;
  top: var(--space-5, 20px);
  right: var(--space-5, 20px);
}

/* 卡片内容区 */
.book-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
  gap: var(--space-2, 8px);
}
.book-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.book-card__subtitle {
  font-family: var(--serif, serif);
  font-size: 1rem;
  color: var(--ink-mute, #555);
  margin: 0;
}
.book-card__author {
  font-size: var(--fs-xs, 12px);
  color: var(--warm-gray-1, #8a8276);
  letter-spacing: .03em;
  margin: 0;
}
.book-card__desc {
  font-size: var(--fs-sm, 14px);
  line-height: 1.6;
  color: var(--ink-mute, #555);
  margin: var(--space-1, 4px) 0 var(--space-3, 12px);
}
.book-card__stats {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  font-size: var(--fs-xs, 12px);
  color: var(--warm-gray-1, #8a8276);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--paper-line, #e0d9cb);
}
.book-card__stat-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cinnabar, #c0392b);
}
.book-card__stat-label { color: var(--warm-gray-1, #8a8276); }

.book-card__link {
  margin-top: var(--space-4, 16px);
  font-family: var(--mono, monospace);
  font-size: var(--fs-sm, 14px);
  font-weight: 600;
  color: var(--ink, #1a1612);
  transition: color .2s ease;
  align-self: flex-start;
}

/* =============================================================
 * 书籍详情头 · book.html
 * @author weihanqiang @date 2026-07-09 20:30
 * ============================================================= */
.book-header {
  padding: var(--space-6, 24px) 0 var(--space-5, 20px);
  border-bottom: 2px solid var(--ink, #1a1612);
  margin-bottom: var(--space-6, 24px);
}
.book-header__top {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
.book-header__no {
  font-size: var(--fs-sm, 14px);
  font-weight: 600;
  color: var(--warm-gray-1, #8a8276);
  letter-spacing: .03em;
}
.book-header__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0 0 var(--space-2, 8px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.book-header__subtitle {
  font-size: 1.2rem;
  color: var(--ink-mute, #555);
  margin: 0 0 var(--space-3, 12px);
}
.book-header__author {
  font-size: var(--fs-xs, 12px);
  color: var(--warm-gray-1, #8a8276);
  letter-spacing: .04em;
  margin: 0 0 var(--space-4, 16px);
}
.book-header__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-mute, #555);
  max-width: 600px;
  margin: 0 0 var(--space-5, 20px);
}
.book-header__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 20px);
  font-size: var(--fs-xs, 12px);
  color: var(--warm-gray-1, #8a8276);
  padding-top: var(--space-4, 16px);
  border-top: 1px dashed var(--paper-line, #e0d9cb);
}
.book-header__stats strong {
  color: var(--cinnabar, #c0392b);
  font-size: var(--fs-sm, 14px);
}