/* =========================================================
   tools.css (TOOLS ONLY)
   - 仅包含 tools 模块的“页面布局/按钮/输入框/提示框”补充样式
   - 全站通用按钮/输入框仍由 /assets/layout.css 提供
   ========================================================= */

/* =========================================================
   ✅ Tools 统一按钮主题（仅 tools 模块生效）
   - 统一宽度/高度
   - 统一背景色/边框色/文字色
   - 统一 hover/active/focus 颜色
   ========================================================= */

/* 1) 统一主题变量（只影响 tools） */
.tools-page,
.tools-home{
  --tool-btn-h: 42px;
  --tool-btn-minw: 128px;

  --tool-btn-bg: #1677ff;       /* 默认背景 */
  --tool-btn-bd: #1677ff;       /* 默认边框 */
  --tool-btn-tx: #ffffff;       /* 默认文字 */

  --tool-btn-hover: #0b5cff;    /* hover 背景 */
  --tool-btn-hover-bd: #0b5cff; /* hover 边框 */

  --tool-btn-active: #0948c6;   /* active 背景 */
  --tool-btn-active-bd: #0948c6;
}

/* 2) 覆盖 tools 内所有按钮（不管是 btn / btn-primary / btn-secondary） */
.tools-page a.btn,
.tools-page button.btn,
.tools-page .form .btn,
.tools-page .form button,
.tools-home a.btn,
.tools-home button.btn{
  height: var(--tool-btn-h);
  min-width: var(--tool-btn-minw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: var(--tool-btn-bg) !important;
  border-color: var(--tool-btn-bd) !important;
  color: var(--tool-btn-tx) !important;

  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

/* 3) hover / focus */
.tools-page a.btn:hover,
.tools-page button.btn:hover,
.tools-home a.btn:hover,
.tools-home button.btn:hover{
  background: var(--tool-btn-hover) !important;
  border-color: var(--tool-btn-hover-bd) !important;
  filter: none;
}

.tools-page a.btn:focus-visible,
.tools-page button.btn:focus-visible,
.tools-home a.btn:focus-visible,
.tools-home button.btn:focus-visible{
  outline: 3px solid rgba(22,119,255,.25);
  outline-offset: 2px;
}

/* 4) active */
.tools-page a.btn:active,
.tools-page button.btn:active,
.tools-home a.btn:active,
.tools-home button.btn:active{
  background: var(--tool-btn-active) !important;
  border-color: var(--tool-btn-active-bd) !important;
}

/* 5) disabled（如果有） */
.tools-page .btn[disabled],
.tools-page button.btn:disabled,
.tools-home .btn[disabled],
.tools-home button.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* 6) 工具首页 grid 按钮：继续保持你原来的 90% 宽度逻辑 */
.tools-home .tools-btns .tool-btn{
  min-width: 0; /* ✅ 防止 min-width 把网格撑爆 */
  height: var(--tool-btn-h);
}

/* 7) 允许某些“需要平分”的按钮条继续按你原逻辑平分 */
.contrast-actions .btn{
  min-width: 0; /* ✅ 让 flex:1 的平分逻辑生效 */
}
/* =========================================================
   ✅ 通用：工具页头部 tool-head（标题永远居中 + 返回按钮右侧）
   - 用 grid 三列：左占位 / 中间标题 / 右按钮
   - 解决：返回按钮不再影响标题居中
   ========================================================= */

.tools-page .tool-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;  /* ✅ 中间永远居中 */
  align-items:center;
  gap:10px;
  margin:4px 0 14px;
  text-align:center;
}

.tools-page .tool-head h2{margin:0}
.tools-page .tool-head .tool-sub{
  color:var(--muted);
  font-size:13px;
  margin:4px 0 0;
  max-width:900px;
}

/* 中间标题块放中间列 */
.tools-page .tool-head > div{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* 返回按钮放右侧列，并贴右 */
.tools-page .tool-head > a.btn{
  grid-column:3;
  justify-self:end;
  white-space:nowrap;
  margin:0;
}

/* 手机端：改为竖排（按钮在下方居中） */
@media (max-width: 520px){
  .tools-page .tool-head{ grid-template-columns:1fr; }
  .tools-page .tool-head > div{ grid-column:1; }
  .tools-page .tool-head > a.btn{
    grid-column:1;
    justify-self:center;
    margin-top:6px;
  }
}


/* =========================================================
   ✅ 通用：工具页按钮条/表单/容器
   ========================================================= */

.pad{padding:18px}

/* 兼容旧版 tools/txt 的 .btns */
.btns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}

/* 工具页表单按钮居中 */
.tools-page .form button,
.tools-page .form .btn{
  justify-self:center;
}

.tool-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  justify-content:center;
}

.tool-title{
  text-align:center;
  margin:6px 0 14px;
}


/* =========================================================
   ✅ tabs
   ========================================================= */

