/* ============================================================
   网页端其他页面重构（web/pages-redesign.css）
   目标：让 阅读 / 词库 / 商城 / 设置 四页与首页同一套「惊艳」语言。
   原则：
   1) 每页仍是独立视图（.view 切换，不改变 app 的视图模型）；
   2) 每页顶部一个「记忆点」hero —— 墨绿深色面板 + 巨号衬线数字 + 细线 kicker；
   3) 只用 CSS：不改 HTML 结构、不改 JS 绑定、不新增取数逻辑。
      hero 的数字/信息来自页面里已经存在的真实 DOM（如 #dictCount、#genTop 的按钮、
      商城 #shopPointsNum），用 CSS 重新排布进 hero 区域；
   4) 所有颜色/字体走首页令牌（--font-disp / --brand / --ink / --card ...），
      因此与 7 套皮肤 × 明暗双轴天然兼容。
   ============================================================ */

/* ---------------- 公共：页面外壳 + 标题（衬线大字 + 细线 kicker） ---------------- */
#view-read, #view-dict, #view-search, #view-settings, #view-shop {
  max-width: 1080px; margin: 0 auto; overflow-x: clip;
}
#view-read.view.active, #view-dict.view.active, #view-search.view.active,
#view-settings.view.active, #view-shop.view.active {
  animation: pgIn .8s var(--ease-out) both;
}
@keyframes pgIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* 页面标题：衬线大字 + 细线 kicker（伪元素生成，不改 HTML） */
#view-read::before, #view-dict::before, #view-settings::before, #view-shop::before, #view-search::before {
  display: block; font-family: var(--font-disp); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; color: var(--ink);
  margin: 6px 0 20px; padding-top: 22px; position: relative;
}
#view-read::before { content: "阅读"; }
#view-dict::before { content: "词库"; }
#view-settings::before { content: "设置"; }
#view-shop::before { content: "商城"; }
#view-search::before { content: "查词"; }
/* 标题前的小细线（kicker 规则线） */
#view-read::before, #view-dict::before, #view-settings::before, #view-shop::before, #view-search::before {
  background: linear-gradient(var(--brand), var(--brand)) left 6px / 34px 1px no-repeat;
  padding-left: 0;
}

/* ---------------- 卡片 & 按钮 & chips 统一 ---------------- */
#view-read .card, #view-dict .card, #view-search .card, #view-settings .card, #view-shop .card {
  border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
#view-read .btn, #view-dict .btn, #view-search .btn, #view-settings .btn, #view-shop .btn {
  border-radius: 999px; letter-spacing: .03em;
}
#view-read .btn.primary, #view-dict .btn.primary, #view-settings .btn.primary, #view-shop .btn.primary {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
#view-read .btn.ghost, #view-dict .btn.ghost, #view-settings .btn.ghost, #view-shop .btn.ghost {
  border: 1px solid var(--line); background: transparent;
}
#view-read .chip, #view-dict .chip, #view-shop .chip, #view-search .chip {
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink2);
  transition: color .4s, border-color .4s, background .4s;
}
#view-read .chip.active, #view-dict .chip.active, #view-shop .chip.active {
  color: var(--ink); border-color: var(--brand); background: var(--brand-soft);
}

/* ============================================================
   阅读：顶部 hero = #genTop 操作区（衬线大标题由 ::before 提供）
   ============================================================ */
#view-read .gen-top {
  position: relative; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, #1f3a33, #14201c);
  border: 1px solid rgba(168, 203, 189, .18); border-radius: var(--r-card);
  color: #f3efe6; padding: 30px 34px 28px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  margin-bottom: 22px;
}
#view-read .gen-top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at 85% 0%, rgba(227, 162, 122, .14), transparent 55%);
}
#view-read .gen-top > * { position: relative; }
#view-read .gen-btns { display: flex; gap: 12px; flex-wrap: wrap; }
#view-read .gen-top .btn.primary {
  background: #f3efe6; color: #0d110f; border: 0; box-shadow: none;
  padding: 13px 32px; font-size: 15px;
}
#view-read .gen-top .btn.primary:hover { box-shadow: 0 14px 40px -10px rgba(168, 203, 189, .45); }
#view-read .gen-top .btn.ghost {
  background: transparent; color: #f3efe6; border: 1px solid rgba(243, 239, 230, .25);
}
#view-read .gen-hint { margin-top: 14px; font-size: 13px; color: #b9b5aa; }
#view-read .gen-hint:empty { display: none; }

