/* ==========================================================================
   skin-qiji.css — 「奇迹秀」风格主题（暗色 · 现代 · 卡片式）
   --------------------------------------------------------------------------
   通过 <html data-skin="qiji"> 启用，覆盖 style.css 的像素风视觉层：
   - 配色换为 qijishow.com 的暗黑底 + 薄荷绿 #13e0bc + 靛蓝 #2f3ba2 + 暖黄 #ffe28a
   - 字体从像素字体换成现代无衬线（Inter / PingFang SC）
   - 硬边框 / 硬阴影 → 圆角 + 软阴影；关闭扫描线与像素渲染
   本文件在所有页面 style.css 之后加载，用更高的优先级覆盖。
   日夜模式仍复用 data-theme（day / night），本主题两套配色都给出。
   ========================================================================== */

/* ---------- 暗色（默认，等价 night） ---------- */
:root[data-skin="qiji"] {
  --c0:  #0e0e11;  /* 页面底色 */
  --c1:  #18181d;  /* 卡片 / 面板 */
  --c2:  #232329;  /* 次级面板 / 选中态 */
  --c3:  #13e0bc;  /* 薄荷绿 · 主强调 / 链接 */
  --c4:  #2f3ba2;  /* 靛蓝 · CTA / 品牌 */
  --c5:  #ffe28a;  /* 暖黄 · 标题 / 标记 */
  --c6:  #5cf0d2;  /* 亮薄荷 · hover */
  --c7:  #ececf1;  /* 白 · 正文 / 边框 */
  --c8:  #8a8a94;  /* 灰 · 次要文字 */
  --c9:  #2b2b33;  /* 暗灰 · 分隔线 */
  --c10: #16d39a;  /* 绿 · 成功 */
  --c11: #ff5d5d;  /* 红 · 危险 */
  --c12: #13e0bc;  /* 在线状态 */
  --c13: #7c9cff;  /* 蓝 · 链接 */

  --bg: var(--c0);
  --panel: var(--c1);
  --panel-2: var(--c2);
  --ink: var(--c7);
  --dim: var(--c8);
  --line: var(--c9);
  --accent: var(--c3);
  --cta: var(--c4);
  --hot: var(--c6);

  --font-display: "Inter", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-code: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4);
  --title-shadow: rgba(0, 0, 0, .45);
  --scan-color: transparent;
  --scan-opacity: 0;
}

/* ---------- 日间（浅色）----------
   两个属性选择器优先级高于上面的暗色块，点「日间」按钮时整套调色板切换。 */
