/* ═══════════════════════════════════════════════════
   tools.css · 工具页专属样式
   依赖 css/common.css（主题变量 / 导航 / 卡片 / 按钮 / 动效），
   必须在 common.css 之后引入。
   所有颜色走 CSS 变量，白天黑夜自动适配。
   ═══════════════════════════════════════════════════ */

/* ═══════════ 标签筛选 ═══════════ */
.tools__topbar {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tools__empty {
  margin-top: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ═══════════ 工具卡片网格 ═══════════ */
.tools__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* 卡片：button 语义（点击弹面板），外观对齐主页 .card */
.tool-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color var(--theme-transition), background-color var(--theme-transition);
}

/* hover 上浮，与主页卡片一致；:active 按下反馈走 common.css */
.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.tool-card:active {
  transform: scale(0.97);
}

/* 图标：圆角方块 + 淡樱粉底 */
.tool-card__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tool-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tool-card__name {
  font-size: 1.02rem;
  font-weight: 600;
}

.tool-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.tool-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.tool-card__tag {
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ═══════════ 工具弹层（dialog） ═══════════
   桌面：居中圆角对话框；移动端：底部滑出的 bottom sheet */

.tool-dialog {
  /* 全局 reset 清掉了 UA 的 margin:auto，这里显式恢复居中定位 */
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  max-height: min(85vh, 860px);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* 遮罩：轻微变暗 + 高斯模糊（与移动端菜单遮罩同风格） */
.tool-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 打开动画：淡入 + 轻微上浮（reduced-motion 已被 common.css 全局降级） */
.tool-dialog[open] {
  animation: toolDialogIn 0.32s var(--ease);
}

@keyframes toolDialogIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tool-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--theme-transition);
}

.tool-dialog__title {
  font-size: 1.15rem;
}

.tool-dialog__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease),
    border-color var(--theme-transition), background-color var(--theme-transition);
}

.tool-dialog__close:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  transform: rotate(90deg);
}

/* 弹层内容滚动区 */
.tool-dialog__body {
  padding: 22px;
  overflow-y: auto;
  max-height: calc(min(85vh, 860px) - 70px);
}

/* ── 移动端：bottom sheet 形态 ── */
@media (max-width: 768px) {
  .tool-dialog {
    width: 100vw;
    max-width: none;
    margin: auto auto 0; /* 顶部留白吸收剩余空间 → 贴底 */
    border-radius: 24px 24px 0 0;
    max-height: 88vh;
  }

  .tool-dialog[open] {
    animation: toolSheetIn 0.32s var(--ease);
  }

  @keyframes toolSheetIn {
    from { opacity: 0; transform: translateY(40%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .tool-dialog__body {
    max-height: calc(88vh - 70px);
    padding: 18px 16px;
  }
}

/* 弹层打开时锁定页面滚动（原生 dialog 支持 :has 选择器场景） */
body:has(.tool-dialog[open]) {
  overflow: hidden;
}

/* ═══════════ 通用工具面板 ═══════════ */
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 输入区：跟随主题变量 */
.tool-panel__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  resize: vertical;
  transition: border-color 0.25s var(--ease), background-color var(--theme-transition);
}

.tool-panel__input:focus {
  outline: none;
  border-color: var(--accent);
}

/* 按钮组 */
.tool-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 错误行：红字行内显示，不弹窗 */
.tool-panel__error {
  font-size: 0.85rem;
  color: #e05c74;
}

/* 输出区：比 --bg 深一档的变体（深浅主题自动反相），
   等宽字体，横向可滚动 */
.tool-panel__output {
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 90%, var(--text-primary));
  border: 1px solid var(--border);
  min-height: 44px;
}

.tool-panel__output:empty {
  display: none; /* 没有输出时整块隐藏，保持呼吸感 */
}

.tool-panel__code {
  margin: 0;
  padding: 12px 14px;
  font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-primary);
}

/* ── 输出行（HEX / RGB / HSL、文件 Base64 等） ── */
.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 90%, var(--text-primary));
  border: 1px solid var(--border);
}

.tool-row + .tool-row {
  margin-top: 8px;
}

.tool-row__label {
  flex: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  width: 38px;
}

