@charset "utf-8";
/* ============================================================
   儿童涂色页 - 页面样式
   仅在 /tools/coloring 及其分类页使用
   色板与圆角沿用 /tools/print/paper 的视觉语言，保持整族工具一致
   改配色只需要动下面 :root 里的变量
   ============================================================ */

:root{
  --violet:#6d4bd1;
  --violet-d:#5b3fb4;
  --violet-l:#8b65e8;
  --violet-bg:#eee9ff;
  --ink:#1e293b;
  --muted:#64748b;
  --bg:#f4f5f9;
  --line:#e7e8ef;
  --print:#0f766e;
}

.c-wrap,.c-wrap *{box-sizing:border-box}

.c-wrap{
  max-width:1200px;
  margin:24px auto 40px;
  padding:0 18px;
  font-family:Arial,"Microsoft YaHei",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.c-wrap a{color:var(--violet)}

/* 顶部导航当前项高亮（只作用于本栏目，不改 top.css） */
.top-nav a.cur,.side-menu-inner a.cur{color:var(--violet);font-weight:700}

/* ---------- 面包屑 ---------- */
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--violet);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb em{font-style:normal;color:#b9bfcc;margin:0 6px}
.crumb .cur{color:#475569}

/* ---------- 首屏渐变区 ---------- */
.hero{
  background:linear-gradient(125deg,#5b3fb4,#8b65e8);
  color:#fff;
  padding:26px 30px 28px;
  border-radius:18px;
  margin-bottom:18px;
  box-shadow:0 14px 35px #5b3fb42e;
}
.hero h1{margin:0 0 10px;font-size:30px;line-height:1.32;font-weight:700}
.hero p{margin:0;font-size:15px;line-height:1.75;opacity:.92;max-width:860px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:99px;
  background:#ffffff26;
  border:1px solid #ffffff33;
}

/* ---------- 通用白卡 ---------- */
.card-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 5px 18px #231e3c0f;
  padding:22px 24px;
  margin-bottom:18px;
}
.card-box > h2{margin:0 0 14px;font-size:19px;font-weight:700;display:flex;align-items:center;gap:9px}
.card-box > h2::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--violet-l)}

