/* =====================================================================
 * 55 · 猫抓板对照 —— 独立视觉：材质样本册 / 尺码标尺
 * 骨架：纹理样卡 / 姿势三选 / SVG 标尺 / 更替周期柱
 * 配色：瓦楞纸棕 + 纸黄；纹理全部用 CSS 渐变绘制，零图片请求
 * ===================================================================== */
.cs-page {
    --cs-clay: #9d6035;
    --cs-clay-deep: #75421f;
    --cs-clay-soft: #f7ecdf;
    --cs-clay-line: #e2c8ac;
    --cs-cream: #fffaf2;
    --cs-paper: #ffffff;
    --cs-paper-2: #faf5ee;
    --cs-ink: #38291b;
    --cs-ink-2: #6d5945;
    --cs-ink-3: #a08c77;
    --cs-line: #ece0d1;
    --cs-sisal: #b39452;
    --cs-green: #5d7d4f;
    --cs-green-soft: #eef5e9;
    --cs-red: #a84836;
    --cs-red-soft: #fbece7;
    --cs-tex-a: #d9b98d;
    --cs-tex-b: #b78a58;
    background: var(--hg6-c-bg);
}
:root[data-theme="dark"] .cs-page {
    --cs-clay: #dda878;
    --cs-clay-deep: #eec39c;
    --cs-clay-soft: #31241a;
    --cs-clay-line: #5a402b;
    --cs-cream: var(--hg6-paper-2);
    --cs-paper: var(--hg6-paper);
    --cs-paper-2: var(--hg6-paper-2);
    --cs-ink: var(--hg6-ink);
    --cs-ink-2: var(--hg6-ink-2);
    --cs-ink-3: var(--hg6-ink-3);
    --cs-line: var(--hg6-line);
    --cs-sisal: #d0b475;
    --cs-green: #8fbb80;
    --cs-green-soft: #1d2a1a;
    --cs-red: #ee9c8a;
    --cs-red-soft: #33211c;
    --cs-tex-a: #6b5238;
    --cs-tex-b: #8a6843;
}
.cs-page h1, .cs-page h2, .cs-page h3 { font-family: var(--hg6-font); letter-spacing: var(--hg6-tracking); color: var(--cs-ink); }
.cs-page p { font-size: var(--hg6-fz-body); line-height: var(--hg6-lh); color: var(--cs-ink-2); }
.cs-page b { color: var(--cs-ink); }
.cs-page small { font-size: var(--hg6-fz-xs); color: var(--cs-ink-3); font-weight: 400; }
.cs-page code { font: 500 12.5px/1.6 var(--hg6-num); background: var(--cs-clay-soft); color: var(--cs-clay-deep); padding: 1px 5px; border-radius: 4px; }
.cs-inner { padding-top: 22px; }

