/* ============================================
   Hash 生成器样式
   ============================================ */

.hg-page-header { margin-bottom: 24px; }
.hg-page-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 8px 0; letter-spacing: -0.5px; }
.hg-page-desc { font-size: 15px; color: #6b7280; margin: 0 0 12px 0; }
.hg-feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hg-tag { display: inline-block; padding: 3px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 12px; color: #4b5563; font-family: 'SF Mono', Monaco, monospace; }

/* 模式切换 */
.hg-mode-card { margin-bottom: 20px; padding: 20px; }
.hg-mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid #f3f4f6; padding-bottom: 12px; }
.hg-mode-tab { padding: 8px 20px; border: none; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.2s ease; }
.hg-mode-tab:hover { background: #f9fafb; color: #374151; }
.hg-mode-tab.active { background: #eff6ff; color: #3b82f6; }
.hg-mode-panel { display: none; }
.hg-mode-panel.active { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* 文本输入 */
.hg-input-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.hg-section-title { font-size: 16px; font-weight: 600; color: #111827; margin: 0; }
.hg-input-actions { display: flex; gap: 8px; align-items: center; }
.hg-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; cursor: pointer; }
.hg-checkbox input { margin: 0; }
.hg-textarea { width: 100%; min-height: 120px; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-family: 'SF Mono', Monaco, monospace; font-size: 13px; line-height: 1.6; resize: vertical; transition: all 0.2s ease; background: #ffffff; color: #111827; }
.hg-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.hg-char-count { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: #9ca3af; }

/* 文件拖拽 */
.hg-drop-zone { border: 2px dashed #d1d5db; border-radius: 12px; padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s ease; background: #f9fafb; }
.hg-drop-zone:hover, .hg-drop-zone.dragover { border-color: #3b82f6; background: #eff6ff; }
.hg-drop-icon { width: 48px; height: 48px; color: #9ca3af; margin: 0 auto 16px; }
.hg-drop-text { font-size: 16px; font-weight: 500; color: #374151; margin: 0 0 8px; }
.hg-drop-hint { font-size: 13px; color: #9ca3af; margin: 0; }
.hg-file-input { display: none; }

.hg-file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.hg-file-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f9fafb; border-radius: 10px; border: 1px solid #e5e7eb; }
.hg-file-icon { width: 36px; height: 36px; border-radius: 8px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hg-file-icon svg { width: 20px; height: 20px; color: #6b7280; }
.hg-file-info { flex: 1; min-width: 0; }
.hg-file-name { font-size: 14px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-file-size { font-size: 12px; color: #9ca3af; }
.hg-file-remove { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all 0.2s ease; }
.hg-file-remove:hover { background: #fef2f2; color: #ef4444; }

/* 校验对比 */
.hg-compare-inputs { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.hg-compare-field { flex: 1; min-width: 200px; }
.hg-compare-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; }
.hg-compare-input { width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-family: 'SF Mono', Monaco, monospace; font-size: 13px; transition: all 0.2s ease; }
.hg-compare-input:focus { outline: none; border-color: #3b82f6; }
.hg-compare-value { padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-family: 'SF Mono', Monaco, monospace; font-size: 13px; color: #6b7280; background: #f9fafb; min-height: 44px; word-break: break-all; }
.hg-compare-vs { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #9ca3af; padding-top: 20px; }
.hg-compare-status { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; text-align: center; }
.hg-compare-status.match { background: #ecfdf5; color: #10b981; }
.hg-compare-status.mismatch { background: #fef2f2; color: #ef4444; }
.hg-compare-status.waiting { background: #f9fafb; color: #9ca3af; }

/* HMAC */
.hg-hmac-card { margin-bottom: 20px; }
.hg-hmac-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.hg-hmac-toggle { font-size: 14px; font-weight: 500; color: #374151; }
.hg-hmac-hint { font-size: 12px; color: #9ca3af; }
.hg-hmac-key-wrap { margin-top: 12px; }
.hg-hmac-input { width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; }
.hg-hmac-input:focus { outline: none; border-color: #3b82f6; }

/* 算法结果卡片 */
.hg-algorithms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
.hg-algo-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; transition: all 0.2s ease; }
.hg-algo-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: #d1d5db; }
.hg-algo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hg-algo-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: 'SF Mono', Monaco, monospace; }
.hg-badge-md5 { background: #fef3c7; color: #92400e; }
.hg-badge-sha1 { background: #dbeafe; color: #1e40af; }
.hg-badge-sha256 { background: #dcfce7; color: #166534; }
.hg-badge-sha512 { background: #f3e8ff; color: #6b21a8; }
.hg-badge-crc32 { background: #fce7f3; color: #9d174d; }
.hg-algo-result { font-family: 'SF Mono', Monaco, monospace; font-size: 13px; line-height: 1.6; color: #374151; word-break: break-all; padding: 12px; background: #f9fafb; border-radius: 8px; min-height: 44px; }
.hg-algo-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #9ca3af; }

/* 复制按钮 */
.hg-copy-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #ffffff; cursor: pointer; transition: all 0.2s ease; }
.hg-copy-btn:hover { background: #f9fafb; }
.hg-copy-btn svg { width: 14px; height: 14px; color: #6b7280; }
.hg-copy-btn.copied { background: #ecfdf5; border-color: #10b981; }
.hg-copy-btn.copied svg { color: #10b981; }

/* 使用说明和 FAQ */
.hg-guide-content { font-size: 14px; line-height: 1.8; color: #374151; }
.hg-guide-content h4 { font-size: 15px; font-weight: 600; color: #111827; margin: 20px 0 12px 0; }
.hg-guide-content p { margin: 0 0 12px 0; }
.hg-guide-list { margin: 0 0 16px 0; padding-left: 20px; }
.hg-guide-list li { margin-bottom: 8px; }
.hg-guide-list strong { color: #111827; }

.hg-faq-list { display: flex; flex-direction: column; gap: 12px; }
.hg-faq-item { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; transition: all 0.2s ease; }
.hg-faq-item:hover { border-color: #d1d5db; }
.hg-faq-item[open] { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.hg-faq-question { padding: 16px 20px; font-size: 14px; font-weight: 500; color: #111827; cursor: pointer; list-style: none; position: relative; user-select: none; }
.hg-faq-question::-webkit-details-marker { display: none; }
.hg-faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; }
.hg-faq-item[open] .hg-faq-question::after { content: '−'; color: #3b82f6; }
.hg-faq-answer { padding: 0 20px 16px 20px; font-size: 14px; line-height: 1.7; color: #6b7280; }
.hg-faq-answer p { margin: 0; }

/* 响应式 */
@media (max-width: 640px) {
    .hg-page-title { font-size: 22px; }
    .hg-mode-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .hg-algorithms { grid-template-columns: 1fr; }
    .hg-compare-inputs { flex-direction: column; }
    .hg-compare-vs { padding-top: 0; }
}

/* 暗色主题 */
@media (prefers-color-scheme: dark) {
    .hg-tag { background: #374151; border-color: #4b5563; color: #d1d5db; }
    .hg-textarea { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .hg-drop-zone { background: #1f2937; border-color: #374151; }
    .hg-drop-zone:hover, .hg-drop-zone.dragover { background: #1e3a5f; border-color: #3b82f6; }
    .hg-file-item { background: #1f2937; border-color: #374151; }
    .hg-compare-input, .hg-compare-value { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .hg-hmac-input { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .hg-algo-card { background: #1f2937; border-color: #374151; }
    .hg-algo-result { background: #111827; }
    .hg-faq-item { border-color: #374151; }
}