/* ============================================================
   CheckSymbols — 浏览器端在线工具箱
   主题：专业商务风（蓝紫主色 + 浅色背景）
   基于 Bootstrap 5 定制
   ============================================================ */

:root {
  --pc-primary: #3b5bdb;
  --pc-primary-dark: #2f46b0;
  --pc-primary-light: #edf0ff;
  --pc-accent: #7048e8;
  --pc-ink: #1c2333;
  --pc-muted: #6b7280;
  --pc-border: #e5e7eb;
  --pc-bg: #f6f7fb;
  --pc-card: #ffffff;
  --pc-green: #12b886;
  --pc-red: #e03131;
  --pc-radius: 14px;
  --pc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
  /* 暗色适配用组件色 */
  --pc-nav-bg: rgba(255, 255, 255, .85);
  --pc-nav-hover: #f1f3f9;
  --pc-dropzone-border: #cbd2e1;
  --pc-dropzone-bg: #fafbfe;
  --pc-overlay-bg: rgba(255, 255, 255, .7);
  --pc-arrow: #c3c7d1;
}

/* 暗色主题（配合 Bootstrap data-bs-theme="dark"） */
html[data-bs-theme="dark"] {
  --pc-primary: #5c7cfa;
  --pc-primary-dark: #7d9bff;
  --pc-primary-light: #27304a;
  --pc-accent: #9a7cf0;
  --pc-ink: #e7ebf5;
  --pc-muted: #9aa3b4;
  --pc-border: #2a3342;
  --pc-bg: #12161f;
  --pc-card: #1b2130;
  --pc-green: #20c997;
  --pc-red: #ff6b6b;
  --pc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --pc-nav-bg: rgba(18, 22, 31, .85);
  --pc-nav-hover: #2a3342;
  --pc-dropzone-border: #3a4558;
  --pc-dropzone-bg: #1a2030;
  --pc-overlay-bg: rgba(8, 11, 18, .7);
  --pc-arrow: #46506a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--pc-bg);
  color: var(--pc-ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* ---------- 顶部导航 ---------- */
.pc-nav {
  background: var(--pc-nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pc-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.pc-brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--pc-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.pc-brand:hover { color: var(--pc-ink); }
.pc-logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ✓ 为文本符号（非 emoji），较 emoji 视觉偏小，故放大字号并加粗以填满方块 */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.pc-nav .nav-link {
  color: var(--pc-muted);
  font-size: .92rem;
  font-weight: 500;
  padding: .45rem .7rem !important;
  border-radius: 8px;
}
.pc-nav .nav-link:hover { color: var(--pc-ink); background: var(--pc-nav-hover); }

/* 主题切换按钮 */
.pc-theme-toggle {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
  flex: 0 0 auto;
}
.pc-theme-toggle:hover { background: var(--pc-nav-hover); }
.pc-theme-toggle .pc-theme-icon { pointer-events: none; }

/* ---------- 工具多列下拉菜单（MegaMenu） ---------- */
.pc-nav .dropdown-menu.pc-megamenu {
  /* 强制绝对定位：覆盖 Bootstrap 折叠断点下 .navbar-nav .dropdown-menu 的 static，
     避免大菜单（如编程开发 54 项）参与文档流撑开页面 */
  position: absolute;
  top: 100%;
  width: 1240px;
  max-width: 95vw;
  max-height: 76vh;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--pc-border);
  border-radius: 16px;
  background: var(--pc-card);
  box-shadow: 0 12px 32px -12px rgba(16, 24, 40, .28);
}
.pc-mm-grid {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
}
.pc-mm-col {
  flex: 1 1 0;
  min-width: 0;
}
.pc-mm-col + .pc-mm-col { border-left: 1px solid var(--pc-border); padding-left: .9rem; }
.pc-mm-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pc-muted);
  margin-bottom: .35rem;
  white-space: nowrap;
}
.pc-mm-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .5rem;
  font-size: .86rem;
  color: var(--pc-ink);
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
}
.pc-mm-item:hover {
  background: var(--pc-primary-light);
  color: var(--pc-primary);
}
.pc-mm-ic { width: 18px; text-align: center; flex: 0 0 auto; }

/* 文本工具下拉：4 列，宽度收窄 */
.pc-nav .dropdown-menu.pc-megamenu-text {
  width: 1080px;
}

