.tools-page .resource-tools-main{max-width:1160px;margin:auto;padding:132px 28px 80px;color:#17191f}
.tools-page .resource-tools-intro small,.tools-page .resource-tool-heading small{color:#4466fa;font-size:12px;font-weight:650;letter-spacing:.06em}
.tools-page .resource-tools-intro h1{margin:14px 0;font-size:44px;line-height:1.2}
.tools-page .resource-tools-intro p{font-size:17px;line-height:1.8;color:#667085}
.tools-page .resource-tools-notice{margin:28px 0;padding:18px 22px;border:1px solid #dce5ff;border-radius:12px;background:#f5f8ff;font-size:14px;line-height:1.8;color:#475467}
.tools-page .resource-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0}
.tools-page .resource-tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;text-align:left;border:1px solid #e3e7ef;border-radius:16px;background:white;cursor:pointer;color:#17191f;font:inherit}
.tools-page .resource-tool-card img{width:28px;height:28px}
.tools-page .resource-tool-card strong{font-size:16px;line-height:1.6}
.tools-page .resource-tool-card span{color:#667085;font-size:13px;line-height:1.7}
.tools-page .resource-tool-card[aria-pressed=true]{border-color:#4466fa;background:#f5f8ff}
.tools-page .resource-tool-workspace{padding:28px;border:1px solid #e3e7ef;border-radius:20px;background:#fff;scroll-margin-top:100px}
.tools-page .resource-tool-heading h2{margin:10px 0 24px;font-size:24px}
.tools-page .resource-tool-workspace label{display:block;margin-bottom:10px;font-size:14px;font-weight:650}
.tools-page .resource-tool-workspace textarea{display:block;box-sizing:border-box;width:100%;resize:vertical;padding:14px;border:1px solid #d8deea;border-radius:10px;background:#fcfdff;color:#344054;font:inherit;font-size:14px;line-height:1.8}
.tools-page .resource-tool-options{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0}
.tools-page .resource-tool-options label{flex:1;min-width:160px}
.tools-page .resource-tool-options select{display:block;margin-top:8px;width:100%;padding:10px;border:1px solid #d8deea;border-radius:8px;background:#fff;font:inherit;color:#344054}
.tools-page .resource-tool-actions{display:flex;flex-wrap:wrap;gap:10px}
.tools-page .resource-tool-workspace button{padding:11px 18px;border:1px solid #d8deea;border-radius:9px;background:#fff;color:#344054;font:inherit;font-size:14px;cursor:pointer}
.tools-page .resource-tool-workspace .tool-primary{background:#4466fa;border-color:#4466fa;color:#fff}
.tools-page .resource-tool-output{border-top:1px solid #e3e7ef;margin-top:28px;padding-top:24px}
.tools-page .resource-tool-output p{color:#667085;font-size:13px;line-height:1.7}
.tools-page #tool-copy{margin-top:14px}
.tools-page button:disabled{opacity:.45;cursor:not-allowed}
.tools-page :is(button,textarea,select):focus-visible{outline:2px solid #4466fa;outline-offset:3px}
@media(max-width:1000px){.tools-page .resource-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.tools-page .resource-tools-main{padding:110px 18px 48px}.tools-page .resource-tools-grid{grid-template-columns:minmax(0,1fr)}.tools-page .resource-tool-workspace{padding:20px}.tools-page .resource-tools-intro h1{font-size:34px}}

/* 英日文案较长：卡片文字允许换行（design-tokens.css 给 .subpage 下 button 设了 nowrap） */
.tools-page .resource-tool-card{white-space:normal;min-width:0}

/* 2026-09-21：四个工具从 tools.html 拆成 /tools/<slug>/ 各一页。
   卡片从 <button> 变成链接（当前工具是 <span>，用 aria-current 标记），
   所以要补链接态与当前态；旧的 [aria-pressed=true] 留着不影响。 */
.tools-page a.resource-tool-card { text-decoration: none; }
.tools-page a.resource-tool-card:hover { border-color: #b9c4fb; background: #f8faff; }
.tools-page a.resource-tool-card:focus-visible { outline: 2px solid #4466fa; outline-offset: 3px; }
.tools-page .resource-tool-card[aria-current="page"] { border-color: #4466fa; background: #f5f8ff; }
.tools-page .resource-tool-card.is-current { cursor: default; }
.tools-page .resource-tool-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #667085;
  font-size: 13px;
}
.tools-page .resource-tool-crumb a { color: #4466fa; text-decoration: none; }
.tools-page .resource-tool-crumb a:hover { text-decoration: underline; }