/* ---------- 首屏：样本册抬头 ---------- */
.cs-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 32px;
    background: var(--cs-cream); border: 1px solid var(--cs-line);
    border-bottom: 5px solid var(--cs-clay); border-radius: var(--hg6-r-l);
    padding: 34px 34px 30px; box-shadow: var(--hg6-sh-2);
}
.cs-kicker { font: 600 11px/1.4 var(--hg6-num); letter-spacing: .16em; color: var(--cs-clay-deep); text-transform: uppercase; }
.cs-hero h1 { font-size: var(--hg6-fz-h1); font-weight: 780; line-height: 1.28; margin: 14px 0 15px; }
.cs-lead { font-size: var(--hg6-fz-lead) !important; line-height: 1.9 !important; max-width: 62ch; margin: 0 0 20px; }
.cs-lead b { border-bottom: 3px solid var(--cs-clay-line); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-tags span { font-size: var(--hg6-fz-sm); padding: 6px 13px; border-radius: 6px; background: var(--cs-paper); border: 1px solid var(--cs-clay-line); color: var(--cs-ink-2); }
.cs-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: center; }
.cs-sw { border: 1px solid var(--cs-line); border-radius: 10px; overflow: hidden; background: var(--cs-paper); }
.cs-sw i { display: block; height: 46px; }
.cs-sw span { display: block; font-size: var(--hg6-fz-xs); color: var(--cs-ink-2); text-align: center; padding: 5px 4px 6px; }
/* 四种材质纹理：纯 CSS，无图片、无需懒加载 */
.cs-tex { display: block; border-radius: 4px; }
.cs-tex--corr { background: repeating-linear-gradient(90deg, var(--cs-tex-a) 0 3px, var(--cs-cream) 3px 5px, var(--cs-tex-b) 5px 7px, var(--cs-cream) 7px 9px); }
.cs-tex--sisal { background: repeating-linear-gradient(45deg, var(--cs-tex-a) 0 2px, var(--cs-tex-b) 2px 4px, var(--cs-cream) 4px 6px); }
.cs-tex--wood { background: repeating-linear-gradient(0deg, var(--cs-tex-a) 0 5px, var(--cs-tex-b) 5px 7px, var(--cs-tex-a) 7px 12px); }
.cs-tex--combo { background: repeating-linear-gradient(135deg, var(--cs-tex-a) 0 4px, var(--cs-cream) 4px 7px, var(--cs-tex-b) 7px 9px); }

