/* ============================================================
   Base64 编码解码（b64- 前缀）
   主题色遵循全站科技蓝；功能色：复制成功绿 #16a34a、清空红 #e11d48
   ============================================================ */

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

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

.b64-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 */
}

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

.b64-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)); /* 12px */
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

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

/* ---------- 操作按钮行 ---------- */
.b64-actions {
  display: flex;
  gap: calc(1.6 * var(--u)); /* 12px */
  margin-top: calc(2 * var(--u)); /* 15px */
}

.b64-btn {
  flex: 1;
  height: calc(6.4 * var(--u)); /* 48px */
  font-size: calc(2.6667 * var(--u)); /* 20px */
  font-weight: 600;
  border-radius: calc(1.6 * var(--u)); /* 12px */
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.b64-btn:active {
  transform: scale(0.97);
}

/* 编码 = 主操作：渐变蓝实心 */
.b64-btn-enc {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 calc(0.8 * var(--u)) calc(2 * var(--u)) rgba(37, 99, 235, 0.25);
}

.b64-btn-enc:hover {
  box-shadow: 0 calc(1 * var(--u)) calc(2.6667 * var(--u)) rgba(37, 99, 235, 0.35);
}

/* 解码 = 次操作：白底蓝边 */
.b64-btn-dec {
  border: 1.5px solid var(--c-main);
  color: var(--c-main);
  background: #fff;
}

.b64-btn-dec:hover {
  background: #eff6ff;
}

/* 清空 = 红底实心（与文本工具家族统一） */
.b64-clear {
  flex: 0 0 auto;
  width: calc(11.2 * var(--u)); /* 84px */
  height: calc(6.4 * var(--u));
  border: none;
  border-radius: calc(1.6 * var(--u));
  font-size: calc(2.6667 * var(--u));
  font-weight: 600;
  color: #fff;
  background: #e11d48;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

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

.b64-clear:active {
  transform: scale(0.97);
}

/* ---------- URL 安全开关 ---------- */
.b64-safe {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u)); /* 7.5px */
  margin-top: calc(1.6 * var(--u)); /* 12px */
  font-size: calc(2.4 * var(--u)); /* 18px */
  color: #64748b;
  cursor: pointer;
  user-select: none;
}

.b64-safe input {
  width: calc(2.9333 * var(--u)); /* 22px */
  height: calc(2.9333 * var(--u));
  accent-color: var(--c-main);
  cursor: pointer;
}

/* ---------- 错误提示 ---------- */
.b64-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));
}

/* ---------- 结果卡 ---------- */
.b64-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)); /* 15px */
}

.b64-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6 * var(--u));
  flex-wrap: wrap;
}

.b64-result-label {
  font-size: calc(2.6667 * var(--u)); /* 20px */
  font-weight: 700;
  color: var(--c-main);
}

.b64-meta {
  font-size: calc(2.1333 * var(--u)); /* 16px */
  color: #94a3b8;
}

.b64-out {
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.8667 * var(--u)) calc(2 * var(--u));
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: calc(1.2 * var(--u));
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: calc(2.1333 * var(--u)); /* 16px */
  line-height: 1.7;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: calc(32 * var(--u)); /* 240px */
  overflow-y: auto;
}

.b64-copy {
  display: block;
  width: 100%;
  margin-top: calc(1.6 * var(--u));
  height: calc(5.3333 * var(--u)); /* 40px */
  border: 1.5px solid var(--c-main);
  border-radius: calc(1.6 * var(--u));
  background: #fff;
  color: var(--c-main);
  font-size: calc(2.5333 * var(--u)); /* 19px */
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

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

.b64-copy:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- 工具介绍 / 规则说明正文 ---------- */
.b64-intro p {
  font-size: calc(2.5333 * var(--u)); /* 19px */
  color: #475569;
  line-height: 1.85;
}

.b64-intro p + p {
  margin-top: calc(1.6 * var(--u)); /* 12px */
}

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

/* ---------- Base64 编码示例表 ---------- */
.b64-table {
  border: 1px solid #dbeafe;
  border-radius: calc(1.6 * var(--u));
  overflow: hidden;
}

.b64-trow {
  display: grid;
  grid-template-columns: 1.1fr 2.1fr 0.8fr;
  align-items: center;
  gap: calc(1.2 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2 * var(--u));
  font-size: calc(2.2667 * var(--u)); /* 17px */
  color: #475569;
  background: #fff;
}

.b64-trow + .b64-trow {
  border-top: 1px solid #eff6ff;
}

.b64-thead {
  background: #eff6ff;
  font-weight: 700;
  color: #1e40af;
}

.b64-ori {
  word-break: break-all;
}

.b64-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: calc(2 * var(--u)); /* 15px */
  color: #1e293b;
  word-break: break-all;
}