.tool-row__value {
  flex: 1;
  min-width: 0;
  font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* ── Base64 批量：工具条 / 进度条 / 文件列表 ── */
.b64-batch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.b64-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b64-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.b64-stats {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  min-height: 1.1em;
}

/* 进度条：文案 + 细轨道 */
.b64-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.b64-progress__text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b64-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.b64-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}

/* 文件列表 */
.b64-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.b64-empty {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
  padding: 24px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
}

.b64-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 90%, var(--text-primary));
}

.b64-item__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
}

.b64-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.b64-item__thumb--text {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.b64-item__info {
  flex: 1;
  min-width: 0;
}

.b64-item__name {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b64-item__meta {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b64-item__actions {
  flex: none;
  display: flex;
  gap: 6px;
}

.b64-item__del {
  color: #e05c74;
}

/* 禁用态：转换中 / 未就绪的按钮不可点 */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Base64 文件拖放区 ── */
.tool-drop {
  padding: 28px 16px;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.tool-drop:hover,
.tool-drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tool-preview {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.tool-preview img,
.tool-preview video {
  max-width: 100%;
  max-height: 240px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

.tool-preview__meta {
  margin-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── 模式切换（Base64 文本/文件） ── */
.tool-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}

.tool-modes__btn {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.tool-modes__btn.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

/* ── 颜色选择器（画图式：SV 平面 + 色相滑杆 + 方案库） ── */
.tool-color {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 分区小标题 */
.tool-color__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* SV 平面：底色为当前色相纯色，两层渐变叠加出「右饱和 / 下暗度」 */
.tool-color__plane {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none; /* 拖动选色时不触发页面滚动 */
  background: #ff9eb5; /* JS 实时覆盖为当前色相 */
}

.tool-color__plane::before,
.tool-color__plane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 白→透明：向右饱和度递增 */
.tool-color__plane::before {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

/* 黑→透明：向下亮度递减 */
.tool-color__plane::after {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

/* 准心：跟随选色位置 */
.tool-color__crosshair {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 色相滑杆：多彩渐变轨道（参考 Windows 画图取色器） */
.tool-color__hue {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%,
    #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%
  );
  cursor: pointer;
}

.tool-color__hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.tool-color__hue::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* 当前颜色条：大色块（点击复制）+ HEX 大字（可编辑） */
.tool-color__current {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tool-color__swatch {
  flex: none;
  width: 72px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.tool-color__swatch:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.tool-color__swatch:active {
  transform: scale(0.95);
}

.tool-color__hex {
  font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 104px;
  border-bottom: 1px dashed transparent;
}

.tool-color__hex:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.tool-color__hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-align: right;
  line-height: 1.5;
}

/* 画图风格预设色板：8 列小方块 */
.tool-color__palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.tool-color__chip {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.tool-color__chip:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.tool-color__chip:active {
  transform: scale(0.95);
}

/* 配色方案库：每组名称 + 5 色一排 */
.tool-color__schemes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.tool-color__scheme-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.tool-color__scheme {
  display: flex;
  gap: 6px;
}

.tool-color__scheme-chip {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.tool-color__scheme-chip:hover {
  transform: scale(1.06);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.tool-color__scheme-chip:active {
  transform: scale(0.94);
}

/* 最近颜色 */
.tool-color__recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
}

.tool-color__recent-chip {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}

.tool-color__recent-chip:hover {
  transform: scale(1.12);
}

.tool-color__recent-empty {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.6;
  align-self: center;
}

.tool-color__rows {
  margin-top: 4px;
}

/* HEX 输出行支持直接改写（contenteditable），给个可见提示 */
.tool-row__value[contenteditable="true"]:focus {
  outline: none;
  border-bottom: 1px dashed var(--accent);
}

/* ═══════════ Toast 轻提示 ═══════════ */
.tools-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.tools-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════ 移动端微调 ═══════════ */
@media (max-width: 768px) {
  .tools__grid {
    grid-template-columns: 1fr;
  }

  .tools-toast {
    left: 16px;
    right: 16px;
    text-align: center;
  }

  /* 色板 6 列更易点按 */
  .tool-color__palette {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Base64 列表项在窄屏改为两行：信息一行、操作一行 */
  .b64-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .b64-item__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .b64-list {
    max-height: none;
  }
}