/* 阅读列表：卡片化，衬线标题 + 元信息细字 */
#view-read .read-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
#view-read .art-row { margin-bottom: 0; }
#view-read .art-item {
  border: 1px solid var(--card-line); border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow);
  padding: 22px 24px; transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out), border-color .6s;
}
#view-read .art-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
#view-read .art-item .t {
  font-family: var(--font-disp); font-weight: 500; font-size: 22px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--ink); padding-right: 30px;
}
#view-read .art-item .m {
  color: var(--ink3); font-size: 12px; letter-spacing: .06em;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px;
}
#view-read .art-item .m .ok { color: var(--green); }
#view-read .art-item .m .warn { color: var(--red); font-weight: 700; }
#view-read .art-tag-novel { color: var(--violet); }

/* 文章详情页：衬线大标题 + 舒适正文 */
#view-read .article h2 { font-family: var(--font-disp); font-size: clamp(26px, 3vw, 36px); line-height: 1.25; font-weight: 500; }
#view-read .art-text { font-family: var(--font-disp); font-size: 19px; line-height: 1.9; }
#view-read h3 { font-family: var(--font-disp); font-weight: 500; font-size: 22px; }

/* ============================================================
   词库：hero 承载「当前词书 + 真实词数」
   真实 DOM：#bookChips / .dict-bar / #dictCount / #dictList
   做法：把 #dictCount（真实「共 N 个单词」）用 CSS 提升为 hero 大字。
   ============================================================ */
#view-dict { position: relative; }
#view-dict #bookChips { margin: 2px 0 16px; }
#view-dict #bookChips .chip { font-size: 12.5px; padding: 7px 13px; }
#view-dict #bookChips .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 词数 hero：深色面板包住 .dict-count */
#view-dict .dict-count {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1f3a33, #14201c);
  border: 1px solid rgba(168, 203, 189, .18); border-radius: var(--r-card);
  color: #f3efe6; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 26px 32px; margin: 0 0 18px;
  font-family: var(--font-disp); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(20px, 2.6vw, 30px); color: #f3efe6;
}
#view-dict .dict-count::before {
  content: "当前词书"; display: block; font-family: inherit; font-weight: 400;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #a8cbbd;
  margin-bottom: 10px;
}
#view-dict .dict-count::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at 88% 0%, rgba(227, 162, 122, .14), transparent 55%);
}
#view-dict .dict-count:empty { display: none; }

/* 搜索框 + 筛选：胶囊 + 细线 */
#view-dict .dict-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#view-dict .dict-search-wrap input {
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); padding: 13px 20px;
  font-family: inherit; color: var(--ink); width: 100%;
}
#view-dict .dict-search-wrap input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* 词条行：衬线单词 + 状态胶囊 */
#view-dict .dict-list { border-top: 1px solid var(--line); }
#view-dict .dict-item { border-bottom: 1px solid var(--line); }
#view-dict .dict-item .row1 { padding: 16px 4px; }
#view-dict .dict-item .dw { font-family: var(--font-disp); font-weight: 500; font-size: 21px; color: var(--ink); }
#view-dict .dict-item .dp { font-size: 12.5px; color: var(--ink3); }
#view-dict .dict-item .dt { font-size: 14px; color: var(--ink2); }
#view-dict .dict-item .ds { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; }
#view-dict .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
#view-dict .pager .btn { border-radius: 999px; }

/* 查词页：结果卡统一 */
#view-search .search-head b { font-family: var(--font-disp); font-weight: 500; font-size: 26px; }
#view-search .dict-item { border-bottom: 1px solid var(--line); }
#view-search .dict-item .dw { font-family: var(--font-disp); font-size: 20px; }

/* ============================================================
   商城：hero = 积分横幅（.shop-header 内的 .shop-user-banner）
   真实 DOM：#shopPointsNum（真实积分）、#shopDailyNum 等
   ============================================================ */