.tool-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  justify-content:center;
}

.tool-tab{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
.tool-tab.active{
  background:rgba(22,119,255,.10);
  border-color:rgba(22,119,255,.35);
}

/* ✅ 修复：日期页/所有 tabs 在手机端不制造“隐形超宽” */
.tool-tabs{
  max-width:100%;
  flex-wrap:wrap;     /* ✅ 必须允许换行 */
  overflow:hidden;    /* ✅ 防止边框组合产生 1px 溢出 */
}

.tool-tab{
  min-width:0;
  flex:0 1 auto;      /* ✅ 允许收缩 */
  max-width:100%;
  text-align:center;
}

/* ✅ 手机端：tab 更紧凑，避免一行塞不下造成超宽 */
@media (max-width:520px){
  .tool-tab{
    padding:8px 12px;
    font-size:13px;
  }
}

.tool-panel{display:none}
.tool-panel.active{display:block}


/* =========================================================
   ✅ layout helpers
   ========================================================= */

.tool-row{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
@media (max-width:860px){
  .tool-row{grid-template-columns:1fr}
}

.tool-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
}


/* =========================================================
   ✅ toast / help / alert
   ========================================================= */

.tool-toast{
  position:fixed;
  left:50%;
  top:110px;
  transform:translateX(-50%);
  background:rgba(17,17,17,.92);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  z-index:9999;
  display:none;
  max-width:min(720px, 92vw);
}

.tool-help{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.tool-alert{
  background:rgba(255,77,79,.08);
  border:1px solid rgba(255,77,79,.25);
  color:#9a1d1f;
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}


/* =========================================================
   ✅ split / exchange
   ========================================================= */

.tool-split-inline{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:end;
}
@media (max-width:980px){
  .tool-split-inline{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

.tool-exchange-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:end;
}
@media (max-width:860px){
  .tool-exchange-row{grid-template-columns:1fr}
}

.tool-swap{
  user-select:none;
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}


/* =========================================================
   ✅ Tools 首页（/tools）
   - 标题文字居中
   - 分组间距更大
   - ✅ 每行固定 5 个按钮（grid）
   ========================================================= */

.tools-home .tools-title,
.tools-home .tools-section-title{
  text-align:center;
  padding: 20px;
}

.tools-home .tools-section{
  margin-top:18px; /* 分组之间的纵向间距 */
}

/* ✅ 关键：每行 5 个按钮 */
.tools-home .tools-btns{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:15px 0px; /* row-gap / column-gap（纵向更大） */
  align-items:stretch;
}

/* 按钮填满格子，文字居中，不换行 */
/* 工具首页：按钮网格 */
.tools-home .tools-btns{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  /*gap:15px 14px;  行间距 / 列间距 */
  align-items:stretch;
}

/* ✅ 关键：让按钮在每个格子里水平居中 */
.tools-home .tools-btns .tool-btn{
  width:90%;                 /* 不要 80%，否则视觉不稳 */
  display:flex;               /* 用 flex 做内容居中 */
  align-items:center;
  justify-content:center;     /* ✅ 文字居中 */
  text-align:center;
  white-space:nowrap;         /* 不换行 */
  margin:0 auto;              /* 双保险 */
}

/* 如果 tool-btn 不是 a，而是 button，也一起兼容 */
.tools-home .tools-btns button.tool-btn{
  width:100%;
}

/* 响应式降列 */
@media (max-width: 1100px){
  .tools-home .tools-btns{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .tools-home .tools-btns{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .tools-home .tools-btns{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:520px){
  .shorten-row{flex-direction:column; align-items:stretch;}
  .shorten-fields{flex-direction:column; align-items:stretch; width:100%;}
  .shorten-len{display:flex; gap:10px; align-items:center; width:100%;}
  .shorten-len input{ width:100%; }
}

/* =========================================================
   ✅ contrast（卡密筛选）响应式布局（桌面不变 / 移动端重排）
   ========================================================= */

/* 让 form 用 grid 控制位置（关键：grid areas） */
.contrast-form{
  display:grid;
  gap:14px;
}

/* 桌面端布局：分隔符左 + 按钮右；原始/排除两列；输出整行 */
@media (min-width:861px){
  .contrast-form{
    grid-template-columns:220px 1.6fr 1fr;   /* ✅ origin 更宽，compare 更窄 */
    grid-template-areas:
      "delim actions actions"
      "origin origin compare"
      "output output output";
    align-items:end;
  }
  .contrast-delimiter{ grid-area:delim; }
  .contrast-actions{ grid-area:actions; justify-content:flex-end; margin:0; }
  .contrast-origin{ grid-area:origin; }
  .contrast-compare{ grid-area:compare; }
  .contrast-output{ grid-area:output; }
}

/* 移动端布局：原始 -> 排除 -> 按钮(一行) -> 分隔符 -> 输出 */
@media (max-width:860px){
  .contrast-form{
    grid-template-columns:1fr;
    grid-template-areas:
      "origin"
      "compare"
      "actions"
      "delim"
      "output";
    align-items:stretch;
  }
  .contrast-delimiter{ grid-area:delim; }
  .contrast-actions{ grid-area:actions; margin:0; }
  .contrast-origin{ grid-area:origin; }
  .contrast-compare{ grid-area:compare; }
  .contrast-output{ grid-area:output; }

  /* ✅ 按钮一行显示（你要求） */
.contrast-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
  }
  .contrast-actions .btn{
    flex:1 1 0;        /* ✅ 等宽平分 */
    min-width:0;       /* ✅ 允许收缩 */
    justify-content:center;
    padding:9px 8px;
    font-size:12px;
    white-space:nowrap;
  }
}

/* 分隔符输入框占满 */
.contrast-delimiter input[type="text"]{
  width:100%;
}

/* =========================================================
   ✅ fontimg（字体图片生成器）- 响应式布局（仅该页生效）
   - PC：左侧预览固定 800×1067，不缩放；右侧控制面板
   - Mobile：上下布局；画布按屏幕宽度等比缩放显示
   ========================================================= */

.fontimg-page .fontimg-wrap{
  display:grid;
  grid-template-columns:800px minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

/* ✅ PC：不需要横向滚动 */
.fontimg-page .card.pad{ overflow:visible; }

.fontimg-page .fontimg-preview{ width:800px; }
.fontimg-page .fontimg-preview canvas{
  width:800px;
  height:1067px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  display:block;
  background:#fff;
}

.fontimg-page .fontimg-controls textarea{ min-height:160px; }

/* ✅ 右侧表单默认两列 */
.fontimg-page .fontimg-controls .row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
  align-items:end;
}
.fontimg-page .fontimg-controls .row > div{ min-width:0; }

.fontimg-page .fontimg-controls input,
.fontimg-page .fontimg-controls select,
.fontimg-page .fontimg-controls textarea{
  width:100%;
  max-width:100%;
  min-width:0;
}
.fontimg-page .fontimg-controls input[type="file"]{ width:100%; }
.fontimg-page .fontimg-controls label{ display:block; margin:0 0 6px; }

/* ✅ 4列行 / 5列行（PC） */
.fontimg-page .fontimg-controls .row.row-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.fontimg-page .fontimg-controls .row.row-5{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

/* checkbox 行用 flex 自动换行 */
.fontimg-page .fontimg-controls .row.row-checks{
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  align-items:center;
}
.fontimg-page .fontimg-controls .row.row-checks label.inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}

.fontimg-page .fontimg-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* =========================================================
   ✅ 移动端自适应
   - 布局变成：预览在上，控制在下
   - 画布等比缩放显示（不改变 canvas 像素）
   ========================================================= */
@media (max-width:860px){
  /* ✅ 卡片内部不要横向滚动 */
  .fontimg-page .card.pad{ overflow:hidden; }

  .fontimg-page .fontimg-wrap{
    grid-template-columns:1fr;
    gap:12px;
  }

  .fontimg-page .fontimg-preview{
    width:100%;
    max-width:100%;
  }
  .fontimg-page .fontimg-preview canvas{
    width:100%;
    height:auto;
    aspect-ratio:800 / 1067; /* ✅ 保持比例（Safari 更稳） */
  }

  /* 控制面板行：默认降为 1 列 */
  .fontimg-page .fontimg-controls .row{
    grid-template-columns:1fr;
  }

  /* row-4 / row-5：移动端降为 2 列（更美观） */
  .fontimg-page .fontimg-controls .row.row-4,
  .fontimg-page .fontimg-controls .row.row-5{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .fontimg-page .fontimg-controls input[type="range"]{
    width:100%;
  }
}

/* 更小屏：row-4 / row-5 降为 1 列，避免挤爆 */
@media (max-width:520px){
  .fontimg-page .fontimg-controls .row.row-4,
  .fontimg-page .fontimg-controls .row.row-5{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   ✅ Tools 首页：恢复原来的 btn-secondary 风格（仅本页）
   - 需要 <div class="tools-home tools-home-legacy">
   ========================================================= */
.tools-home.tools-home-legacy a.btn.tool-btn,
.tools-home.tools-home-legacy button.btn.tool-btn{
  background:#e5e2e2 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  color:inherit !important;
}

.tools-home.tools-home-legacy a.btn.tool-btn:hover,
.tools-home.tools-home-legacy button.btn.tool-btn:hover{
  background:rgba(22,119,255,.08) !important;
  border-color:rgba(22,119,255,.28) !important;
}

.tools-home.tools-home-legacy a.btn.tool-btn:active,
.tools-home.tools-home-legacy button.btn.tool-btn:active{
  background:rgba(22,119,255,.14) !important;
  border-color:rgba(22,119,255,.35) !important;
}