/* ============================================
   Yeo 工具箱 — 工具页通用样式（桌面文具主题）
   ============================================ */
.tool-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.tool-container.twocol {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .tool-container.twocol { grid-template-columns: 1fr; }
}

.tool-input-section label,
.tool-output-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.tool-input-section textarea,
.tool-output-section textarea,
.tool-input-section input[type="text"],
.tool-output-section input[type="number"],
.tool-output-section input[type="text"],
.tool-input-section select,
.tool-output-section select,
.tool-input-section input:not([type="checkbox"]):not([type="range"]):not([type="file"]) {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-family: "SF Mono", "Fira Code", "Consolas", "PingFang SC", monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: var(--transition);
  background: var(--c-paper);
  margin-bottom: 8px;
}
.tool-input-section textarea:focus,
.tool-output-section textarea:focus,
.tool-input-section input:focus,
.tool-output-section input:focus,
.tool-input-section select:focus,
.tool-output-section select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(47,107,94,0.12);
}
.tool-input-section textarea { min-height: 200px; }
.tool-output-section textarea { min-height: 200px; background: var(--c-bg-secondary); }
.tool-input-section input:not([type="checkbox"]):not([type="range"]) { min-height: 44px; }
.tool-output-section input { min-height: 44px; }
.tool-input-section select, .tool-output-section select { width: auto; min-width: 160px; }
.tool-input-section label { display: flex; align-items: center; gap: 8px; }

.tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0;
}

.upload-zone {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--c-paper);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.upload-zone input[type="file"] { display: none; }

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  display: inline-block;
}

/* ---------- 统计 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.stat-card {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
}
.stat-num {
  font-size: 2.2em;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-card div:last-child { font-size: 13px; color: var(--c-text-muted); }

mark {
  background: #f6e7bd;
  color: #20241f;
  padding: 0 2px;
  border-radius: 2px;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--c-border);
  padding: 14px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1em; margin-bottom: 6px; }
.faq-item p { color: var(--c-text-secondary); font-size: 14px; }

/* ---------- Diff 比对 ---------- */
.diff-same { padding: 2px 8px; font-family: "SF Mono", "Fira Code", "Consolas", monospace; font-size: 13px; }
.diff-add { padding: 2px 8px; background: #dcefe6; color: #1d4a3c; font-family: "SF Mono", "Fira Code", "Consolas", monospace; font-size: 13px; }
.diff-del { padding: 2px 8px; background: #f6ded9; color: #6e241a; font-family: "SF Mono", "Fira Code", "Consolas", monospace; font-size: 13px; }
.diff-same code, .diff-add code, .diff-del code { font-family: inherit; }

/* ---------- Markdown 预览 ---------- */
.md-preview { line-height: 1.7; }
.md-preview h1, .md-preview h2, .md-preview h3 { margin: 16px 0 8px; color: var(--c-text); }
.md-preview p { margin-bottom: 10px; }
.md-preview ul, .md-preview ol { margin: 0 0 10px 22px; }
.md-preview code { background: var(--c-bg-tertiary); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.md-preview pre { background: var(--c-code-bg); color: var(--c-code-text); padding: 12px; border-radius: var(--radius); overflow-x: auto; margin-bottom: 10px; }
.md-preview pre code { background: none; padding: 0; color: inherit; }
.md-preview blockquote { border-left: 1px solid var(--c-border); padding-left: 12px; color: var(--c-text-secondary); margin-bottom: 10px; }
.md-preview table { border-collapse: collapse; margin-bottom: 10px; }
.md-preview th, .md-preview td { border: 1px solid var(--c-border); padding: 6px 10px; font-size: 13px; }

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-input-section label { flex-wrap: wrap; }
  .tool-input-section select,
  .tool-output-section select { width: 100%; min-width: 0; }
  .tool-actions .btn { flex: 1 1 auto; min-height: 44px; padding: 12px 10px; }
  .tool-actions .btn-sm { padding: 10px 12px; min-height: 44px; }
  .tool-container input[type="text"],
  .tool-container input[type="number"],
  .tool-container select { max-width: 100%; }
  .tool-container .card label { flex-wrap: wrap; }
  .tool-container .card input,
  .tool-container .card select { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
}