/* 口算/单位换算工具页样式 */
.tool-page { max-width: 800px; margin: 0 auto; padding: 20px; }

/* 工具区 - 首屏 */
.tool-controls {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.control-group label {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}
.control-group select,
.control-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.control-group input[type="text"] {
  width: 120px;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary {
  background: #667eea;
  color: #fff;
}
.btn-primary:hover { background: #5a6fd6; }
.btn-secondary {
  background: #fff;
  color: #667eea;
  border: 1px solid #667eea;
}
.btn-secondary:hover { background: #f0f3ff; }
.btn-print {
  background: #28a745;
  color: #fff;
}
.btn-print:hover { background: #218838; }

/* 题目区 */
.problem-area {
  column-count: 3;
  column-gap: 24px;
  margin: 24px 0;
  font-size: 18px;
  line-height: 2.2;
}
.problem-item {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 4px 0;
}
.problem-num {
  color: #999;
  margin-right: 8px;
  font-size: 14px;
}
.font-large { font-size: 22px; line-height: 2.5; }
.font-xlarge { font-size: 26px; line-height: 2.8; }
.cols-2 { column-count: 2; }
.cols-4 { column-count: 4; }

/* 答案区 */
.answer-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed #ddd;
}
.answer-toggle {
  cursor: pointer;
  color: #667eea;
  font-size: 14px;
  user-select: none;
}
.answer-area {
  column-count: 4;
  column-gap: 16px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 2;
  display: none;
}
.answer-area.show { display: block; }
.answer-item {
  break-inside: avoid;
  margin-bottom: 8px;
}
.answer-num {
  color: #999;
  margin-right: 8px;
  font-size: 13px;
}

/* 内容区 */
.content-section {
  margin: 40px 0;
  padding: 0 20px;
}
.content-section h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #667eea;
}
.content-section p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
}
.content-section ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.content-section li {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
}

/* FAQ */
.faq-section { margin: 40px 0; padding: 0 20px; }
.faq-section h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
}
.faq-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}
.faq-item h3 {
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
}
.faq-item p {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

/* 下一步引导 */
.next-step {
  margin: 48px 0 32px;
  padding: 32px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: 12px;
  text-align: center;
}
.next-step h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
}
.next-step p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.next-step img {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.next-step-body {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 16px;
  text-align: left;
}

.next-step-body p {
  flex: 1;
  margin: 0;
}

.next-step-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.next-step-qr span {
  font-size: 13px;
  color: #666;
}

/* 打印提示 */
.print-tips {
  margin: 24px 0;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  font-size: 13px;
  color: #856404;
  line-height: 1.7;
}
.print-tips strong { display: block; margin-bottom: 6px; }

/* 页脚标识开关 */
.footer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  user-select: none;
}
.footer-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 响应式 */
@media (max-width: 600px) {
  .tool-page { padding: 12px; }
  .tool-controls { padding: 16px; }
  .control-row { gap: 10px; }
  .problem-area { column-count: 2; font-size: 16px; }
  .answer-area { column-count: 3; }
  .btn { padding: 8px 14px; font-size: 14px; }
  .next-step { padding: 20px; }
  .next-step-body { flex-direction: column; gap: 16px; text-align: center; }
  .next-step-qr img { width: 120px; height: 120px; }
}

/* ═══ 练习卷下载页（ziliao.html）═══ */
.zl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:16px; }
.zl-card { padding:18px; background:#f8f9fa; border-radius:10px; display:flex; flex-direction:column; }
.zl-card strong { font-size:15px; color:#333; }
.zl-card p { font-size:13px; color:#888; margin:8px 0 14px; flex:1; line-height:1.5; }
.zl-btn { display:inline-block; padding:8px 18px; background:#5a9e6f; color:#fff !important; border-radius:6px; text-decoration:none; font-size:13px; text-align:center; transition:background 0.2s; align-self:flex-start; }
.zl-btn:hover { background:#48875c; }

/* 双码并排（ziliao.html 引流区：小程序+公众号） */
.next-step-dual { display:flex; gap:32px; margin-top:20px; text-align:left; }
.dual-item { flex:1; display:flex; flex-direction:column; gap:10px; }
.dual-qr { display:flex; align-items:center; gap:14px; }
.dual-qr img { width:120px; height:120px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.1); flex-shrink:0; }
.dual-qr span { font-size:13px; color:#666; }
.dual-item strong { font-size:15px; color:#333; }
.dual-item p { margin:0; font-size:14px; color:#666; line-height:1.6; }
@media (max-width: 700px) {
  .next-step-dual { flex-direction:column; gap:24px; text-align:center; }
  .dual-qr { flex-direction:column; gap:8px; }
  .dual-qr img { width:120px; height:120px; }
}