/* ---------- 两级面板下拉（左侧分组 + 右侧工具，常用置顶） ---------- */
.pc-nav .dropdown-menu.pc-megamenu-panel {
  width: 900px;
  max-width: 94vw;
  max-height: none;
  overflow: hidden;
  padding: .55rem .7rem;
}
.pc-mm-panel {
  display: flex;
  height: auto;
  min-height: 420px;
  max-height: 72vh;
  gap: 0;
}
.pc-mm-side {
  flex: 0 0 196px;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid var(--pc-border);
  padding: .3rem .45rem .3rem 0;
}
.pc-mm-group {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .44rem .62rem;
  font-size: .86rem;
  color: var(--pc-ink);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.pc-mm-group:hover {
  background: var(--pc-primary-light);
  color: var(--pc-primary);
}
.pc-mm-group.active {
  background: var(--pc-primary);
  color: #fff;
  font-weight: 600;
}
.pc-mm-body {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  padding: .5rem .55rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: .42rem .5rem;
  align-content: start;
}
.pc-mm-body .pc-mm-item {
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: .62rem .4rem .54rem;
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}
.pc-mm-body .pc-mm-item:hover {
  border-color: var(--pc-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(16, 24, 40, .18);
}
.pc-mm-body .pc-mm-item .pc-mm-ic {
  width: auto;
  font-size: 1.45rem;
  line-height: 1.15;
}
.pc-mm-body .pc-mm-name {
  font-size: .8rem;
  max-width: 100%;
}
.pc-mm-body .pc-mm-item { position: relative; }
.pc-mm-body .pc-mm-new {
  position: absolute;
  top: 5px;
  right: 6px;
  margin-left: 0;
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  background: #f59e0b;
  border-radius: 6px;
  padding: .04rem .3rem;
  line-height: 1.3;
}
.pc-mm-empty {
  grid-column: 1 / -1;
  color: var(--pc-muted);
  font-size: .88rem;
  padding: .9rem .4rem;
}
@media (max-width: 991.98px) {
  .pc-nav .dropdown-menu.pc-megamenu-panel { width: 100%; max-width: none; overflow-y: auto; }
  .pc-mm-panel { flex-direction: column; height: auto; min-height: 0; max-height: 76vh; }
  .pc-mm-side { flex: none; border-right: none; border-bottom: 1px solid var(--pc-border); max-height: 34vh; }
  .pc-mm-body { max-height: 40vh; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

@media (max-width: 991.98px) {
  .pc-nav .dropdown-menu.pc-megamenu { width: 100%; max-width: none; }
  .pc-mm-grid { flex-wrap: wrap; }
  .pc-mm-col { flex: 1 1 45%; min-width: 0; }
  .pc-mm-col + .pc-mm-col { border-left: none; padding-left: 0; }
}

/* ---------- Hero ---------- */
.pc-hero {
  padding: 3.25rem 0 2.5rem;
  text-align: center;
}
.pc-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pc-hero .lead {
  color: var(--pc-muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin: .9rem auto 0;
}
.pc-hero .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  font-weight: 600;
  font-size: .8rem;
  padding: .4rem .8rem;
  border-radius: 999px;
}

/* ---------- 搜索框 ---------- */
.pc-search {
  max-width: 560px;
  margin: 1.4rem auto 0;
}
.pc-search .form-control {
  border-radius: 12px;
  border: 1px solid var(--pc-border);
  padding: .75rem 1rem .75rem 2.6rem;
  box-shadow: var(--pc-shadow);
}
.pc-search .form-control:focus {
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 .25rem rgba(59, 91, 219, .12);
}
.pc-search .search-icon {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--pc-muted);
}

/* ---------- 首页一级 TAB 栏 ---------- */
.pc-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: .5rem;
  margin: 1.6rem auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pc-tabs::-webkit-scrollbar { display: none; }
.pc-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-muted);
  font-weight: 600;
  font-size: .92rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pc-tab:hover {
  color: var(--pc-ink);
  border-color: rgba(59, 91, 219, .35);
}
.pc-tab.active {
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(59, 91, 219, .6);
}
.pc-tab-ic { font-size: 1.05rem; line-height: 1; }
.pc-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.pc-tab.active .pc-tab-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* ---------- 分类与工具卡片 ---------- */
.pc-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pc-section-title .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pc-primary);
}
.pc-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: .18rem .5rem;
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  border-radius: 999px;
}
.pc-stat {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: .7rem 1.1rem;
  min-width: 92px;
  text-align: center;
}
.pc-stat-label {
  font-size: .72rem;
  color: var(--pc-muted);
  margin-bottom: .15rem;
}
.pc-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pc-primary);
}
.pc-stat-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pc-primary);
}
.pc-tool-card {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: 1.1rem 1.15rem;
  text-decoration: none !important;
  color: var(--pc-ink) !important;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pc-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow);
  border-color: rgba(59, 91, 219, .35);
}
.pc-tool-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.pc-tool-card .title {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .2rem;
}
.pc-tool-card .desc {
  font-size: .8rem;
  color: var(--pc-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-tool-card .arrow {
  margin-left: auto;
  color: var(--pc-arrow);
  font-size: .9rem;
  align-self: center;
}
.pc-tool-card:hover .arrow { color: var(--pc-primary); }

/* 图标配色 */
.ic-blue   { background: #e8efff; color: #3b5bdb; }
.ic-green  { background: #e6fcf5; color: #12b886; }
.ic-purple { background: #f3f0ff; color: #7048e8; }
.ic-orange { background: #fff4e6; color: #f76707; }
.ic-red    { background: #ffe3e3; color: #e03131; }
.ic-cyan   { background: #e3fafc; color: #0c8599; }
.ic-pink   { background: #fce8ef; color: #d6336c; }
.ic-indigo { background: #eef2ff; color: #4f46e5; }
.ic-teal   { background: #e6fcf5; color: #0ca678; }
.ic-amber  { background: #fff8e1; color: #f59f00; }

html[data-bs-theme="dark"] .ic-amber { background: #3a2f12; color: #ffd43b; }

html[data-bs-theme="dark"] .ic-blue   { background: #1e2a4a; color: #8aa5ff; }
html[data-bs-theme="dark"] .ic-green  { background: #12372f; color: #3ddc97; }
html[data-bs-theme="dark"] .ic-purple { background: #2a2347; color: #b39af5; }
html[data-bs-theme="dark"] .ic-orange { background: #3a2a15; color: #ffb066; }
html[data-bs-theme="dark"] .ic-red    { background: #3a1e1e; color: #ff8787; }
html[data-bs-theme="dark"] .ic-cyan   { background: #12333a; color: #3bc9db; }
html[data-bs-theme="dark"] .ic-pink   { background: #3a1e2e; color: #f783ac; }
html[data-bs-theme="dark"] .ic-indigo { background: #232a47; color: #94a0ff; }
html[data-bs-theme="dark"] .ic-teal   { background: #12372f; color: #38d9a9; }

/* ---------- 工具工作台 ---------- */
.pc-toolbar {
  background: var(--pc-card);
  border-bottom: 1px solid var(--pc-border);
}
.pc-toolbar .breadcrumb { margin: 0; font-size: .85rem; }
.pc-toolbar a { color: var(--pc-muted); text-decoration: none; }
.pc-toolbar a:hover { color: var(--pc-primary); }

.pc-workspace { padding: 2rem 0 3rem; }
.pc-panel {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: 1.5rem;
  box-shadow: var(--pc-shadow);
}
.pc-panel h1,
.pc-panel h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.pc-panel .sub {
  color: var(--pc-muted);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}

/* 拖拽上传区 */
.pc-dropzone {
  border: 2px dashed var(--pc-dropzone-border);
  border-radius: var(--pc-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--pc-dropzone-bg);
}
.pc-dropzone:hover, .pc-dropzone.dragover {
  border-color: var(--pc-primary);
  background: var(--pc-primary-light);
}
.pc-dropzone .dz-icon {
  font-size: 2.2rem;
  color: var(--pc-primary);
  margin-bottom: .6rem;
}
.pc-dropzone .dz-title { font-weight: 600; margin-bottom: .25rem; }
.pc-dropzone .dz-hint { color: var(--pc-muted); font-size: .85rem; }

/* 文件列表 */
.pc-file-list { list-style: none; padding: 0; margin: 0; }
.pc-file-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  margin-bottom: .5rem;
  background: var(--pc-card);
}
.pc-file-list li .fname { font-size: .9rem; font-weight: 500; flex: 1; word-break: break-all; }
.pc-file-list li .fsize { color: var(--pc-muted); font-size: .8rem; white-space: nowrap; }
.pc-file-list li .order {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  font-weight: 700;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

/* 按钮 */
.btn-pc {
  background: var(--pc-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .62rem 1.3rem;
  font-weight: 600;
  transition: background .15s ease;
}
.btn-pc:hover, .btn-pc:focus { background: var(--pc-primary-dark); color: #fff; }
.btn-pc:disabled { background: #a5b4f5; }
html[data-bs-theme="dark"] .btn-pc:disabled { background: #3a4a80; }
.btn-pc-outline {
  background: var(--pc-card);
  color: var(--pc-primary);
  border: 1px solid var(--pc-primary);
  border-radius: 10px;
  padding: .55rem 1.2rem;
  font-weight: 600;
}
.btn-pc-outline:hover { background: var(--pc-primary-light); color: var(--pc-primary-dark); }

/* 结果区 */
.pc-result { text-align: center; }
.pc-result .success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--pc-green);
  color: #fff;
  font-size: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}

/* 阅读器 */
.pc-reader-canvas { max-width: 100%; height: auto; box-shadow: var(--pc-shadow); border-radius: 6px; }

/* 页脚 */
.pc-footer {
  background: var(--pc-card);
  border-top: 1px solid var(--pc-border);
  padding: 1.5rem 0;
  color: var(--pc-muted);
  font-size: .85rem;
}

.pc-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .25rem 1.25rem; margin-top: .75rem;
  padding-top: .75rem; border-top: 1px solid var(--pc-border);
}
.pc-footer-links a {
  color: var(--pc-muted); text-decoration: none; white-space: nowrap;
}
.pc-footer-links a:hover { color: var(--pc-accent); }

/* Toast 定位 */
.pc-toast-wrap { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1080; }

/* 加载遮罩 */
.pc-overlay {
  position: fixed; inset: 0;
  background: var(--pc-overlay-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.pc-overlay .spinner-box {
  background: var(--pc-card);
  border-radius: 12px;
  box-shadow: var(--pc-shadow);
  padding: 1.4rem 1.8rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-weight: 600;
  font-size: .9rem;
}

@media (max-width: 576px) {
  .pc-hero h1 { font-size: 1.8rem; }
}

/* ---------- 工具说明区块（SEO 内容：工具介绍/如何使用/使用场景/常见问题） ---------- */
.pc-docs {
  padding: 2.5rem 0 3.5rem;
}
.pc-docs-inner {
  max-width: 860px;
  margin: 0 auto;
}
.pc-docs-h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.4rem 0 1.4rem;
  line-height: 1.3;
}
.pc-docs-inner > p {
  color: var(--pc-ink);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: .7rem;
}
.pc-docs-inner > p + p { margin-top: -.1rem; }

/* 工具介绍卡片（对齐原站点「关于此工具」：边框卡片 + 段落正文） */
.pc-docs-about {
  border: 2px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: 1.4rem 1.5rem;
  background: var(--pc-card);
}
.pc-docs-about p {
  color: var(--pc-ink);
  opacity: .88;
  font-size: .95rem;
  line-height: 1.8;
  margin: 0;
}
.pc-docs-about p + p { margin-top: .9rem; }

/* 使用步骤（横排 3 步卡片） */
.pc-docs-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.pc-docs-steps li {
  position: relative;
  padding: 1.1rem 1.1rem 1rem 3rem;
  counter-increment: step;
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
}
.pc-docs-steps li::before {
  content: counter(step);
  position: absolute;
  left: .95rem; top: 1rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  font-weight: 700;
  font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.pc-docs-steps li strong {
  display: block;
  font-size: .95rem;
  line-height: 1.6rem;
  margin-bottom: .3rem;
}
.pc-docs-steps li p {
  color: var(--pc-muted);
  font-size: .86rem;
  line-height: 1.6;
  margin: 0;
}

/* 使用场景卡片 */
.pc-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.pc-docs-card {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.pc-docs-card h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.pc-docs-card p {
  color: var(--pc-muted);
  font-size: .86rem;
  line-height: 1.6;
  margin: 0;
}

/* 常见问题 */
.pc-docs-faq details {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  margin-bottom: .7rem;
}
.pc-docs-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  color: var(--pc-ink);
  list-style: none;
}
.pc-docs-faq summary::-webkit-details-marker { display: none; }
.pc-docs-faq summary::after {
  content: '+';
  float: right;
  color: var(--pc-primary);
  font-weight: 700;
  font-size: 1.1rem;
}
.pc-docs-faq details[open] summary::after { content: '−'; }
.pc-docs-faq details p {
  color: var(--pc-muted);
  font-size: .9rem;
  line-height: 1.65;
  margin: .6rem 0 0;
}

@media (max-width: 767.98px) {
  .pc-docs-grid { grid-template-columns: 1fr; }
  .pc-docs-steps { grid-template-columns: 1fr; }
}

/* ============ 关于/条款等文档页 UI ============ */
.pc-docs-hero {
  position: relative;
  background: linear-gradient(135deg, var(--pc-accent) 0%, var(--pc-accent2, #8b5cf6) 100%);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.pc-docs-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 15%, rgba(255,255,255,.22), transparent 60%);
  pointer-events: none;
}
.pc-docs-hero .pc-docs-hero-ic {
  font-size: 2.4rem; line-height: 1; margin-bottom: .7rem;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}
.pc-docs-hero h1 { font-size: 1.55rem; font-weight: 800; margin: 0 0 .5rem; color: #fff; }
.pc-docs-hero p { margin: 0 auto; max-width: 560px; font-size: .92rem; opacity: .92; line-height: 1.7; }
.pc-docs-hero .pc-docs-hero-badge {
  display: inline-block; margin-top: .9rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: .25rem .9rem;
  font-size: .78rem; font-weight: 600;
  backdrop-filter: blur(4px);
}

.pc-docs-body {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--pc-ink, #1f2937);
}
.pc-docs-body h2 {
  font-size: 1.05rem; font-weight: 700; margin: 1.9rem 0 .8rem;
  padding-left: .75rem;
  border-left: 4px solid var(--pc-accent);
  line-height: 1.4;
}
.pc-docs-body h2:first-child { margin-top: 0; }
.pc-docs-body p { margin: 0 0 .85rem; }
.pc-docs-body ul, .pc-docs-body ol { padding-left: 1.25rem; margin: 0 0 .85rem; }
.pc-docs-body li { margin-bottom: .4rem; }
.pc-docs-body a { color: var(--pc-accent); }
.pc-docs-body strong { font-weight: 700; }

/* 更新日期行 */
.pc-docs-updated {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--pc-muted); font-size: .82rem;
  margin-bottom: 1.1rem;
}

/* 顶部锚点目录（胶囊导航） */
.pc-docs-toc {
  display: flex; flex-wrap: wrap; gap: .5rem;
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: .8rem .95rem;
  margin-bottom: 1.25rem;
}
.pc-docs-toc a {
  font-size: .8rem; font-weight: 600;
  color: var(--pc-muted);
  text-decoration: none;
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  padding: .28rem .8rem;
  transition: all .15s;
}
.pc-docs-toc a:hover { color: #fff; background: var(--pc-accent); border-color: var(--pc-accent); }

/* 提示框 */
.pc-docs-note {
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-left: 4px solid var(--pc-accent);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin: 1rem 0;
  font-size: .88rem; line-height: 1.7;
}

/* 关于页：特点图标卡片 */
.pc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 1rem 0; }
.pc-feat-card {
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.pc-feat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.pc-feat-card .ic { font-size: 1.7rem; line-height: 1; margin-bottom: .55rem; }
.pc-feat-card h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; color: var(--pc-ink, #1f2937); }
.pc-feat-card p { font-size: .8rem; line-height: 1.6; color: var(--pc-muted); margin: 0; }

/* 联系信息框 */
.pc-docs-contact {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1rem;
}
.pc-docs-contact a.pc-contact-item {
  flex: 1 1 220px;
  display: flex; align-items: center; gap: .6rem;
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: .85rem 1rem;
  color: var(--pc-ink, #1f2937);
  text-decoration: none;
  font-size: .9rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.pc-docs-contact a.pc-contact-item:hover { border-color: var(--pc-accent); background: var(--pc-card); }
.pc-docs-contact .ic { font-size: 1.3rem; }

/* 反馈页表单卡片 */
.pc-feedback-card {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
}
.pc-feedback-card .form-label { font-weight: 600; font-size: .9rem; }
.pc-feedback-card .form-control, .pc-feedback-card .form-select {
  border-radius: 10px;
  padding: .6rem .85rem;
}
.pc-feedback-card .btn-pc { padding: .6rem 1.6rem; font-weight: 600; border-radius: 10px; }
.pc-feedback-card .btn-pc-outline { padding: .6rem 1.4rem; font-weight: 600; border-radius: 10px; }

@media (max-width: 767.98px) {
  .pc-feat-grid { grid-template-columns: 1fr; }
  .pc-docs-body { padding: 1.15rem 1.1rem; }
  .pc-docs-hero { padding: 1.6rem 1rem; }
}

/* ---------- 历史 / 收藏 ---------- */
.pc-nav-link { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pc-nav-link .pc-nav-ic { font-size: .9rem; }
.pc-title-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pc-title-row h1, .pc-title-row h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.pc-title-row .btn-pc-outline { flex: 0 0 auto; white-space: nowrap; }
.pc-fav-wrap { position: relative; }
.pc-fav-remove {
  position: absolute;
  top: .4rem;
  right: .6rem;
  z-index: 2;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(127, 127, 127, .18);
  color: var(--pc-muted);
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pc-fav-remove:hover { background: rgba(220, 53, 69, .25); color: #dc3545; }

/* ---------- UI 优化批次 ---------- */

/* 返回顶部按钮（app.js 生成，滚动后显示） */
.pc-back-top {
  position: fixed;
  right: 1.25rem;
  bottom: 4.5rem;
  z-index: 1050;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-primary);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: var(--pc-shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.pc-back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.pc-back-top:hover { background: var(--pc-primary-light); }

/* 首页 TAB 横向滚动提示（移动端可滚动时显示"›"渐隐指示，JS 控制） */
.pc-tabs-wrap { position: relative; }
.pc-tabs-wrap .tabs-more {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3.4rem; height: 2.8rem;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .3rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pc-bg) 72%);
  color: var(--pc-primary);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity .2s ease;
}
.pc-tabs-wrap.can-scroll .tabs-more { opacity: 1; }
@media (min-width: 768px) { .pc-tabs-wrap .tabs-more { display: none; } }

/* 键盘焦点可见性（WCAG 2.4.7） */
.pc-mm-item:focus-visible,
.pc-tab:focus-visible,
.pc-tool-card:focus-visible,
.pc-fav-remove:focus-visible,
.pc-back-top:focus-visible {
  outline: 2px solid var(--pc-primary);
  outline-offset: 2px;
}

/* Toast 进入动画 */
.pc-toast-item { animation: pc-toast-in .22s ease; }
@keyframes pc-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* 工具页「相关工具」推荐区（app.js 注入） */
.pc-related { padding: 0 0 2.5rem; }
.pc-related .pc-section-title { margin-top: 1.8rem; }

/* 首页「最近使用」横条（基于本地历史记录） */
.pc-recent-row {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  -webkit-overflow-scrolling: touch;
}
.pc-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  color: var(--pc-ink);
  text-decoration: none !important;
  font-size: .85rem;
  font-weight: 500;
  padding: .45rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.pc-recent-chip:hover { border-color: rgba(59, 91, 219, .45); color: var(--pc-primary); }

/* 全站搜索兜底提示条 */
.pc-global-note {
  background: var(--pc-primary-light);
  color: var(--pc-primary);
  border: 1px solid rgba(59, 91, 219, .25);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-size: .88rem;
  font-weight: 500;
  margin: .4rem 0 0;
}
html[data-bs-theme="dark"] .pc-global-note { border-color: rgba(92, 124, 250, .35); }

/* 搜索有结果时，其它分类匹配提示条 */
.pc-more-hint {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--pc-muted);
}
.pc-more-hint .pc-more-link {
  color: var(--pc-primary);
  text-decoration: none;
  font-weight: 600;
  margin: 0 .1rem;
}
.pc-more-hint .pc-more-link:hover { text-decoration: underline; }

/* ============================================================
   工具页全局 UI 精修（662 页共享，一次生效）
   ============================================================ */

/* 工作区呼吸感与面板质感 */
.pc-workspace { padding: 2.25rem 0 3.25rem; }
.pc-panel {
  padding: 1.75rem 1.9rem;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
}

/* 面板标题区：标题 + 渐变分隔线 + 副标题 */
.pc-panel h1, .pc-panel h2 {
  font-size: 1.5rem;
  letter-spacing: .01em;
  line-height: 1.35;
  margin-bottom: .55rem;
}
.pc-panel .sub {
  font-size: .92rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--pc-border);
  position: relative;
}
.pc-panel .sub::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 64px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pc-accent), transparent);
}

/* 表单控件统一精修 */
.pc-workspace .form-label { font-weight: 600; color: var(--pc-ink); font-size: .9rem; }
.pc-workspace .form-control,
.pc-workspace .form-select {
  border-radius: 10px;
  border: 1px solid var(--pc-border);
  padding: .6rem .9rem;
  background-color: var(--pc-card);
  color: var(--pc-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pc-workspace .form-control:focus,
.pc-workspace .form-select:focus {
  border-color: var(--pc-accent);
  box-shadow: 0 0 0 .2rem rgba(112,72,232,.12);
}
html[data-bs-theme="dark"] .pc-workspace .form-control:focus,
html[data-bs-theme="dark"] .pc-workspace .form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(154,124,240,.18);
}
.pc-workspace textarea.form-control { line-height: 1.7; }

/* 输出区：等宽字体 + 浅色底，与输入区分开 */
.pc-workspace textarea[readonly], .pc-workspace textarea#output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .88rem;
  background: var(--pc-bg);
}
.pc-workspace textarea[readonly]:focus, .pc-workspace textarea#output:focus {
  background: var(--pc-bg);
  border-color: var(--pc-accent);
  box-shadow: 0 0 0 .2rem rgba(112,72,232,.12);
}

/* 按钮质感提升 */
.btn-pc {
  box-shadow: 0 2px 8px rgba(112,72,232,.28);
}
.btn-pc:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(112,72,232,.25); }
.btn-pc-outline {
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-pc-outline:active { transform: translateY(1px); }

/* 工具区小按钮与控件行间距 */
.pc-workspace .btn { border-radius: 10px; }
.pc-workspace .btn-sm { border-radius: 8px; }

/* 拖拽上传区增强 */
.pc-dropzone {
  border-radius: 16px;
  transition: all .18s ease;
}
.pc-dropzone:hover, .pc-dropzone.dragover {
  box-shadow: 0 6px 20px rgba(112,72,232,.12);
  transform: translateY(-1px);
}
.pc-dropzone .dz-icon { transition: transform .18s ease; }
.pc-dropzone:hover .dz-icon { transform: scale(1.08); }

/* 结果图标与成功区 */
.pc-result .success-icon { box-shadow: 0 6px 16px rgba(34,197,94,.28); }

/* 说明区（关于此工具/如何使用/场景/FAQ）精修 */
.pc-docs-h2 {
  font-size: 1.28rem;
  margin: 2.6rem 0 1.2rem;
  position: relative;
  padding-left: .8rem;
}
.pc-docs-h2::before {
  content: '';
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 2px;
  background: var(--pc-accent);
}
.pc-docs-about {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.pc-docs-card { transition: transform .15s ease, box-shadow .15s ease; }
.pc-docs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}
.pc-docs-faq details { transition: border-color .15s ease, box-shadow .15s ease; }
.pc-docs-faq details:hover { border-color: var(--pc-accent); box-shadow: 0 2px 10px rgba(16,24,40,.05); }

/* 相关工具卡片 hover 微提升（与首页一致） */
.pc-related .pc-tool-card { transition: transform .15s ease, box-shadow .15s ease; }
.pc-related .pc-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

/* 窄屏适配 */
@media (max-width: 575.98px) {
  .pc-panel { padding: 1.15rem 1.05rem; border-radius: 14px; }
  .pc-panel h1, .pc-panel h2 { font-size: 1.25rem; }
  .pc-workspace { padding: 1.4rem 0 2.2rem; }
}