#view-shop .shop-header {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1f3a33, #14201c);
  border: 1px solid rgba(168, 203, 189, .18); border-radius: var(--r-card);
  color: #f3efe6; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 26px 30px; margin-bottom: 18px; gap: 14px;
}
#view-shop .shop-header::before {
  content: "可用积分"; position: absolute; top: 22px; left: 30px;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #a8cbbd;
}
#view-shop .shop-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at 88% 0%, rgba(227, 162, 122, .16), transparent 55%);
}
#view-shop .shop-header > * { position: relative; z-index: 1; }
#view-shop .shop-user-banner { padding-top: 26px; }
#view-shop .sub-name { color: #f3efe6; font-family: var(--font-disp); font-weight: 500; font-size: 18px; }
#view-shop .sub-points {
  font-family: var(--font-disp); font-weight: 500; font-size: clamp(48px, 6vw, 72px);
  line-height: 1; letter-spacing: -.03em; color: #e3a27a;
}
#view-shop .sub-coin { font-size: 22px; }
#view-shop .sub-label, #view-shop .sub-daily-label, #view-shop .sub-daily-cap { color: #b9b5aa; }
#view-shop .sub-daily-val { color: #a8cbbd; }
#view-shop .sub-daily-art { background: rgba(243, 239, 230, .08); border-color: rgba(243, 239, 230, .16); color: #d7d3c9; }
#view-shop .sub-daily-bar { background: rgba(243, 239, 230, .14); max-width: 220px; }
#view-shop .shop-rules-bar { border-top: 1px dashed rgba(243, 239, 230, .18); color: #b9b5aa; }
#view-shop .shop-rules-bar b { color: #e3a27a; }
#view-shop .shop-header .btn.small.ghost { color: #f3efe6; border-color: rgba(243, 239, 230, .25); }

/* 分类导航：胶囊 */
#view-shop .shop-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
#view-shop .snav-btn {
  border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink2); padding: 8px 18px; font-size: 13px; letter-spacing: .04em;
  transition: color .4s, border-color .4s, background .4s;
}
#view-shop .snav-btn.active { color: var(--ink); border-color: var(--brand); background: var(--brand-soft); }

/* 商品卡：衬线名 + 衬线价格 */
#view-shop .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
#view-shop .shop-card {
  border-radius: var(--r-card); background: var(--card); border: 1px solid var(--card-line);
  box-shadow: var(--shadow); transition: transform .8s var(--ease-out), box-shadow .8s;
}
#view-shop .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
#view-shop .shop-card-title { font-family: var(--font-disp); font-weight: 500; font-size: 18px; color: var(--ink); }
#view-shop .shop-card-desc { font-size: 12px; color: var(--ink2); }
#view-shop .shop-card-action .btn, #view-shop .shop-card-action button { border-radius: 999px; }
#view-shop .shop-card-badge { border-radius: 999px; letter-spacing: .08em; }

/* 横幅（活动 / 排行榜）：细线卡 */
#view-shop .shop-banner { border-radius: var(--r-item); }

/* ============================================================
   设置：双栏分组 + 衬线分组标题 + 干净表单
   ============================================================ */
#view-settings.view.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
#view-settings::before { grid-column: 1 / -1; }
#view-settings > .card { margin: 0; }
#view-settings > .card:has(#styleGrid) { grid-column: 1 / -1; }
#view-settings .card { padding: 24px 26px; }
#view-settings .card h3 {
  font-family: var(--font-disp); font-weight: 500; font-size: 22px; letter-spacing: -.01em;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 6px;
}
#view-settings .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#view-settings .field > span { font-size: 13px; color: var(--ink2); letter-spacing: .04em; }
#view-settings .field input, #view-settings .field select {
  height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); padding: 0 16px; font-family: inherit; font-size: 15px;
  transition: border-color .3s, box-shadow .3s;
}
#view-settings .field input:focus, #view-settings .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
#view-settings .card .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#view-settings .hint { font-size: 12.5px; color: var(--ink2); line-height: 1.75; }

/* 风格网格：预览小样卡 */
#view-settings .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#view-settings .style-opt {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  background: var(--card-solid); text-align: left; transition: .3s;
}
#view-settings .style-opt:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
#view-settings .style-opt[aria-checked="true"], #view-settings .style-opt.on {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
#view-settings .style-opt .so-n { font-size: 14px; color: var(--ink); font-weight: 600; }
#view-settings .style-opt .so-d { font-size: 11.5px; color: var(--ink2); line-height: 1.4; }

/* 危险操作区：红色描边 */
#view-settings > .card:has(#btnResetWords) { border-color: var(--red-soft); }

/* ---------------- 手机端 ---------------- */
@media (max-width: 899px) {
  #view-settings.view.active { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  #view-read::before, #view-dict::before, #view-settings::before, #view-shop::before, #view-search::before { font-size: 32px; }
  #view-read .gen-top { padding: 24px 22px; }
  #view-read .read-list { grid-template-columns: 1fr; }
  #view-shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #view-shop .sub-points { font-size: 46px; }
  #view-dict .dict-count { padding: 22px 24px; }
}

/* ---------------- 减少动态 ---------------- */
@media (prefers-reduced-motion: reduce) {
  #view-read.view.active, #view-dict.view.active, #view-search.view.active,
  #view-settings.view.active, #view-shop.view.active { animation: none; }
  #view-read .art-item, #view-shop .shop-card { transition: none; }
}