/* ============================================================
   tool.css — 工具页内容区样式（基于 css-public 设计系统）
   ------------------------------------------------------------
   各工具页在引入 css/ui/index.css 之后引入本文件：
     <link rel="stylesheet" href="../css/ui/index.css">
     <link rel="stylesheet" href="../css/ui/tool.css">
   提供工具页统一的内容布局、卡片内间距、表单网格等。
   ============================================================ */

/* ===== 顶部导航：品牌标识用站点配色 ===== */
.ui-navbar-brand-mark {
  background-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
/* 品牌标记为图片（圆形 logo）时：无底色覆盖，保持图片原样 */
.ui-navbar-brand-mark.has-logo {
  background-color: transparent;
}

/* ===== 主内容区：单列居中 ===== */
.tool-main {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}
.tool-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ===== 工具介绍卡 ===== */
.tool-intro {
  font-size: var(--fs-aux);
  color: var(--text-secondary);
}
.tool-intro ul {
  margin: var(--space-2) 0 0 0;
  padding: 0;
}
.tool-intro li {
  margin-bottom: var(--space-1);
}

/* ===== 卡片内多内容块的垂直间距 =====
   .ui-card 自带 padding:24px，但其内部的多个 .ui-card-body 之间
   默认无间距。这里给相邻兄弟块加 margin-top，让表单与按钮、
   多段结果之间有呼吸空间。沿用 css-public 的 --space-4 令牌。 */
.tool-main .ui-card > .ui-card-body + .ui-card-body,
.tool-main .ui-card > .tool-result + .ui-card-body,
.tool-main .ui-card > .ui-card-body + .tool-result {
  margin-top: var(--space-4);
}

/* ===== 表单网格：多字段横排，窄屏堆叠 ===== */
.tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 540px) {
  .tool-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 结果代码区 ===== */
.tool-result {
  background-color: var(--bg-subtle);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  color: var(--text-secondary);
  word-break: break-all;
}
.tool-result p {
  margin: 0;
  line-height: 1.9;
}

/* ===== 复制按钮（承载动态文字）：左对齐 + 等宽 ===== */
.tool-copy-btn {
  justify-content: flex-start;
  font-family: var(--font-mono);
  text-align: left;
}

/* ===== 按钮行：宽屏并排，窄屏堆叠 ===== */
.tool-btn-row {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}
.tool-btn-row > * {
  flex: 1;
}
@media (max-width: 540px) {
  .tool-btn-row {
    flex-direction: column;
  }
  .tool-btn-row > * {
    flex: none;
    width: 100%;
  }
}

/* ===== 横排单选/复选组 ===== */
.tool-radio-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

/* ===== 按钮纵向堆叠间距（卡片内多个全宽按钮） ===== */
.tool-stack > .ui-btn + .ui-btn {
  margin-top: var(--space-3);
}