/* ============================================================
   Candy Theme — base.css（基础类单一控制点 · P1 基础类去重）
   ------------------------------------------------------------
   本文件是以下「全局基础类」的唯一定义来源，加载序第 2 位
   （紧接 tokens.css 之后，先于 theme.css / components.css /
   design-system.css 等全局文件）。

   收敛自三处全局文件：
   - .container / data-width 宽度系统         ← theme.css
   - .card（组件卡） + 画廊卡部件(.card-cover/.card-title/.card-cat)
                                          ← theme.css + design-system.css
   - .btn 全系(.btn/.btn-primary/.btn-ghost/.btn-secondary/
     .btn-danger/.btn-sm/.btn-lg)          ← design-system.css + components.css
   - .badge 全系                            ← design-system.css
   - .pagination 全系 + .pager-jump         ← components.css
   - .tag-chip(+hover) / .info-box          ← components.css

   说明：
   - 当前渲染以「加载序在后、且实际生效」的版本为准：
     .btn-primary/.btn-ghost 取 components.css 的胶囊金样式（#12 覆盖 #2），
     其余取 design-system.css 版本；合并后二者同处本文件，零视觉变化。
   - 页面级文件（article/album/list/search/album-home/vip 等）通过
     $extra_css 仅在其自身页面加载，其中的 .tag-chip/.info-box/.pagination
     等为「页面级有意覆盖」，不属于全局重复，保留不动（避免回归）。
   - 裸色字面量（white 等）将在 P5 禁六裸色清零阶段令牌化，本阶段保持原值。
   ============================================================ */

/* ---------- 容器 + data-width 宽度系统（原 theme.css） ---------- */
.container{max-width:var(--w);margin:0 auto;padding:0px}

/* 容器跟随 data-width 宽度设置 — 统一在 body 设 --w
   4 档值与后台「页面管理→页面宽度」完全一致：768/1100/1440/100%
   .container / .page-layout-wrapper / .head-inner / .filter-topbar 全部继承 */
body[data-width="narrow"]{--w: 768px}
body[data-width="standard"]{--w: 1100px}
body[data-width="wide"]{--w: 1440px}
body[data-width="full"]{--w: 100%; max-width: 100%}

/* 消费端统一引用 body 传递的 --w */
.container,
.page-head .wrap,
.filter-topbar,
.page-encyclopedia-detail .page-head .head-inner{max-width:var(--w);margin:0 auto}

/* ---------- 卡片：组件卡（原 design-system.css） ---------- */
.card{background:var(--surface,white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line);overflow:hidden;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s ease,border-color 0.25s ease}
.card:hover{box-shadow:var(--shadow-hover,0 8px 30px rgba(28,27,25,.1));transform:translateY(-4px);border-color:var(--gold)}
.card-header{padding:var(--spacing-md);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card-body{padding:var(--spacing-md)}
.card-footer{padding:var(--spacing-md);border-top:1px solid var(--line);background:var(--bg-soft)}

/* 卡片：画廊卡部件（原 theme.css，配合 .card 使用） */
.card-cover img{width:100%;height:150px;object-fit:cover;display:block}
.card-title{font-size:15px;margin:0 0 6px}
.card-cat{font-size:12px;color:var(--c-primary);background:var(--gold-soft);padding:1px 8px;border-radius:4px}

/* ---------- 按钮全系 ---------- */
/* 基础（原 design-system.css） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-radius,var(--radius-md));font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);outline:none}
.btn:focus-visible{box-shadow:0 0 0 3px var(--primary-bg)}
/* 主按钮 / 幽灵按钮（原 components.css，胶囊金样式，实际生效版） */
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:999px;background:var(--gold);color:var(--hx-fff);border:none;font-size:14px;font-family:var(--sans);cursor:pointer;transition:.2s}
.btn-primary:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:13px;font-family:var(--sans);cursor:pointer;transition:.2s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* 次按钮 / 危险按钮（原 design-system.css） */
.btn-secondary{background:var(--bg-soft);color:var(--ink)}
.btn-secondary:hover{background:var(--bg-deeper)}
.btn-danger{background:var(--danger);color:white}
.btn-danger:hover{background:var(--hx-dc2626)}
/* 尺寸（.btn-sm 取 components.css 实际生效版，.btn-lg 取 design-system.css） */
.btn-sm{padding:5px 12px;font-size:12px}
.btn-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:16px}

/* ---------- 徽标全系（原 design-system.css） ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:2px 8px;border-radius:var(--radius-full);font-size:12px;font-weight:600}
.badge-primary{background:var(--primary-bg);color:var(--primary)}
.badge-success{background:var(--hx-d1fae5);color:var(--success)}
.badge-warning{background:var(--hx-fef3c7);color:var(--warning)}
.badge-danger{background:var(--hx-fee2e2);color:var(--danger)}

/* ---------- 分页全系 + 跳转（原 components.css） ---------- */
.pagination{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:6px}
.pagination a,.pagination .pager-arrow,.pagination .pager-dots{min-width:38px;height:38px;display:grid;place-items:center;border-radius:999px;font-size:13px;border:1px solid var(--line);color:var(--muted);transition:.2s}
.pagination a:hover,.pagination .pager-arrow:hover{border-color:var(--gold);color:var(--ink)}
.pagination a.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pagination .pager-arrow.disabled,.pagination .pager-dots{opacity:.45}
.pager-jump{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.pager-jump input{width:52px;height:38px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:13px;outline:none;padding:0 4px;position:relative;z-index:1;pointer-events:auto;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:textfield}
.pager-jump input::-webkit-outer-spin-button,.pager-jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;display:none}
.pager-jump input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

/* ---------- 标签 / 信息框（原 components.css） ---------- */
.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;background:var(--bg-soft);color:var(--muted);border:1px solid var(--line);transition:.2s}
.tag-chip:hover{border-color:var(--gold);color:var(--gold)}
.info-box{background:var(--bg-soft);border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:14px 18px;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- 跨页共享工具类（P2 页面镜像去重：原 encyclopedia.css / library.css 镜像定义，已合并此处） ---------- */
.filter-item{display:flex;align-items:center;gap:var(--spacing-xs)}
.reference-list{list-style:none}