:root, [data-theme="convert-tools"] {
    --color-primary: #0891B2;
    --color-primary-hover: #0E7490;
    --color-bg: #F0FDFF;
    --color-bg-alt: #E0F7FA;
    --color-text: #0C2340;
    --color-text-muted: #5B7FA6;
    --color-border: #B2EBF2;
    --font-base: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', Menlo, monospace;
    --text-base: 16px;
    --leading-base: 1.6;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 4px rgba(8,145,178,.08);
    --shadow-card-hover: 0 6px 24px rgba(8,145,178,.18);
    --hero-bg: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%);
    --hero-title-size: clamp(28px, 5vw, 44px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-base); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); }

/* Nav — 白底青色 accent */
.site-nav { background: #fff; border-bottom: 3px solid var(--color-primary); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(8,145,178,.08); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.nav-logo { height: 30px; }
.nav-site-name { color: #0891B2; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: #5B7FA6; font-size: .9rem; font-weight: 500; padding: .3rem .6rem; border-radius: 4px; transition: background .15s, color .15s; }
.nav-links a:hover { background: #E0F7FA; color: #0891B2; }

/* Tool Card */
.tool-card { display: flex; flex-direction: column; padding: 1.5rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: box-shadow .2s, transform .2s; }
.tool-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.tool-card-icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.tool-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.tool-card-name { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: var(--color-text); }
.tool-card-desc { font-size: .875rem; color: var(--color-text-muted); line-height: 1.5; }

/* Tool Page */
.tool-page { padding: 2rem 1.5rem; }
.tool-page-container { max-width: 860px; margin: 0 auto; }
.tool-title { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; color: var(--color-text); }
.tool-description { color: var(--color-text-muted); margin-bottom: 2rem; }
.tool-body { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 2rem; }

/* SEO / FAQ / Related / Static / Footer */
.seo-content { margin: 2rem 0; }
.seo-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--color-text); }
.seo-content p, .seo-content li { color: var(--color-text); margin-bottom: .75rem; }
.seo-content ul, .seo-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.faq-section { margin: 2rem 0; }
.faq-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-text); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: .5rem; overflow: hidden; background: #fff; }
.faq-item summary { padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--color-text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { border-bottom: 1px solid var(--color-border); }
.faq-item p { padding: 1rem 1.25rem; color: var(--color-text-muted); }
.related-tools { margin: 2rem 0; }
.related-tools h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-text); }
.disclaimer { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-size: .875rem; color: var(--color-text-muted); margin: 2rem 0; }
.static-page { padding: 3rem 1.5rem; }
.static-page-container { max-width: 800px; margin: 0 auto; }
.static-page-container h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--color-text); }
.static-page-container h2 { font-size: 1.4rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.static-page-container p, .static-page-container li { margin-bottom: .75rem; }
.static-page-container ul { padding-left: 1.5rem; }
.static-contact-email { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .95rem; }
.static-contact-email a { color: var(--color-primary); text-decoration: none; }
.static-contact-email a:hover { text-decoration: underline; }
.site-footer { background: #0C2340; border-top: none; padding: 2rem 1.5rem; }
.footer-container { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1rem; }
.footer-links a { text-decoration: none; color: rgba(255,255,255,.5); font-size: .875rem; }
.footer-links a:hover { color: #0891B2; }
.footer-copyright { font-size: .8rem; color: rgba(255,255,255,.3); }
.ad-slot { margin: 1.5rem 0; }
.error-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 128px); }
.error-container { text-align: center; }
.error-container h1 { font-size: 6rem; font-weight: 800; color: var(--color-primary); }
.error-container p { font-size: 1.2rem; color: var(--color-text-muted); margin: 1rem 0 2rem; }
.btn-primary { display: inline-block; padding: .75rem 1.5rem; background: var(--color-primary); color: white; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; transition: background .2s; }
.btn-primary:hover { background: var(--color-primary-hover); }
.no-tools { text-align: center; color: var(--color-text-muted); padding: 3rem; }
.tools-section { padding: 3rem 1.5rem; }
.tools-container { max-width: 1200px; margin: 0 auto; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tools-grid { grid-template-columns: 1fr; } }

/* ===== Tool UI ===== */
/* ===================================================
   Tool UI — 与主题 CSS 变量完全对齐
   主题变量：--color-bg, --color-bg-alt, --color-border,
             --color-primary, --color-text, --color-text-muted,
             --radius-sm, --radius-md, --font-mono
   =================================================== */

/* ===== 布局辅助 ===== */
.tool-section   { margin-bottom: 20px; }
.tool-row       { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.tool-field     { display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; min-width: 0; }

/* ===== 标签 & 提示 ===== */
.tool-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.tool-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }

/* ===== 输入框 ===== */
.tool-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color .15s;
  box-sizing: border-box;
  min-width: 0;
}
.tool-input:focus   { outline: none; border-color: var(--color-primary); }
.tool-range         { width: 100%; cursor: pointer; accent-color: var(--color-primary); }

.tool-textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .15s;
  box-sizing: border-box;
}
.tool-textarea:focus { outline: none; border-color: var(--color-primary); }

.tool-mono { font-family: var(--font-mono, 'Fira Code', monospace); font-size: 13px; }

