:root, [data-theme="dev-tools"] {
    --color-primary: #10B981;
    --color-primary-hover: #059669;
    --color-bg: #0D1117;
    --color-bg-alt: #161B22;
    --color-text: #E6EDF3;
    --color-text-muted: #7D8590;
    --color-border: #21262D;
    --font-base: 'JetBrains Mono', 'Fira Code', monospace;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --text-base: 15px;
    --leading-base: 1.65;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 3px rgba(0,0,0,.4);
    --shadow-card-hover: 0 4px 16px rgba(16,185,129,.2);
    --hero-bg: #0D1117;
    --hero-title-size: clamp(28px, 4vw, 42px);
}
*, *::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 — 深色终端风格 */
.site-nav { background: #010409; border-bottom: 1px solid #21262D; position: sticky; top: 0; z-index: 100; }
.nav-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.nav-brand::before { content: '> '; color: #10B981; font-weight: 700; font-family: var(--font-mono); font-size: 1rem; }
.nav-logo { height: 28px; }
.nav-site-name { color: #E6EDF3; font-weight: 700; font-size: .95rem; font-family: var(--font-mono); letter-spacing: .02em; }
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a { text-decoration: none; color: #7D8590; font-size: .85rem; transition: color .2s; font-family: var(--font-mono); }
.nav-links a::before { content: '# '; opacity: .4; }
.nav-links a:hover { color: #10B981; }

/* Tool Card (list) */
.tool-card { display: flex; flex-direction: column; padding: 1.25rem; background: var(--color-bg-alt); 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, border-color .2s; }
.tool-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); }
.tool-card-icon { width: 40px; height: 40px; margin-bottom: .875rem; }
.tool-card-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(.8) sepia(1) hue-rotate(100deg); }
.tool-card-name { font-size: .9rem; font-weight: 700; margin-bottom: .35rem; color: var(--color-text); font-family: var(--font-mono); }
.tool-card-desc { font-size: .8rem; 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: 1.75rem; font-weight: 700; margin-bottom: .5rem; color: var(--color-text); font-family: var(--font-mono); }
.tool-description { color: var(--color-text-muted); margin-bottom: 2rem; }
.tool-body { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 2rem; }

/* SEO Content */
.seo-content { margin: 2rem 0; }
.seo-content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--color-text); }
.seo-content p, .seo-content li { color: var(--color-text-muted); margin-bottom: .75rem; }
.seo-content ul, .seo-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }

/* FAQ */
.faq-section { margin: 2rem 0; }
.faq-section h2 { font-size: 1.3rem; 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: var(--color-bg-alt); }
.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 / Disclaimer / Static / Footer / Etc */
.related-tools { margin: 2rem 0; }
.related-tools h2 { font-size: 1.3rem; 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; color: var(--color-text); }
.static-page-container p, .static-page-container li { margin-bottom: .75rem; color: var(--color-text-muted); }
.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: #010409; border-top: 1px solid #21262D; padding: 1.5rem; }
.footer-container { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { text-decoration: none; color: #7D8590; font-size: .8rem; font-family: var(--font-mono); }
.footer-links a:hover { color: #10B981; }
.footer-copyright { font-size: .75rem; color: #484F58; font-family: var(--font-mono); }
.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); font-family: var(--font-mono); }
.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: #0D1117; border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-family: var(--font-mono); 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: 1rem; }
@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; }