:root[data-skin="qiji"][data-theme="day"] {
  --c0:  #f7f8fa;  /* 页面底 */
  --c1:  #ffffff;  /* 卡片 */
  --c2:  #eef0f4;  /* 次级面板 / 选中态 */
  --c3:  #0b8f76;  /* 深薄荷 · 强调 / 链接 */
  --c4:  #2f3ba2;  /* 靛蓝 · CTA / 品牌 */
  --c5:  #a87400;  /* 深金 · 标题 / 标记 */
  --c6:  #0b8f76;  /* hover */
  --c7:  #1b1b22;  /* 深墨 · 正文 / 边框 */
  --c8:  #6c6c78;  /* 次要文字 */
  --c9:  #dfe2e8;  /* 分隔线 */
  --c10: #0b8f76;  /* 成功 */
  --c11: #d84343;  /* 危险 */
  --c12: #0b8f76;  /* 在线 */
  --c13: #3f5fd0;  /* 链接蓝 */

  --bg: var(--c0);
  --panel: var(--c1);
  --panel-2: var(--c2);
  --ink: var(--c7);
  --dim: var(--c8);
  --line: var(--c9);
  --accent: var(--c3);
  --cta: var(--c4);
  --hot: var(--c6);

  --shadow: 0 12px 32px rgba(31, 41, 55, .12);
  --shadow-sm: 0 5px 16px rgba(31, 41, 55, .09);
  --title-shadow: rgba(31, 41, 55, .06);
  --scan-opacity: 0;
}
/* 浅色下按钮文字对比度微调（暗色块里写死的是白字） */
:root[data-skin="qiji"][data-theme="day"] .px-btn:hover { color: #fff; }
:root[data-skin="qiji"][data-theme="day"] .px-btn.secondary { color: var(--c3); }
:root[data-skin="qiji"][data-theme="day"] .px-btn.secondary:hover { color: #fff; }
:root[data-skin="qiji"][data-theme="day"] .px-tag { color: #fff; }
:root[data-skin="qiji"][data-theme="day"] .tab.is-active { color: #fff; }
:root[data-skin="qiji"][data-theme="day"] .pin-flag { color: #fff; }

/* ---------- 基础：抗锯齿 + 关扫描线 + 恢复像素渲染 ---------- */
:root[data-skin="qiji"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-skin="qiji"] body::after { display: none; }
:root[data-skin="qiji"] img,
:root[data-skin="qiji"] canvas { image-rendering: auto; }

/* ---------- 通用：硬边框 → 圆角细边框，硬阴影 → 软阴影 ---------- */
:root[data-skin="qiji"] .nav { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--line); }
:root[data-skin="qiji"] .nav-link { border: 1px solid transparent; border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .nav-link:hover { box-shadow: none; }
:root[data-skin="qiji"] .nav-link.is-active { box-shadow: none; }
:root[data-skin="qiji"] .nav-admin { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
:root[data-skin="qiji"] .nav-admin:active { transform: none; }

:root[data-skin="qiji"] .theme-toggle { border: 1px solid var(--line); border-radius: 999px; box-shadow: none; background: var(--panel); }
:root[data-skin="qiji"] .theme-toggle:hover { box-shadow: none; }
:root[data-skin="qiji"] .theme-toggle:active { transform: none; box-shadow: none; }
:root[data-skin="qiji"] .tt-dot { border-width: 1px; border-color: var(--line); }

:root[data-skin="qiji"] .px-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
:root[data-skin="qiji"] .px-card.hot { border-color: var(--c3); box-shadow: var(--shadow); }

:root[data-skin="qiji"] .px-btn {
  border: 1px solid transparent; border-radius: var(--radius-sm); box-shadow: none;
  background: var(--c4); color: #fff; font-weight: 600;
}
:root[data-skin="qiji"] .px-btn:hover { background: var(--c3); color: #06110e; }
:root[data-skin="qiji"] .px-btn:active { transform: translateY(1px); box-shadow: none; }
:root[data-skin="qiji"] .px-btn.secondary { background: rgba(19, 224, 188, .12); color: var(--c3); border-color: rgba(19, 224, 188, .35); }
:root[data-skin="qiji"] .px-btn.secondary:hover { background: rgba(19, 224, 188, .22); color: var(--c3); }
:root[data-skin="qiji"] .px-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
:root[data-skin="qiji"] .px-btn.ghost:hover { background: var(--panel-2); color: var(--ink); }
:root[data-skin="qiji"] .px-btn.danger { background: var(--c11); color: #fff; }
:root[data-skin="qiji"] .px-btn.danger:hover { background: #ff7777; color: #fff; }
:root[data-skin="qiji"] .px-btn.sm { border-radius: 8px; }

:root[data-skin="qiji"] .px-input,
:root[data-skin="qiji"] .px-select,
:root[data-skin="qiji"] .px-textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--c0); }
:root[data-skin="qiji"] .px-input:focus,
:root[data-skin="qiji"] .px-select:focus,
:root[data-skin="qiji"] .px-textarea:focus { border-color: var(--c3); }

:root[data-skin="qiji"] .px-tag { border: 1px solid transparent; border-radius: 6px; font-size: 13px; }
:root[data-skin="qiji"] .px-bar { border: 1px solid var(--line); border-radius: 4px; }
:root[data-skin="qiji"] .px-notice { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }

:root[data-skin="qiji"] .tab { border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; }
:root[data-skin="qiji"] .tab.is-active { border-color: var(--c3); }

:root[data-skin="qiji"] .empty { border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- Hero：去掉硬阴影与像素字，改成现代大标题 ---------- */
:root[data-skin="qiji"] .hero { border-bottom: 1px solid var(--line); }
:root[data-skin="qiji"] .hero h1 { text-shadow: none; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-skin="qiji"] .hero h1 em { color: var(--c3); }
:root[data-skin="qiji"] .hero-sub { color: var(--dim); }
:root[data-skin="qiji"] .px-kicker { letter-spacing: .14em; color: var(--c3); }

/* ---------- 站点 IP 形象「柴犬」在奇迹秀风下的表现 ---------- */
:root[data-skin="qiji"] .hero-ip .hero-ip-hd {
  max-width: 300px; max-height: 400px;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .38));
  animation: shiba-float 6s ease-in-out infinite;
}
:root[data-skin="qiji"] .hero-ip-glow {
  background: radial-gradient(circle, #f6a93b 0%, transparent 66%);
  opacity: .20;
  animation: shiba-breathe 6s ease-in-out infinite;
}
:root[data-skin="qiji"][data-theme="day"] .hero-ip-glow { opacity: .13; }
:root[data-skin="qiji"] .hero-ip-plate { background: radial-gradient(ellipse, var(--c3) 0%, transparent 72%); opacity: .22; }
:root[data-skin="qiji"] .hero-ip-tag { color: var(--c3); }
@keyframes shiba-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* 光晕用 translate(-50%,-50%) 居中，动画里必须保留这个位移，否则会跑偏 */
@keyframes shiba-breathe {
  0%, 100% { opacity: .16; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .26; transform: translate(-50%, -50%) scale(1.06); }
}

/* ---------- 文章卡片 ---------- */
:root[data-skin="qiji"] .post-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
:root[data-skin="qiji"] .post-card:hover { border-color: var(--c3); box-shadow: var(--shadow); }
:root[data-skin="qiji"] .post-cover { border-bottom: 1px solid var(--line); }
:root[data-skin="qiji"] .post-card h3 a { color: var(--ink); }
:root[data-skin="qiji"] .post-card h3 a:hover { color: var(--c3); }
:root[data-skin="qiji"] .pin-flag { border-radius: 5px; }

/* ---------- 工具卡片 ---------- */
:root[data-skin="qiji"] .tool-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
:root[data-skin="qiji"] .tool-card:hover { border-color: var(--c3); box-shadow: var(--shadow); }
:root[data-skin="qiji"] .tool-icon { border: 1px solid var(--line); border-radius: 12px; background: var(--c4); color: #fff; }
:root[data-skin="qiji"] .tool-info { border: 1px dashed var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .tool-sources { border-top: 1px solid var(--line); }
:root[data-skin="qiji"] .tool-source-row { border-bottom-color: var(--line); }
:root[data-skin="qiji"] .tool-disclaimer { font-size: 11px; opacity: .72; }
:root[data-skin="qiji"] .tool-actions.compact .px-btn { border-radius: 8px; }
:root[data-skin="qiji"] .tool-no-link { border: 1px dashed var(--line); border-radius: var(--radius-sm); }

/* ---------- 文章详情 ---------- */
:root[data-skin="qiji"] .article-head { border-bottom: 1px solid var(--line); }
:root[data-skin="qiji"] .article-head h1 { text-shadow: none; }
:root[data-skin="qiji"] .article-cover { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
:root[data-skin="qiji"] .article-nav { border-top: 1px solid var(--line); }
:root[data-skin="qiji"] .article-nav a { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .article-nav a:hover { border-color: var(--c3); }
:root[data-skin="qiji"] .article-toc a { border-bottom: 1px dotted var(--line); }

:root[data-skin="qiji"] .md blockquote { border-left: 3px solid var(--c3); border-radius: 8px; background: var(--panel); }
:root[data-skin="qiji"] .md code { border: 1px solid var(--line); border-radius: 6px; }
:root[data-skin="qiji"] .md pre { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .md img { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
:root[data-skin="qiji"] .video-embed { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
:root[data-skin="qiji"] .md th, :root[data-skin="qiji"] .md td { border: 1px solid var(--line); }
:root[data-skin="qiji"] .md th { background: var(--panel-2); }

/* ---------- 侧栏 / 图表 ---------- */
:root[data-skin="qiji"] .profile canvas { border: 1px solid var(--line); border-radius: var(--radius); }
:root[data-skin="qiji"] canvas.chart { border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---------- 后台 ---------- */
:root[data-skin="qiji"] .admin-menu button { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .admin-menu button.is-active { background: var(--panel-2); }
:root[data-skin="qiji"] .item-row { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .item-row.is-active { border-color: var(--c3); }
:root[data-skin="qiji"] .mode-badge { border: 1px solid var(--line); border-radius: 999px; }
:root[data-skin="qiji"] .post-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .img-thumb { border: 1px solid var(--line); border-radius: 6px; }
:root[data-skin="qiji"] .img-del { border: 1px solid var(--line); border-radius: 4px; }
:root[data-skin="qiji"] .form-actions { border-top: 1px solid var(--line); }

/* ---------- 页脚 / Toast ---------- */
:root[data-skin="qiji"] .footer { border-top: 1px solid var(--line); }
:root[data-skin="qiji"] #toast { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--c4); color: #fff; box-shadow: var(--shadow); }
:root[data-skin="qiji"] #toast.err { background: var(--c11); color: #fff; }

/* ---------- 灯箱 ---------- */
:root[data-skin="qiji"] .lb-overlay { background: rgba(8, 8, 11, .92); }
:root[data-skin="qiji"] .lb-overlay img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
:root[data-skin="qiji"] .lb-close { border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ==========================================================================
   呼吸感：拉开垂直节奏
   --------------------------------------------------------------------------
   原布局里左列 section 自带 56px 顶部留白，右列 .sidebar 却直接贴在
   .layout 顶端，导致右侧博主名片几乎顶着 hero 底边。这里把留白提到
   .layout 上、两列统一从同一起点开始，避免一侧贴太紧。
   ========================================================================== */
:root[data-skin="qiji"] .layout { padding-top: 84px; gap: 40px; }
:root[data-skin="qiji"] .layout > div > .section:first-child { padding-top: 0; }
:root[data-skin="qiji"] .sidebar { top: 108px; }
:root[data-skin="qiji"] .side-block { margin-bottom: 34px; }
:root[data-skin="qiji"] .px-card { padding: 28px; }
:root[data-skin="qiji"] .px-title { margin-bottom: 22px; }
:root[data-skin="qiji"] .hero-in { padding-bottom: 96px; }

/* 博主名片内部：头像 / 名字 / 简介 / 按钮之间留出呼吸 */
:root[data-skin="qiji"] .profile { padding: 38px 28px; }
:root[data-skin="qiji"] .profile canvas { margin-bottom: 22px; }
:root[data-skin="qiji"] .profile-name { margin-bottom: 2px; }
:root[data-skin="qiji"] .profile-bio { margin: 16px 0 24px; line-height: 1.8; }
:root[data-skin="qiji"] .profile-links { gap: 10px; }

/* 侧栏相邻卡片之间也别挤在一起 */
:root[data-skin="qiji"] .side-block .px-h2 { margin-bottom: 22px; }

/* 窄屏下恢复单栏，去掉这段额外留白避免上下叠加过大 */
@media (max-width: 980px) {
  :root[data-skin="qiji"] .layout { padding-top: 56px; }
}

/* ---------- 奇迹秀主题：紧凑格子 + 工具详情页 ---------- */
:root[data-skin="qiji"] .tool-tile {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}
:root[data-skin="qiji"] .tool-tile:hover { border-color: var(--c3); box-shadow: var(--shadow); }
:root[data-skin="qiji"] .tool-tile-icon img { border-radius: 12px; }
:root[data-skin="qiji"] .tool-tile-name { font-size: 14px; font-weight: 600; }
:root[data-skin="qiji"] .tool-tile-desc { font-size: 12px; }
:root[data-skin="qiji"] .tool-detail-head,
:root[data-skin="qiji"] .tool-dl-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
:root[data-skin="qiji"] .tool-detail-heading h1,
:root[data-skin="qiji"] .tool-dl-card h2 { letter-spacing: -.02em; }
:root[data-skin="qiji"] .tool-detail-disclaimer { border: 1px dashed var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .tool-dl-official { background: #111; color: #fff; border-radius: 10px; }
:root[data-skin="qiji"] .tool-dl-btn { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
:root[data-skin="qiji"] .tool-dl-code { border: 1px dashed var(--line); border-radius: 8px; }
:root[data-skin="qiji"] .tool-dl-warn { border-top: 1px solid var(--line); }
:root[data-skin="qiji"] .tool-dl-empty { border: 1px dashed var(--line); border-radius: var(--radius-sm); }

/* 版本合集专题页（奇迹秀主题） */
:root[data-skin="qiji"] .coll-banner { border-bottom: 1px solid var(--line); }
:root[data-skin="qiji"] .coll-sub { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .coll-card { border: 1px solid var(--line); border-radius: var(--radius); }
:root[data-skin="qiji"] .coll-dl { border-radius: 8px; }
:root[data-skin="qiji"] .coll-code { border: 1px dashed var(--line); border-radius: 6px; }

/* 后台：多下载源编辑器 */
:root[data-skin="qiji"] .dl-row { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .dl-row .px-input,
:root[data-skin="qiji"] .dl-row .px-select { border-width: 1px; border-radius: 8px; }
:root[data-skin="qiji"] .dl-ops button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
:root[data-skin="qiji"] .dl-row-empty { border: 1px dashed var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .cv-row { border: 1px solid var(--line); border-radius: var(--radius-sm); }
:root[data-skin="qiji"] .cv-row .px-input { border-width: 1px; border-radius: 8px; }