/* ============================================================
   色卡列表 / 灯箱样式  v1.5.0
   容器 .cc-page ｜ 分类胶囊 .cc-tab(<button>) ｜ 分组标题 .cc-catbar
   缩略图 .cc-cell/.cc-thumb ｜ 蓝色标题条 .cc-tag ｜ 灯箱 #lb
   ------------------------------------------------------------
   本次更新：
   · 分类按钮 / 查看全部 / 返回 全部改为 <button>，补全按钮复位样式
     （主题 AeroCoreFree 的 nprogress 只拦截 <a>，所以 <button> 点击
      不会触发整页重载 / 顶部进度条）
   · 灯箱重写：点缩略图→全屏看大图；点图片→1:1 实际大小（可拖动、
     可超出屏幕）；再点→回全屏。底部仅两个按钮（全屏/1:1 切换 +
     下载原图），色卡信息以小字显示在最底部。无左右切换箭头。
   ============================================================ */

/* ---------- 0. 隐藏主题输出的页面标题（列表里已有分类标题） ---------- */
.cc-hide-page-title{display:none !important;}
body.cc-colorcard-page .page-header,
body.cc-colorcard-page .page-title,
body.cc-colorcard-page .entry-header,
body.cc-colorcard-page .entry-title,
body.cc-colorcard-page .post-header,
body.cc-colorcard-page .post-title,
body.cc-colorcard-page .article-header,
body.cc-colorcard-page .article-title,
body.cc-colorcard-page .wp-block-post-title,
body.cc-colorcard-page .page-hero,
body.cc-colorcard-page .entry-hero,
body.cc-colorcard-page .page-heading,
body.cc-colorcard-page .single-article__header,
body.cc-colorcard-page .single-article__title,
body.cc-colorcard-page .single-article_header,
body.cc-colorcard-page .single-article_title,
body.cc-colorcard-page .breadcrumb,
body.cc-colorcard-page .breadcrumbs{display:none !important;}