/* 带"更多"链接的小节标题 */
.box-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.box-head h2{margin:0;font-size:19px;font-weight:700;display:flex;align-items:center;gap:9px}
.box-head h2::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--violet-l);flex:0 0 auto}
.box-head h2 .num{font-size:13px;font-weight:400;color:#94a3b8}
/* 全站时间一律只显示到"日"，不显示时分秒（2026-10 约定） */
.box-head h2 .num.dt{font-size:12.5px;color:#b0b7c3}
.box-head .more{font-size:13px;color:var(--violet);text-decoration:none;white-space:nowrap}
.box-head .more:hover{text-decoration:underline}

/* ---------- 正文段落 ---------- */
.lead{font-size:15px;line-height:1.95;color:#334155;margin:0;max-width:920px}
.lead strong,.lead b{color:var(--violet-d);font-weight:700}

/* 适用人群标签 */
.audience{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.audience b{font-weight:400;white-space:nowrap;color:#94a3b8}
.audience span{padding:4px 11px;border-radius:99px;background:var(--violet-bg);color:var(--violet-d);font-size:12px;white-space:nowrap}

/* ---------- 分类卡片（总页） ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 18px 18px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 5px 18px #231e3c0f;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.cat:hover{border-color:#cfc2f5;box-shadow:0 10px 26px #5b3fb41f;transform:translateY(-2px)}
.cat .ico{
  width:56px;height:56px;
  border-radius:14px;
  background:var(--violet-bg);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.cat .ico svg{width:38px;height:38px}
.cat h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
/* 卡片文案统一截到 2 行，保证 12 个分类排下来高度一致；
   description 本身是给搜索引擎看的长句，不适合在卡片上全展开 */
.cat .desc{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  min-height:44px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cat .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#94a3b8}
.cat .go{color:var(--violet);font-weight:700}

/* 首页超出的分类先收起，点"展开全部"再显示 */
.cat-extra{display:none}
.cats.expanded .cat-extra{display:block}

/* 展开入口：单独占一行文字，不占网格位置，保证 8 张卡排成整两行 */
.cats-more{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  margin:-4px 0 18px;
  font-size:13px;color:var(--muted);
}
.cats-more button{
  border:1px solid #d6cdf2;
  background:#fbfbfe;
  color:var(--violet-d);
  border-radius:99px;
  padding:7px 16px;
  font-family:inherit;font-size:13px;
  cursor:pointer;
}
.cats-more button:hover{background:var(--violet-bg);border-color:var(--violet-l)}

/* ---------- 使用步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0}
.steps li{background:#fbfbfe;border:1px solid #eceaf7;border-radius:14px;padding:18px 18px 16px}
.steps .n{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--violet);color:#fff;
  font-size:13px;font-weight:700;
  margin-bottom:10px;
}
.steps h4{margin:0 0 6px;font-size:15px;font-weight:700}
.steps p{margin:0;font-size:13px;line-height:1.75;color:#526076}

/* ---------- 使用提示 ---------- */
.tips{list-style:none;margin:0;padding:0}
.tips li{position:relative;padding:0 0 0 22px;margin-bottom:12px;font-size:14px;line-height:1.85;color:#334155}
.tips li:last-child{margin-bottom:0}
.tips li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--violet-l)}
.tips b,.tips strong{color:var(--ink)}

/* ---------- 图库工具条 ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.toolbar .info{font-size:13px;color:var(--muted)}
.toolbar .info b{color:var(--ink)}
.views{display:flex;gap:8px}
.views button{border:1px solid #d9dbea;background:#fff;color:#475569;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer}
.views button.on{background:var(--violet-bg);border-color:var(--violet-l);color:var(--violet-d);font-weight:700}

/* ---------- 图库网格 ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery.compact{grid-template-columns:repeat(5,1fr);gap:12px}
/* 首页"最近更新"：6 列，一行放得多，滚动压力小 */
.gallery.h6{grid-template-columns:repeat(6,1fr);gap:14px}

.art-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  box-shadow:0 5px 18px #231e3c0f;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.art-card:hover{border-color:#cfc2f5;box-shadow:0 10px 26px #5b3fb41f}

.art{
  aspect-ratio:1/1;
  background:#fff;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* 详情页上线后，图库里的画布本身就是链接，去掉下划线并加个悬停反馈 */
a.art{text-decoration:none;cursor:pointer;transition:background .15s ease}
a.art:hover{background:#fbfaff}
/* 数据库里直接存整段 SVG，这里内联输出。
   width/height 用 !important 是为了压掉 SVG 自带的固定尺寸属性，
   让它按格子大小自适应；preserveAspectRatio 保持默认值即可不变形。 */
.art svg{width:100%!important;height:100%!important;display:block;max-width:100%}

.art-card .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.art-card .cap span,.art-card .cap .t{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-card .cap .t{text-decoration:none}
.art-card .cap .t:hover{color:var(--violet);text-decoration:underline}

.btn-print{
  flex:0 0 auto;
  border:0;border-radius:8px;
  background:#e8f4f1;color:var(--print);
  font-size:12px;font-weight:700;
  padding:6px 11px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.btn-print:hover{background:var(--print);color:#fff}

/* ---------- 空态 ---------- */
.empty{
  text-align:center;
  padding:56px 20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
  background:#fbfbfe;
  border:1px dashed #dcd7f0;
  border-radius:14px;
}
.empty b{display:block;font-size:16px;color:#475569;margin-bottom:6px}

/* ---------- 分页 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:13px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0 11px;
  border:1px solid #dfe3ec;border-radius:9px;
  background:#fff;color:#475569;text-decoration:none;
}
.pager a:hover{border-color:var(--violet-l);color:var(--violet-d)}
.pager .on{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:700}
.pager .off{color:#b9bfcc;background:#f7f8fb}

/* ---------- FAQ ---------- */
.faq{margin:0}
.faq details{border-bottom:1px solid #f0f1f6;padding:2px 0}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;
  padding:13px 26px 13px 0;
  font-size:14px;font-weight:700;color:#243044;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:11px;font-size:17px;font-weight:400;color:var(--violet-l)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 14px;font-size:13.5px;line-height:1.9;color:#526076}

/* ---------- 相关分类 / 相关工具 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid #e2e4ee;
  border-radius:99px;
  background:#fbfbfe;
  color:#475569;
  font-size:13px;
  text-decoration:none;
}
/* 图标跟着文字颜色走，hover 时一起变紫；尺寸固定 18px，不影响行高。
   stroke-width 在 48 的画布上按比例会被缩小，这里调粗，否则小尺寸下发虚。 */
.chips a svg{
  width:18px;height:18px;flex:0 0 auto;
  stroke:var(--violet);
  stroke-width:4.6;
}
.chips a svg [fill="#6d4bd1"]{fill:var(--violet)}
.chips a:hover{border-color:var(--violet-l);color:var(--violet-d);background:var(--violet-bg)}

/* ---------- 底部说明 ---------- */
.foot-note{color:#64748b;font-size:13px;line-height:1.9;margin:22px 2px 0}
.foot-note a{color:var(--violet)}

/* ---------- 单张详情页 ---------- */
/* 左图右信息，图占大半，打印时只留图 */
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start}

/* 图不跟着左栏无限放大：1200 容器下左栏约 740，方图会高到要滚屏，
   限 620 并居中，右侧信息栏也不会被推得太远 */
.pd-art{
  aspect-ratio:1/1;
  width:100%;
  max-width:620px;
  margin:0 auto;
  background:#fff;
  border:1px solid #eceef6;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  overflow:hidden;
}
.pd-art svg{width:100%!important;height:100%!important;display:block;max-width:100%}

.pd-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.btn-print-lg{padding:11px 26px;font-size:14px;border-radius:10px}
.pd-back{font-size:13px;color:var(--muted);text-decoration:none}
.pd-back:hover{color:var(--violet);text-decoration:underline}

.pd-side h1{margin:0 0 12px;font-size:25px;line-height:1.36;font-weight:700}
.pd-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.pd-badge{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--violet-bg);color:var(--violet-d)}
.pd-lead{margin:0 0 14px;font-size:14px;line-height:1.8;color:#475569}

/* 规格表：用 dl 而不是 table，窄屏不用横向滚动 */
.pd-specs{margin:0 0 14px;border-top:1px solid var(--line)}
.pd-specs>div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.pd-specs dt{flex:0 0 46px;color:#94a3b8}
.pd-specs dd{margin:0;color:#475569;line-height:1.7}

.pd-tip-sm{
  margin:0 0 14px;
  font-size:12.5px;line-height:1.75;color:#64748b;
  background:#fbfbfe;border:1px dashed #dcd7f0;border-radius:10px;
  padding:10px 12px;
}

.pd-nav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.pd-nav a{color:var(--violet);text-decoration:none}
.pd-nav a:hover{text-decoration:underline}
.pd-nav .off{color:#b9bfcc}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery.compact{grid-template-columns:repeat(4,1fr)}
  .gallery.h6{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:1fr;gap:12px}
  /* 详情页窄屏改单列：图在上、信息在下 */
  .pd-grid{grid-template-columns:1fr;gap:18px}
  .pd-side h1{font-size:22px}
}
@media(max-width:720px){
  .c-wrap{padding:0 12px;margin-top:16px}
  .hero{padding:20px 18px 22px;border-radius:14px}
  .hero h1{font-size:22px}
  .hero p{font-size:14px}
  .card-box{padding:18px 16px;border-radius:14px}
  .box-head h2{font-size:17px}
  .cats{grid-template-columns:1fr;gap:12px}
  .cat .desc{min-height:0}
  .gallery,.gallery.compact,.gallery.h6{grid-template-columns:repeat(2,1fr);gap:10px}
  .art-card{padding:7px}
  .btn-print{font-size:11px;padding:5px 8px}
  .views{display:none}
  .badges{gap:6px}
  .badge{font-size:11px;padding:3px 8px}
  .audience{gap:6px}
  .audience span{font-size:11px;padding:3px 9px}
  /* 详情页：打印按钮占满一行，比挤在右边好按 */
  .pd-art{padding:8px;border-radius:12px}
  .pd-bar{gap:10px}
  .btn-print-lg{width:100%;padding:12px 0;text-align:center}
  .pd-specs dt{flex:0 0 40px}
}

/* ---------- 打印：只输出被点选的那一张，按 A4 满页 ---------- */
@page{size:A4 portrait;margin:8mm}
@media print{
  body{background:#fff}
  .site-header,.crumb,.hero,.card-box,.box-head,.toolbar,.pager,.foot-note,.footer,.chips{display:none!important}
  /* 图库外层白卡要保留，否则里面的图片跟着父级一起被隐藏，打出来是空白页 */
  .card-box.box-gallery{
    display:block!important;
    border:0;border-radius:0;box-shadow:none;
    padding:0;margin:0;background:none;
  }
  .c-wrap{max-width:none;margin:0;padding:0}
  .gallery{display:block}
  body.printing .art-card{display:none!important}
  body.printing .art-card.active{
    display:block!important;
    border:0;padding:0;box-shadow:none;
    break-after:auto;page-break-after:auto;
  }
  body.printing .art-card.active .cap{display:none}
  body.printing .art-card.active .art{height:268mm;aspect-ratio:auto}
  body.printing .art-card.active .art svg{width:100%!important;height:100%!important}

  /* 详情页：整页只输出大图。上面的 .card-box{display:none} 会把
     蓝色信息栏、正文、FAQ 全隐藏掉，这里单独把这一个白卡放出来 */
  .card-box.box-detail{
    display:block!important;
    border:0;border-radius:0;box-shadow:none;
    padding:0;margin:0;background:none;
  }
  .pd-grid{display:block}
  .pd-side,.pd-bar{display:none!important}
  .pd-art{
    width:100%;max-width:none;height:268mm;
    aspect-ratio:auto;
    border:0;border-radius:0;padding:0;background:none;
  }
  .pd-art svg{width:100%!important;height:100%!important}
}