/* ============================================================
   MD5 加密 / 哈希计算（hs- 前缀）
   主题色遵循全站科技蓝；功能色：复制成功绿 #16a34a、清空红 #e11d48
   ============================================================ */

/* ---------- 工具区 ---------- */
.hs-tool {
  margin-top: calc(2.6667 * var(--u)); /* 20px：面包屑下方 */
}

.hs-title {
  text-align: center;
  font-size: calc(3.7333 * var(--u)); /* 28px */
  font-weight: 600;
  color: #2a2a2a;
  line-height: 1.4;
}

.hs-sub {
  text-align: center;
  font-size: calc(2.6667 * var(--u)); /* 20px */
  color: #9a938f;
  margin-top: calc(0.8 * var(--u)); /* 6px */
  margin-bottom: calc(3.2 * var(--u)); /* 24px */
}

/* ---------- 模式切换 ---------- */
.hs-tabs {
  display: flex;
  gap: calc(1.2 * var(--u)); /* 9px */
  background: #f1f5f9;
  border-radius: calc(1.6 * var(--u));
  padding: calc(0.6667 * var(--u)); /* 5px */
}

.hs-tab {
  flex: 1;
  height: calc(5.8667 * var(--u)); /* 44px */
  border: none;
  border-radius: calc(1.2 * var(--u));
  background: transparent;
  font-size: calc(2.6667 * var(--u)); /* 20px */
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.hs-tab.active {
  background: #fff;
  color: var(--c-main);
  box-shadow: 0 calc(0.4 * var(--u)) calc(1.2 * var(--u)) rgba(30, 58, 138, 0.12);
}

/* ---------- 文本输入 ---------- */
.hs-pane {
  margin-top: calc(2.4 * var(--u)); /* 18px */
}

.hs-label {
  display: block;
  font-size: calc(2.5333 * var(--u)); /* 19px */
  font-weight: 600;
  color: #334155;
  margin-bottom: calc(1.2 * var(--u)); /* 9px */
}

.hs-area {
  width: 100%;
  min-height: calc(13.3333 * var(--u)); /* 100px */
  padding: calc(1.8667 * var(--u)) calc(2 * var(--u)); /* 14px 15px */
  font-size: calc(2.4 * var(--u)); /* 18px */
  font-family: inherit;
  line-height: 1.6;
  color: #333;
  background: #fff;
  border: 1.5px solid #bfdbfe;
  border-radius: calc(1.6 * var(--u));
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hs-area:focus {
  border-color: var(--c-main);
  box-shadow: 0 0 0 calc(0.4 * var(--u)) rgba(37, 99, 235, 0.12);
}

.hs-area::placeholder {
  color: #b8b0ac;
}

/* 字符数 + 清空一行 */
.hs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6 * var(--u));
  margin-top: calc(1.3333 * var(--u)); /* 10px */
}

.hs-meta {
  font-size: calc(2.2667 * var(--u)); /* 17px */
  color: #94a3b8;
}

.hs-clear {
  border: none;
  border-radius: calc(1.3333 * var(--u));
  padding: calc(1 * var(--u)) calc(2.6667 * var(--u)); /* 7.5px 20px */
  font-size: calc(2.4 * var(--u)); /* 18px */
  font-weight: 600;
  color: #fff;
  background: #e11d48;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.hs-clear:hover {
  background: #c11136;
}

.hs-clear:active {
  transform: scale(0.96);
}

/* ---------- 文件拖拽区 ---------- */
.hs-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.0667 * var(--u)); /* 8px */
  padding: calc(5.3333 * var(--u)) calc(2.6667 * var(--u)); /* 40px 20px */
  border: 2px dashed #93c5fd;
  border-radius: calc(2 * var(--u));
  background: #f8faff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.hs-drop:hover,
.hs-drop.drag {
  border-color: var(--c-main);
  background: #eff6ff;
}

.hs-drop-icon {
  font-size: calc(6 * var(--u)); /* 45px */
  color: var(--c-accent);
}

.hs-drop-main {
  font-size: calc(2.6667 * var(--u)); /* 20px */
  font-weight: 600;
  color: #1e40af;
}

.hs-drop-sub {
  font-size: calc(2.2667 * var(--u)); /* 17px */
  color: #94a3b8;
}

.hs-fileinfo {
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.3333 * var(--u)) calc(2 * var(--u));
  font-size: calc(2.4 * var(--u));
  color: #1e40af;
  background: #eff6ff;
  border-radius: calc(1.2 * var(--u));
  word-break: break-all;
}

.hs-err {
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.3333 * var(--u)) calc(2 * var(--u));
  font-size: calc(2.4 * var(--u));
  color: #e11d48;
  background: #ffe4e6;
  border-radius: calc(1.2 * var(--u));
}

/* ---------- 结果卡 ---------- */
.hs-result {
  margin-top: calc(2.6667 * var(--u)); /* 20px */
  padding: calc(2 * var(--u));
  background: #f8faff;
  border: 1px solid #bfdbfe;
  border-radius: calc(2 * var(--u));
}

.hs-result-title {
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--u));
  font-size: calc(2.5333 * var(--u)); /* 19px */
  font-weight: 700;
  color: var(--c-main);
  margin-bottom: calc(1.6 * var(--u)); /* 12px */
}

.hs-row {
  display: flex;
  align-items: center;
  gap: calc(1.6 * var(--u)); /* 12px */
  padding: calc(1.4667 * var(--u)) 0; /* 11px */
}

.hs-row + .hs-row {
  border-top: 1px dashed #dbeafe;
}

.hs-row-label {
  flex: 0 0 calc(14.6667 * var(--u)); /* 110px：算法名+位宽两行 */
  display: flex;
  flex-direction: column;
  font-size: calc(2.5333 * var(--u)); /* 19px */
  font-weight: 700;
  color: #1e40af;
}

.hs-row-label em {
  font-style: normal;
  font-size: calc(1.8667 * var(--u)); /* 14px */
  font-weight: 400;
  color: #94a3b8;
}

.hs-row-val {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: calc(2 * var(--u)); /* 15px */
  line-height: 1.55;
  color: #1e293b;
  word-break: break-all;
}

.hs-copy {
  flex: 0 0 auto;
  border: 1.5px solid var(--c-main);
  border-radius: calc(1.2 * var(--u));
  background: #fff;
  color: var(--c-main);
  font-size: calc(2.2667 * var(--u)); /* 17px */
  font-weight: 600;
  padding: calc(0.8 * var(--u)) calc(2 * var(--u)); /* 6px 15px */
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hs-copy:hover {
  background: #eff6ff;
}

.hs-copy.ok {
  border-color: #16a34a;
  color: #16a34a;
  background: #f0fdf4;
}

/* 大文件提示 */
.hs-tip {
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.3333 * var(--u)) calc(2 * var(--u));
  font-size: calc(2.2667 * var(--u));
  color: #b45309;
  background: #fffbeb;
  border-radius: calc(1.2 * var(--u));
}

/* ---------- 介绍 / 说明正文（淡蓝底卡片） ---------- */
.hs-intro {
  background: #f8faff;
  border: 1px solid #dbeafe;
  border-radius: calc(2 * var(--u));
  padding: calc(2.6667 * var(--u)) calc(2.6667 * var(--u)); /* 20px */
}

.hs-intro p {
  font-size: calc(2.5333 * var(--u)); /* 19px */
  color: #475569;
  line-height: 1.85;
}

.hs-intro p + p {
  margin-top: calc(1.6 * var(--u));
}

.hs-intro strong {
  color: #1e293b;
}