/* ---------- 首屏操作入口 ---------- */
.cs-quick { margin-top: 16px; padding: 24px 30px 26px; border: 1px solid var(--cs-line); border-radius: var(--hg6-r-l); background: var(--cs-paper); box-shadow: var(--hg6-sh-1); }
.cs-quick-hd, .cs-panel-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.cs-quick-hd h2, .cs-panel-hd h2 { font-size: var(--hg6-fz-h2); font-weight: 720; margin: 0; }
.cs-quick-hd small, .cs-panel-hd small { margin-left: auto; }
.cs-quick-hd h2 span, .cs-panel-hd > span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; margin-right: 4px; border-radius: 7px; background: var(--cs-clay-soft); color: var(--cs-clay-deep); font: 700 11px/1 var(--hg6-num); }
.cs-quick-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: end; }
.cs-field > span { display: block; font-size: var(--hg6-fz-sm); font-weight: 600; color: var(--cs-ink-2); margin-bottom: 6px; }
.cs-field input, .cs-field select, .cs-page textarea { width: 100%; font: 500 14px/1.5 var(--hg6-font); color: var(--cs-ink); background: var(--cs-paper-2); border: 1px solid var(--cs-line); border-radius: 9px; padding: 9px 10px; outline: none; }
.cs-field--big input { font: 700 22px/1.4 var(--hg6-num); padding: 8px 12px; }
.cs-field input:focus, .cs-field select:focus, .cs-page textarea:focus { border-color: var(--cs-clay); box-shadow: 0 0 0 3px var(--cs-clay-soft); }
.cs-postures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cs-postures button { cursor: pointer; text-align: left; padding: 12px 13px; border: 1px solid var(--cs-line); border-radius: var(--hg6-r-m); background: var(--cs-paper-2); color: var(--cs-ink-2); font-family: var(--hg6-font); transition: all .18s ease; }
.cs-postures button:hover { border-color: var(--cs-clay-line); }
.cs-postures button b { display: block; font-size: 14px; }
.cs-postures button small { display: block; margin-top: 2px; }
.cs-postures button.is-on { background: var(--cs-clay-soft); border-color: var(--cs-clay); }
.cs-postures button.is-on b { color: var(--cs-clay-deep); }
.cs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--cs-line); }
.cs-btn { font: 600 14px/1.4 var(--hg6-font); cursor: pointer; padding: 10px 20px; border: 1px solid var(--cs-clay-line); border-radius: 9px; background: var(--cs-paper); color: var(--cs-clay-deep); transition: all .18s ease; }
.cs-btn:hover { background: var(--cs-clay-soft); border-color: var(--cs-clay); }
.cs-btn--main { background: var(--cs-clay); border-color: var(--cs-clay); color: #fff; box-shadow: 0 6px 16px rgba(157, 96, 53, .22); }
.cs-btn--main:hover { background: var(--cs-clay-deep); color: #fff; }
.cs-btn--quiet { border-color: var(--cs-line); color: var(--cs-ink-2); }
.cs-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.cs-demo span { font-size: var(--hg6-fz-xs); color: var(--cs-ink-3); }
.cs-demo button { font: 500 12px/1.3 var(--hg6-font); padding: 5px 10px; cursor: pointer; border: 1px dashed var(--cs-clay-line); border-radius: 999px; background: transparent; color: var(--cs-ink-2); }
.cs-demo button:hover { background: var(--cs-clay-soft); }
.cs-err { margin-top: 11px; font-size: var(--hg6-fz-sm); color: var(--cs-red); }
.cs-err:not(:empty) { background: var(--cs-red-soft); border-left: 3px solid var(--cs-red); padding: 9px 12px; border-radius: 0 8px 8px 0; }

/* ---------- 三栏主体 ---------- */
.cs-body { display: grid; grid-template-columns: 1.05fr 1fr .85fr; gap: var(--hg6-gap); margin-top: var(--hg6-gap); align-items: start; }
.cs-panel { min-width: 0; border: 1px solid var(--cs-line); border-radius: var(--hg6-r-l); background: var(--cs-paper); padding: 22px 22px 24px; box-shadow: var(--hg6-sh-1); }
.cs-panel-hd { padding-bottom: 13px; border-bottom: 1px solid var(--cs-line); }
.cs-panel-hd h2 { font-size: 17px; }
.cs-sample-list { display: grid; gap: 8px; }
.cs-sample { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left; padding: 9px 11px; border: 1px solid var(--cs-line); border-radius: var(--hg6-r-m); background: var(--cs-paper-2); font-family: var(--hg6-font); transition: all .18s ease; }
.cs-sample:hover { border-color: var(--cs-clay-line); }
.cs-sample.is-on { border-color: var(--cs-clay); background: var(--cs-clay-soft); }
.cs-sample i { flex: none; width: 52px; height: 40px; border-radius: 6px; border: 1px solid var(--cs-line); }
.cs-sample b { display: block; font-size: 14px; color: var(--cs-ink); }
.cs-sample small { display: block; margin-top: 2px; }
.cs-sample-detail { margin-top: 15px; padding: 14px 15px; border-radius: var(--hg6-r-m); background: var(--cs-cream); border: 1px dashed var(--cs-clay-line); }
.cs-sample-detail h3 { font-size: 15px; margin-bottom: 9px; }
.cs-sample-detail dl { margin: 0; display: grid; gap: 6px; }
.cs-sample-detail dl div { display: flex; gap: 10px; font-size: var(--hg6-fz-sm); }
.cs-sample-detail dt { flex: none; width: 52px; font-weight: 700; color: var(--cs-clay-deep); }
.cs-sample-detail dd { margin: 0; color: var(--cs-ink-2); }

.cs-ruler-svg { width: 100%; height: auto; }
.cs-ruler-board { fill: var(--cs-clay-soft); stroke: var(--cs-clay-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cs-ruler-ticks path { stroke: var(--cs-clay); stroke-width: 2; fill: none; }
.cs-ruler-dim { stroke: var(--cs-clay); stroke-width: 1.5; }
.cs-ruler-val { fill: var(--cs-clay-deep); font: 700 24px var(--hg6-num); }
.cs-ruler-cap { fill: var(--cs-ink-3); font: 500 11px var(--hg6-font); }
.cs-measures { margin: 12px 0 0; display: grid; gap: 0; }
.cs-measures div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--cs-line); }
.cs-measures dt { font-size: var(--hg6-fz-sm); color: var(--cs-ink-2); }
.cs-measures dd { margin: 0; font: 700 14px/1.4 var(--hg6-num); color: var(--cs-ink); text-align: right; }

.cs-cycle-num { display: flex; align-items: baseline; gap: 8px; }
.cs-cycle-num b { font: 700 40px/1.2 var(--hg6-num); color: var(--cs-clay-deep); }
.cs-cycle-num span { font-size: var(--hg6-fz-sm); color: var(--cs-ink-3); }
.cs-cycle-bar { height: 10px; margin-top: 10px; border-radius: 999px; background: var(--cs-paper-2); border: 1px solid var(--cs-line); overflow: hidden; }
.cs-cycle-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cs-green), var(--cs-clay)); transition: width .4s ease; }
.cs-cycle-note { margin: 10px 0 0; font-size: var(--hg6-fz-sm); }
.cs-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--cs-line); }
.cs-signals { margin-top: 16px; }
.cs-signals h3 { font-size: 15px; margin-bottom: 8px; }
.cs-signals ul { margin: 0; padding-left: 18px; }
.cs-signals li { font-size: var(--hg6-fz-sm); line-height: 1.85; color: var(--cs-ink-2); }
.cs-warns { margin-top: 14px; display: grid; gap: 7px; }
.cs-warn { font-size: var(--hg6-fz-sm); line-height: 1.7; padding: 8px 11px; border-radius: 8px; background: var(--cs-clay-soft); color: var(--cs-clay-deep); border-left: 3px solid var(--cs-clay); }
.cs-warn--bad { background: var(--cs-red-soft); color: var(--cs-red); border-left-color: var(--cs-red); }

