/* 哈希计算器 - 页面专属样式
   公共部分（header/container/links-section/footer）由 css/style.css 提供 */

/* ---------- 简介卡片 ---------- */
.hc-intro {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-top: 20px;
  line-height: 1.8;
  font-size: 0.95rem;
  color: var(--gray-700);
}
.hc-intro h2 {
  font-size: 1.1rem;
  margin: 18px 0 8px;
  color: var(--gray-900);
}
.hc-intro h2:first-child { margin-top: 0; }
.hc-intro p { margin: 8px 0; }
.hc-intro strong { color: var(--gray-900); }

/* ---------- 双列布局 ---------- */
.hc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.hc-main, .hc-side { min-width: 0; }
.hc-side { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 卡片通用 ---------- */
.hc-card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.hc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.hc-card h3, .hc-side-title, .hc-res-head h3 {
  font-size: 1.05rem;
  color: var(--gray-900);
}

/* 模式切换 pill */
.hc-tabs { display: inline-flex; background: var(--gray-50); border-radius: 20px; padding: 3px; border: 1px solid var(--gray-200); }
.hc-tab {
  padding: 5px 16px;
  border-radius: 17px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}
.hc-tab.active { background: var(--primary); color: #fff; }

/* ---------- 文本输入 ---------- */
#hcInput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gray-800);
  resize: vertical;
  min-height: 130px;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.6;
}
#hcInput:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08); }
.hc-count-row { text-align: right; margin-top: 4px; }
.hc-count-row span { font-size: 0.78rem; color: var(--gray-400); }

/* 快速测试 chips */
.hc-sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.hc-sample-label { font-size: 0.85rem; color: var(--gray-500); }
.hc-chip {
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 16px;
  padding: 4px 13px;
  font-size: 0.8rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.hc-chip:hover { border-color: var(--primary); color: var(--primary); }
.hc-chip-danger:hover { border-color: #dc2626; color: #dc2626; }

/* ---------- 文件模式 ---------- */
.hc-drop {
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  padding: 30px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.hc-drop:hover, .hc-drop:focus-visible, .hc-drop.on {
  border-color: var(--primary);
  background: #eef2ff66;
}
.hc-drop p { margin: 8px 0 0; color: var(--gray-600); font-size: 0.92rem; }
.hc-drop svg { opacity: 0.75; }
.hc-drop-tip { font-size: 0.78rem !important; color: var(--gray-400) !important; }

.hc-file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 14px;
}
.hc-file-meta { font-size: 0.88rem; color: var(--gray-700); word-break: break-all; min-width: 0; }
.hc-file-meta b { color: var(--gray-900); }
.hc-file-meta span { margin-left: 8px; color: var(--gray-400); font-size: 0.78rem; white-space: nowrap; }
.hc-file-error {
  display: block;
  width: 100%;
  font-size: 0.82rem;
  color: #b91c1c;
}

/* ---------- 操作按钮 ---------- */
.hc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.hc-btn-primary {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 26px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
  font-family: inherit;
}
.hc-btn-primary:hover { opacity: 0.92; }
.hc-btn-primary:active { transform: translateY(1px); }
.hc-btn-primary:disabled { opacity: 0.55; cursor: wait; }
.hc-btn-ghost {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 0.92rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.hc-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.hc-btn-mini {
  background: var(--primary);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.hc-btn-mini:hover { background: var(--primary-hover); }

/* ---------- 空结果占位 ---------- */
.hc-empty { text-align: center; padding: 42px 12px; }
.hc-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 28px;
  line-height: 64px;
}
.hc-empty h3 { color: var(--gray-700); margin-bottom: 6px; }
.hc-empty p { color: var(--gray-500); font-size: 0.88rem; }

/* ---------- 结果列表 ---------- */
.hc-results-card { margin-top: 18px; }
.hc-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.hc-stale { font-size: 0.8rem; font-weight: 400; color: #b45309; margin-left: 6px; }

.hc-res-item {
  display: flex;
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--gray-50);
}
.hc-res-meta {
  flex: none;
  width: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.hc-res-name { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); }
.hc-res-bits {
  align-self: flex-start;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4338ca;
  white-space: nowrap;
}
.hc-res-time { font-size: 0.72rem; color: var(--gray-400); }
.hc-res-code {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--gray-900);
  word-break: break-all;
  line-height: 1.55;
  user-select: all;
}
.hc-copy {
  flex: none;
  align-self: center;
  border: 1px solid var(--gray-300);
  background: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.hc-copy:hover { border-color: var(--primary); }
.hc-copy.ok { background: #dcfce7; border-color: #86efac; color: #166534; cursor: default; }

/* ---------- 右侧算法列表 ---------- */
.hc-algo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--gray-200);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.hc-algo:first-of-type { margin-top: 14px; }
.hc-algo:hover { background: var(--gray-50); }
.hc-algo.on { border-left-color: var(--primary); background: #f5f6ff; }
.hc-algo input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--primary);
  flex: none;
}
.hc-algo b { display: block; font-size: 0.9rem; color: var(--gray-900); }
.hc-algo small { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--gray-500); line-height: 1.5; }

/* ---------- 蓝色提示卡 ---------- */
.hc-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--border-radius);
  padding: 16px 18px;
  font-size: 0.85rem;
  color: #1e40af;
}
.hc-note h4 { font-size: 0.95rem; margin-bottom: 8px; }
.hc-note ul { list-style: disc inside; }
.hc-note li { margin-top: 5px; line-height: 1.65; }

/* ---------- SEO 内容区 ---------- */
.hc-seo { margin-top: 26px; }
.hc-seo-h2 {
  font-size: 1.25rem;
  color: var(--gray-900);
  margin: 26px 0 0 4px;
}
.hc-seo-block,.hc-faq { margin-top: 18px; line-height: 1.85; }
.hc-seo-block > h2,.hc-faq > h2 { font-size: 1.2rem; color: var(--gray-900); margin-bottom: 10px; }
.hc-seo-block p,.hc-faq p { color: var(--gray-600); font-size: 0.93rem; margin-top: 8px; }
.hc-seo-block strong,.hc-faq strong { color: var(--gray-900); }

.hc-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.hc-feature { padding: 18px 20px; }
.hc-feature h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  color: var(--gray-800);
}
.hc-feature i {
  display: inline-block;
  width: 5px; height: 18px;
  border-radius: 3px;
  flex: none;
}
.fc-red   { background: #ef4444; }
.fc-blue  { background: #3b82f6; }
.fc-green { background: #10b981; }
.fc-amber { background: #f59e0b; }
.hc-feature p { margin-top: 8px; font-size: 0.85rem; color: var(--gray-600); line-height: 1.75; }

/* FAQ */
.hc-faq details {
  border-bottom: 1px dashed var(--gray-200);
  padding: 10px 0;
}
.hc-faq details:last-child { border-bottom: none; }
.hc-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-800);
  list-style-position: outside;
}
.hc-faq summary::marker { color: var(--primary); }
.hc-faq details p {
  margin-top: 8px;
  font-size: 0.89rem;
  color: var(--gray-600);
  line-height: 1.75;
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hc-layout { grid-template-columns: 1fr; }
  .hc-side { order: -1; }          /* 小屏时算法选择放在输入前面 */
  .hc-side-title { margin-top: 4px; }
}
@media (max-width: 640px) {
  .hc-intro, .hc-card { padding: 16px; }
  .hc-res-item { flex-wrap: wrap; gap: 8px; }
  .hc-res-meta { width: auto; flex-direction: row; align-items: center; }
  .hc-copy { align-self: flex-end; }
  .hc-feature-grid { grid-template-columns: 1fr; }
}