/* ===== 按钮 ===== */
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, transform .08s;
  box-sizing: border-box;
}
.tool-btn:active            { transform: scale(.97); }
.tool-btn-primary           { background: var(--color-primary); color: #fff; }
.tool-btn-primary:hover     { filter: brightness(1.1); }
.tool-btn-secondary         { background: var(--color-bg-alt); color: var(--color-text); border: 1.5px solid var(--color-border); }
.tool-btn-secondary:hover   { border-color: var(--color-primary); color: var(--color-primary); }
.tool-btn-ghost             { background: transparent; color: var(--color-text-muted); border: 1.5px solid var(--color-border); }
.tool-btn-ghost:hover       { color: var(--color-text); border-color: var(--color-text-muted); }
.tool-btn-group             { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.tool-link                  { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0; font-family: inherit; }

/* ===== 错误提示 ===== */
.tool-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #b91c1c;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ===== 结果框 ===== */
.tool-result-box {
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
}

/* ===== 统计格子 ===== */
.tool-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.tool-stat {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.tool-stat span  { display: block; font-size: 26px; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.tool-stat label { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; font-weight: 500; }

/* ===== 大时间戳数字 ===== */
.tool-stat-hero  { margin-bottom: 20px; }
.tool-stat-big   { font-size: 36px; font-weight: 700; color: var(--color-primary); font-family: var(--font-mono, monospace); letter-spacing: .04em; }

/* ===== 图片拖放区 ===== */
.tool-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 16px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 14px;
}
.tool-dropzone.drag-over { border-color: var(--color-primary); background: var(--color-bg); }

/* ===== 图片预览 ===== */
.tool-preview-wrap   { margin-bottom: 16px; }
.tool-preview-img    { max-width: 100%; max-height: 300px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); display: block; margin-bottom: 10px; }
.tool-preview-info   { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; }

/* ===== 比较布局（图片压缩） ===== */
.tool-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 600px) { .tool-compare { grid-template-columns: 1fr; } }

/* ===== Diff ===== */
.tool-diff-inputs  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .tool-diff-inputs { grid-template-columns: 1fr; } }

.tool-diff-output  {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow: auto;
}
.tool-diff-output ins { background: #d1fae5; color: #065f46; text-decoration: none; border-radius: 2px; padding: 0 2px; }
.tool-diff-output del { background: #fee2e2; color: #991b1b;                         border-radius: 2px; padding: 0 2px; }
.tool-diff-summary { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; }

/* ===== Hash 行 ===== */
.tool-hash-results      { display: flex; flex-direction: column; gap: 10px; }
.tool-hash-row          { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tool-hash-label        { font-size: 12px; font-weight: 700; color: var(--color-text-muted); width: 64px; flex-shrink: 0; }
.tool-hash-row .tool-input { flex: 1; min-width: 0; font-size: 12px; }
.tool-copy-btn          { flex-shrink: 0; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text); font-family: inherit; transition: border-color .15s; }
.tool-copy-btn:hover    { border-color: var(--color-primary); color: var(--color-primary); }

/* ===== 单位转换格子 ===== */
.tool-unit-grid     { display: flex; flex-direction: column; gap: 10px; }
.tool-unit-row      { display: flex; align-items: center; gap: 12px; }
.tool-unit-label    { font-size: 13px; color: var(--color-text-muted); width: 220px; flex-shrink: 0; line-height: 1.4; }
.tool-unit-row .tool-input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .tool-unit-label { width: 130px; font-size: 12px; } }

/* ===== 正则高亮 ===== */
.tool-highlight-box {
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
}
.tool-highlight-box pre { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-family: inherit; }
.rx-match { background: #fef08a; color: #713f12; border-radius: 3px; padding: 0 2px; }

/* ===== 表格 ===== */
.tool-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tool-table th { background: var(--color-bg-alt); font-weight: 700; text-align: left; }
.tool-table th, .tool-table td { padding: 8px 12px; border: 1px solid var(--color-border); vertical-align: top; }
.tool-table tr:nth-child(even) td { background: var(--color-bg-alt); }

/* ===== 关键词密度条 ===== */
.kd-bar { height: 8px; background: var(--color-primary); border-radius: 4px; min-width: 4px; max-width: 100%; opacity: .7; }

/* ===== SEO 建议框 ===== */
.seo-advice-box { background: var(--color-bg-alt); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; }
.advice-warn  { color: #92400e; font-weight: 600; }
.advice-info  { color: #1e40af; font-weight: 600; }
.advice-ok    { color: #065f46; font-weight: 600; }
.advice-best  { color: #5b21b6; font-weight: 700; }

/* ===== 长度徽章（meta 分析器） ===== */
.len-badge  { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; margin-top: 6px; }
.len-ok     { background: #d1fae5; color: #065f46; }
.len-short  { background: #fef3c7; color: #92400e; }
.len-long   { background: #fee2e2; color: #991b1b; }
.len-empty  { background: #f3f4f6; color: #6b7280; }

/* ===== OG 预览卡 ===== */
.og-card      { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; max-width: 540px; margin-bottom: 16px; background: var(--color-bg); }
.og-card-body { padding: 12px 16px; }
.og-site      { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.og-title     { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.og-desc      { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }

/* ===== Meta 分析字段 ===== */
.tool-meta-field { margin-bottom: 20px; }