/* ---------- 批量 / 阅读 / 脚注 ---------- */
.cs-batch, .cs-read { margin-top: var(--hg6-gap); }
.cs-tip { margin-bottom: 12px; }
.cs-page textarea { resize: vertical; line-height: 1.75; font-family: var(--hg6-num); font-size: 13px; }
.cs-batch-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0 15px; }
.cs-table-wrap { overflow-x: auto; border: 1px solid var(--cs-line); border-radius: var(--hg6-r-m); }
.cs-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--hg6-fz-sm); min-width: 680px; }
.cs-table-wrap th { background: var(--cs-clay-soft); color: var(--cs-clay-deep); font-weight: 700; text-align: left; }
.cs-table-wrap th, .cs-table-wrap td { padding: 9px 11px; border-bottom: 1px solid var(--cs-line); white-space: nowrap; }
.cs-table-wrap td { color: var(--cs-ink-2); }
.cs-table-wrap tr:last-child td { border-bottom: none; }
.cs-empty { color: var(--cs-ink-3); text-align: center; padding: 18px; margin: 0; }
.cs-read { padding: 0 2px; }
.cs-read-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cs-read-hd h2 { font-size: var(--hg6-fz-h2); }
.cs-read-hd span { font-size: var(--hg6-fz-xs); color: var(--cs-ink-3); }
.cs-read-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-read-grid p { margin: 0; padding: 17px 19px; border-radius: var(--hg6-r-m); background: var(--cs-paper); border: 1px solid var(--cs-line); border-top: 3px solid var(--cs-clay-line); }
.cs-read-grid p b { border-bottom: 2px solid var(--cs-clay-line); }
.cs-foot { margin: 22px 2px 0; font-size: var(--hg6-fz-sm) !important; line-height: 1.85; color: var(--cs-ink-3) !important; }

@media (max-width: 1000px) {
    .cs-body { grid-template-columns: 1fr 1fr; }
    .cs-lifecycle { grid-column: 1 / -1; }
    .cs-hero { grid-template-columns: 1fr; }
    .cs-swatches { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
    .cs-hero, .cs-quick { padding: 22px 18px; border-radius: var(--hg6-r-m); }
    .cs-quick-row, .cs-body, .cs-read-grid { grid-template-columns: 1fr; }
    .cs-postures { grid-template-columns: 1fr; }
    .cs-panel { padding: 18px 16px 20px; }
    .cs-swatches { grid-template-columns: 1fr 1fr; }
    .cs-demo { margin-left: 0; width: 100%; }
}