/* ---------- 1. 容器 ---------- */
.cc-page{
  --cc-blue:#2a49c4;
  --cc-blue-dark:#1f3aa8;
  --cc-ink:#1b2130;
  --cc-muted:#8a90a2;
  --cc-line:#eceef3;
  --cc-sticky-top:0px;
  --cc-sticky-bg:#ffffff;   /* 分类栏吸顶时的底色，改成你主题内容区的背景色即可 */
  width:100%;max-width:1280px;margin:0 auto;padding:2px 16px 40px;
  color:var(--cc-ink);
}
.cc-page *,.cc-page *::before,.cc-page *::after{box-sizing:border-box;}
.cc-content{display:block;}
.cc-content.cc-in{animation:cc-in .26s ease both;}
@keyframes cc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 2. 空态 / 排查提示 ---------- */
.cc-empty{padding:44px 4px;color:var(--cc-muted);font-size:15px;text-align:center;}
.cc-diag{text-align:left;max-width:660px;margin:24px auto;background:#fff;
  border:1px solid var(--cc-line);border-radius:14px;padding:20px 24px;
  color:#3a4152;font-size:14px;line-height:1.75;box-shadow:0 4px 16px rgba(20,30,60,.06);}
.cc-diag strong{display:block;font-size:16px;color:#c02626;margin-bottom:8px;}
.cc-diag p{margin:0 0 4px;}
.cc-diag ul{margin:8px 0 0;padding-left:22px;}
.cc-diag li{margin:4px 0;}
.cc-diag code{background:#f2f4f8;padding:1px 6px;border-radius:4px;font-size:13px;}

/* ---------- 3. 顶部分类胶囊按钮（<button>，点击即时切换，不重载页面） ---------- */
/* 主题有吸顶导航时，在主题 CSS 里设 .cc-page{--cc-sticky-top:70px;} */
.cc-tabs{
  position:-webkit-sticky;position:sticky;top:var(--cc-sticky-top,0px);z-index:30;
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  padding:10px 2px 12px;margin:0 -2px 18px;
  background:var(--cc-sticky-bg);
  box-shadow:0 8px 12px -10px rgba(20,30,60,.28);
  -webkit-overflow-scrolling:touch;
}
.cc-tabs::-webkit-scrollbar{display:none;}
.cc-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:9px 18px 9px 13px;border-radius:999px;
  border:1px solid transparent;background:#f3f4f8;color:#4d5468;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .18s,color .18s,box-shadow .18s;
}
.cc-tab:hover{background:#e8ecfa;color:var(--cc-blue);}
.cc-tab-ico{
  width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,30,60,.10);
  transition:background .18s,box-shadow .18s;
}
.cc-tab-ico svg{width:12px;height:12px;display:block;fill:currentColor;}
.cc-tab.active{background:var(--cc-blue);color:#fff;box-shadow:0 8px 18px rgba(42,73,196,.26);}
.cc-tab.active:hover{background:var(--cc-blue);color:#fff;}
.cc-tab.active .cc-tab-ico{background:rgba(255,255,255,.22);box-shadow:none;}

/* ---------- 4. 分组标题（蓝色短标 + 分类名 + 数量 + 查看全部） ---------- */
.cc-sec{margin:0 0 34px;}
.cc-catbar{
  display:flex;align-items:center;gap:10px;
  padding:0 0 12px;margin:0 0 18px;border-bottom:1px solid var(--cc-line);
}
.cc-cb-mark{
  flex:0 0 auto;width:5px;height:20px;border-radius:3px;
  background:linear-gradient(180deg,#4a6bf0,var(--cc-blue));
}
.cc-cb-title{
  flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:center;gap:10px;
  font-size:19px;font-weight:800;letter-spacing:.4px;color:var(--cc-ink);line-height:1.25;
}
.cc-cb-count{
  font-style:normal;font-size:12px;font-weight:600;color:#8a90a2;letter-spacing:0;
  background:#f3f4f8;border-radius:999px;padding:3px 9px;white-space:nowrap;
}
/* 「查看全部」：现在是 <button>，需要复位浏览器默认按钮样式 */
.cc-cb-more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;
  border:none;background:none;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;color:var(--cc-blue);text-decoration:none;opacity:.9;
}
.cc-cb-more:hover{opacity:1;}
.cc-cb-arrow{display:block;width:14px;height:14px;flex:0 0 auto;transition:transform .18s;}
.cc-cb-more:hover .cc-cb-arrow{transform:translateX(3px);}

/* 子分类：换成浅蓝胶囊标签，和总分类一眼区分 */
.cc-sub{margin-top:28px;}
.cc-sub .cc-catbar{border-bottom:none;padding:0;margin:0 0 14px;gap:8px;}
.cc-sub .cc-cb-mark{display:none;}
.cc-sub .cc-cb-title{
  flex:0 1 auto;font-size:14px;font-weight:700;letter-spacing:.2px;color:var(--cc-blue-dark,#1f3aa8);
  background:#eef2fe;border:1px solid #dde4fb;border-radius:999px;padding:6px 14px;
}
.cc-sub .cc-cb-count{font-size:11px;padding:2px 8px;background:transparent;color:#8f9bc4;padding-left:0;}
.cc-sub .cc-cb-more{margin-left:auto;font-size:12px;font-weight:500;}

/* 分类独立页的返回条：返回按钮也是 <button> */
.cc-backbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;}
.cc-back{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;
  border:none;background:none;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:var(--cc-blue);text-decoration:none;}
.cc-back:hover{text-decoration:underline;}
.cc-catcount{margin-left:auto;font-size:13px;color:var(--cc-muted);}

/* ---------- 5. 缩略图网格 ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media (max-width:1024px){.cc-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:768px){.cc-grid{grid-template-columns:repeat(3,1fr);gap:12px;}}
@media (max-width:480px){.cc-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

.cc-cell{
  cursor:pointer;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,30,60,.07);
  transition:transform .2s,box-shadow .2s;
}
.cc-cell:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(20,30,60,.15);}
.cc-cell:active{transform:translateY(-2px) scale(.99);}
.cc-cell:focus-visible{outline:3px solid var(--cc-blue);outline-offset:3px;}

.cc-thumb{position:relative;width:100%;aspect-ratio:1/1;background:#f4f5f8;overflow:hidden;}
/* 只作用于主图（> 限定），不要影响角标里的 LOGO */
.cc-thumb>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.cc-cell:hover .cc-thumb>img{transform:scale(1.045);}
.cc-thumb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(16,22,40,0);transition:background .2s;}
.cc-cell:hover .cc-thumb::after{background:rgba(16,22,40,.16);}

/* 未设置「特色图像」时的中性占位：不出裂图，也绝不加载正文原图 */
.cc-thumb--empty{background:repeating-linear-gradient(45deg,#eef1f6 0 10px,#e5e9f1 10px 20px);}
.cc-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;}
.cc-thumb-ph::before{content:"暂无缩略图";font-size:12px;color:#9aa3b5;letter-spacing:.5px;}

/* 悬停时中间的放大镜 */
.cc-zoom{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:2;
  border-radius:50%;background:rgba(255,255,255,.95);color:var(--cc-blue);
  display:grid;place-items:center;pointer-events:none;
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;
  box-shadow:0 6px 16px rgba(10,16,40,.25);
}
.cc-cell:hover .cc-zoom{opacity:1;transform:scale(1);}
.cc-zoom svg{width:22px;height:22px;}

/* 缩略图下方的蓝色标题条：只显示 LOGO + 色卡名 */
.cc-tag{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;
  background:linear-gradient(90deg,var(--cc-blue),#3557d8);color:#fff;
  border-top-right-radius:18px;
}
.cc-tag-logo{display:block;height:18px;width:auto;max-width:none;flex:0 0 auto;object-fit:contain;}
.cc-tag-name{
  flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;letter-spacing:.3px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 底部提示文字 */
.cc-note{margin:14px 2px 0;color:var(--cc-muted);font-size:12px;line-height:1.6;}

/* ============================================================
   6. 全屏灯箱（v1.5 重写）
   ============================================================ */
.lb{position:fixed;inset:0;z-index:99999;display:none;flex-direction:column;
  background:rgba(8,10,18,.96);}
.lb.open{display:flex;animation:ccfade .2s ease;}
@keyframes ccfade{from{opacity:0}to{opacity:1}}

/* 关闭按钮：直接浮在舞台右上角 */
.lb-close{position:absolute;top:14px;right:14px;z-index:5;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;
  display:grid;place-items:center;
  -webkit-appearance:none;appearance:none;
  transition:background .15s,transform .15s;}
.lb-close:hover{background:rgba(255,255,255,.26);transform:rotate(90deg);}

/* 舞台：占满中间剩余空间 */
.lb-stage{flex:1 1 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;user-select:none;-webkit-user-drag:none;will-change:transform;}

/* 1:1 实际大小：原图可能比屏幕大，靠 transform 平移，可超出屏幕外 */
.lb-stage.orig{display:block;}
.lb-stage.orig .lb-img{position:absolute;top:0;left:0;max-width:none;max-height:none;
  width:auto;height:auto;cursor:grab;}
.lb-stage.orig .lb-img.grabbing{cursor:grabbing;}

/* 加载中的转圈 */
.lb-spin{display:none;position:absolute;top:50%;left:50%;width:42px;height:42px;
  margin:-21px 0 0 -21px;border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff;border-radius:50%;
  animation:lbspin .8s linear infinite;z-index:3;}
.lb-stage.loading .lb-spin{display:block;}
.lb-stage.loading .lb-img{opacity:.2;}
@keyframes lbspin{to{transform:rotate(360deg)}}

/* 底部工具条：仅两个按钮 + 小字信息 */
.lb-bottom{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 16px 18px;
  background:linear-gradient(180deg,rgba(8,10,18,0),rgba(8,10,18,.55));
  pointer-events:none;}                 /* 让空白处点击穿透到 .lb 关闭 */
.lb-bottom>*{pointer-events:auto;}
.lb-tools{display:inline-flex;align-items:center;gap:8px;padding:5px;border-radius:16px;
  background:rgba(255,255,255,.09);}
.lb-btn{
  display:inline-flex;align-items:center;gap:7px;margin:0;padding:9px 16px;
  border:none;border-radius:12px;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:#c9d2ee;background:transparent;
  -webkit-appearance:none;appearance:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.lb-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.lb-btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}

/* 全屏 / 1:1 切换按钮：同一按钮两种模式 */
.lb-btn.mode .lb-ico-11,.lb-btn.mode .lb-ico-fit{display:inline-flex;align-items:center;justify-content:center;}
.lb-btn.mode .lb-ico-11{font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px;}
.lb-btn.mode .lb-ico-fit{width:16px;height:16px;}
.lb-btn.mode .lb-ico-fit svg{width:16px;height:16px;}
/* 默认（fit 态，即将进入 1:1）→ 显示「1:1」图标；1:1 态 → 显示「全屏」图标 */
.lb-btn.mode .lb-ico-fit{display:none;}
.lb-btn.mode.is-one .lb-ico-11{display:none;}
.lb-btn.mode.is-one .lb-ico-fit{display:inline-flex;}
/* 当前处于 1:1 时高亮该按钮 */
.lb-btn.mode.is-one{background:#fff;color:var(--cc-blue-dark,#1f3aa8);}
.lb-btn.mode.is-one:hover{background:#fff;color:var(--cc-blue-dark,#1f3aa8);}

.lb-btn.primary{background:#2a49c4;color:#fff;padding:9px 18px;}
.lb-btn.primary:hover{background:#1f3aa8;}

/* 色卡信息：以小字显示在最底部 */
.lb-info{margin:2px auto 0;color:#cfd6ee;font-size:12.5px;line-height:1.7;
  text-align:center;max-width:840px;}
.lb-info .lb-iname{display:block;font-weight:700;color:#fff;font-size:13.5px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-info .lb-ip{display:block;color:#aab4d8;}
.lb-info .lb-ip i{font-style:normal;color:#8e9ac8;margin-right:3px;}
.lb-info .lb-ip em{font-style:normal;color:#5b6690;margin:0 7px;}
.lb-info .lb-idesc{display:block;margin-top:4px;color:#8e98bf;}

/* ============================================================
   7. 暗色模式（跟随主题 html[data-theme="dark"]）
   统一分类标题条及相关元素的背景色
   ============================================================ */
html[data-theme="dark"] .cc-page{
  --cc-ink:#e8e8e8;
  --cc-muted:#888888;
  --cc-line:#3a3a3a;
  --cc-sticky-bg:#16161a;
}
/* 顶部分类胶囊栏 */
html[data-theme="dark"] .cc-tabs{
  background:var(--cc-sticky-bg);
  box-shadow:0 8px 12px -10px rgba(0,0,0,.5);
}
html[data-theme="dark"] .cc-tab{
  background:#2a2a2a;color:#b0b0b0;
}
html[data-theme="dark"] .cc-tab:hover{background:#3a3a3a;color:#818cf8;}
html[data-theme="dark"] .cc-tab-ico{background:#3a3a3a;box-shadow:0 1px 2px rgba(0,0,0,.3);}
html[data-theme="dark"] .cc-tab.active{background:var(--cc-blue);color:#fff;box-shadow:0 8px 18px rgba(42,73,196,.4);}
html[data-theme="dark"] .cc-tab.active .cc-tab-ico{background:rgba(255,255,255,.22);box-shadow:none;}

/* 分组标题条 */
html[data-theme="dark"] .cc-catbar{border-bottom-color:var(--cc-line);}
html[data-theme="dark"] .cc-cb-count{
  background:#2a2a2a;color:#888888;
}

/* 子分类标题胶囊 */
html[data-theme="dark"] .cc-sub .cc-cb-title{
  background:#1e2a4a;border-color:#2a3a5e;color:#818cf8;
}
html[data-theme="dark"] .cc-sub .cc-cb-count{color:#6670a0;}

/* 缩略图卡片 */
html[data-theme="dark"] .cc-cell{
  background:#2a2a2a;box-shadow:0 2px 10px rgba(0,0,0,.3);
}
html[data-theme="dark"] .cc-cell:hover{box-shadow:0 12px 24px rgba(0,0,0,.5);}
html[data-theme="dark"] .cc-thumb{background:#222222;}
html[data-theme="dark"] .cc-thumb--empty{background:repeating-linear-gradient(45deg,#2a2a2a 0 10px,#222222 10px 20px);}
html[data-theme="dark"] .cc-thumb-ph::before{color:#666666;}

/* 缩略图蓝色标题条：暗色下稍微压暗 */
html[data-theme="dark"] .cc-tag{
  background:linear-gradient(90deg,#1f3aa8,#2a49c4);
}

/* 悬停放大镜 */
html[data-theme="dark"] .cc-zoom{background:rgba(30,30,30,.95);color:#818cf8;box-shadow:0 6px 16px rgba(0,0,0,.5);}

/* 空态 / 排查提示 */
html[data-theme="dark"] .cc-empty{color:var(--cc-muted);}
html[data-theme="dark"] .cc-diag{background:#2a2a2a;border-color:var(--cc-line);color:#c0c0c0;box-shadow:0 4px 16px rgba(0,0,0,.3);}
html[data-theme="dark"] .cc-diag code{background:#3a3a3a;}

/* 底部提示 */
html[data-theme="dark"] .cc-note{color:var(--cc-muted);}

/* 返回条 */
html[data-theme="dark"] .cc-catcount{color:var(--cc-muted);}

/* ---------- 8. 换行收敛 ---------- */
@media (max-width:768px){
  .cc-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
}
@media (max-width:480px){
  .cc-page{padding:0 12px 32px;}
  .cc-tabs{padding:8px 2px 12px;margin-bottom:16px;gap:8px;}
  .cc-tab{padding:8px 14px 8px 11px;font-size:14px;gap:6px;}
  .cc-tab-ico{width:20px;height:20px;}
  .cc-cb-title{font-size:17px;}
  .cc-cb-more{font-size:12px;}
  .cc-sub{margin-top:20px;}
  .cc-sub .cc-cb-title{font-size:14px;}
  .cc-tag{min-height:32px;padding:6px 9px;gap:6px;border-top-right-radius:14px;}
  .cc-tag-logo{height:14px;}
  .cc-tag-name{font-size:12px;}
  .cc-zoom{width:38px;height:38px;margin:-19px 0 0 -19px;}
  .cc-zoom svg{width:18px;height:18px;}
  .cc-note{font-size:11px;}

  .lb-close{top:10px;right:10px;width:38px;height:38px;font-size:22px;}
  .lb-bottom{padding:12px 12px 16px;gap:8px;}
  .lb-tools{gap:6px;}
  .lb-btn{padding:8px 12px;font-size:13px;gap:5px;}
  .lb-btn.primary{padding:8px 14px;}
  .lb-btn svg{width:16px;height:16px;}
  .lb-info{font-size:11px;line-height:1.6;}
}