/* 华美天马首页视觉规范 2026-10-09
 * 视觉层；首页 body 加 hmtm-ui。先调整 DOM 并移除旧 inline 样式。
 * 不包含接口、菜单、粘贴和查询逻辑；不修改文章或线上站点。
 */
:root {
  --hmtm-ink: #0B2948;
  --hmtm-navy: #123657;
  --hmtm-navy-end: #1A4267;
  --hmtm-orange: #F56600;
  --hmtm-orange-hover: #DE5A00;
  --hmtm-orange-text: #C84E00;
  --hmtm-muted: #526B88;
  --hmtm-white: #FFFFFF;
  --hmtm-surface: #F6F8FC;
  --hmtm-selected: #EDF5FC;
  --hmtm-line: #CFDAE7;
  --hmtm-focus: #2765AD;
  --hmtm-success: #167448;
  --hmtm-success-bg: #ECF8F0;
  --hmtm-warning: #8A4B10;
  --hmtm-warning-bg: #FFF6EB;
  --hmtm-error: #B42318;
  --hmtm-error-bg: #FFF2F1;
  --hmtm-font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC",
    "Noto Sans SC", Arial, sans-serif;
  --hmtm-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular",
    Consolas, monospace;
  --hmtm-content-max: 1360px;
  --hmtm-gutter: 40px;
  --hmtm-radius: 6px;
  --hmtm-radius-panel: 8px;
  --hmtm-control-height: 64px;
  --hmtm-brand-size: 28px;
  --hmtm-brand-line: 36px;
  --hmtm-nav-size: 18px;
  --hmtm-nav-line: 28px;
  --hmtm-isf-size: 56px;
  --hmtm-isf-line: 68px;
  --hmtm-banner-copy-size: 22px;
  --hmtm-banner-copy-line: 34px;
  --hmtm-isf-btn-size: 26px;
  --hmtm-isf-btn-line: 36px;
  --hmtm-query-size: 40px;
  --hmtm-query-line: 52px;
  --hmtm-intro-size: 20px;
  --hmtm-intro-line: 30px;
  --hmtm-tool-size: 22px;
  --hmtm-tool-line: 32px;
  --hmtm-label-size: 20px;
  --hmtm-label-line: 30px;
  --hmtm-input-size: 20px;
  --hmtm-input-line: 30px;
  --hmtm-query-btn-size: 24px;
  --hmtm-query-btn-line: 34px;
  --hmtm-result-title-size: 20px;
  --hmtm-result-title-line: 30px;
  --hmtm-result-body-size: 18px;
  --hmtm-result-body-line: 28px;
  --hmtm-help-size: 14px;
  --hmtm-help-line: 22px;
  --hmtm-footer-size: 14px;
  --hmtm-footer-line: 22px;
}
body.hmtm-ui {
  margin: 0;
  font: 400 16px/1.6 var(--hmtm-font);
  color: var(--hmtm-ink);
  background: var(--hmtm-white);
}
.hmtm-ui *, .hmtm-ui *::before, .hmtm-ui *::after { box-sizing: border-box; }
.hmtm-ui [hidden] { display: none !important; }
.hmtm-ui button, .hmtm-ui input, .hmtm-ui select, .hmtm-ui textarea { font-family: inherit; }
.hmtm-ui a { color: inherit; text-underline-offset: 4px; }
.hmtm-ui button { cursor: pointer; }
.hmtm-ui img, .hmtm-ui svg { max-width: 100%; }
.hmtm-ui :focus-visible { outline: 3px solid var(--hmtm-focus); outline-offset: 3px; }
.hmtm-ui .wrap {
  width: calc(100% - 2 * var(--hmtm-gutter));
  max-width: var(--hmtm-content-max);
  margin-inline: auto;
}
.hmtm-ui .site-header {
  min-height: 80px;
  background: var(--hmtm-white);
  border-bottom: 1px solid var(--hmtm-line);
}
.hmtm-ui .header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 80px;
}
.hmtm-ui .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.hmtm-ui .brand img { width: 54px; height: 54px; object-fit: contain; }
.hmtm-ui .brand strong { font-size: var(--hmtm-brand-size); line-height: var(--hmtm-brand-line); font-weight: 700; }
.hmtm-ui .brand small { display: block; font-size: 12px; line-height: 20px; }
.hmtm-ui .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; }
.hmtm-ui .site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--hmtm-nav-size); line-height: var(--hmtm-nav-line);
  font-weight: 700; text-decoration: none;
}
.hmtm-ui .site-nav a[aria-current="page"] { border-bottom: 3px solid var(--hmtm-orange); }
.hmtm-ui .isf-banner {
  position: relative; display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  align-items: center; gap: 32px; min-height: 200px;
  margin: 24px auto 40px; padding: 32px 40px;
  border-radius: var(--hmtm-radius-panel); color: var(--hmtm-white);
  background: linear-gradient(110deg, var(--hmtm-navy), var(--hmtm-navy-end));
}
.hmtm-ui .isf-banner-icon-wrap {
  display: grid; place-items: center; padding-right: 24px; height: 128px;
  border-right: 1px solid rgba(255,255,255,.65);
}
.hmtm-ui .isf-banner-icon-wrap svg { width: 128px; height: 128px; }
.hmtm-ui .isf-banner-copy { min-width: 0; }
.hmtm-ui .isf-banner-copy h1 {
  margin: 0; font-size: var(--hmtm-isf-size);
  line-height: var(--hmtm-isf-line); font-weight: 700;
}
.hmtm-ui .isf-banner-copy p {
  margin: 8px 0 0; font-size: var(--hmtm-banner-copy-size);
  line-height: var(--hmtm-banner-copy-line);
}
.hmtm-ui .isf-banner-actions { text-align: center; }
.hmtm-ui .isf-banner-actions p { margin: 8px 0 0; font-size: 14px; line-height: 22px; }
.hmtm-ui .btn-isf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 72px; padding: 16px 32px; border: 0;
  border-radius: var(--hmtm-radius); background: var(--hmtm-orange);
  color: var(--hmtm-white); font-size: var(--hmtm-isf-btn-size);
  line-height: var(--hmtm-isf-btn-line); font-weight: 700; text-decoration: none;
}
.hmtm-ui .btn-isf:hover { background: var(--hmtm-orange-hover); }
.hmtm-ui .mobile-menu-button { display: none; }
.hmtm-ui .tools-section { padding: 0; background: var(--hmtm-white); }
.hmtm-ui #tools { scroll-margin-top: 24px; }
.hmtm-ui #tools-title {
  margin: 0; font-size: var(--hmtm-query-size);
  line-height: var(--hmtm-query-line); font-weight: 700;
}
.hmtm-ui .query-intro {
  margin: 8px 0 0; color: var(--hmtm-muted);
  font-size: var(--hmtm-intro-size); line-height: var(--hmtm-intro-line);
}
.hmtm-ui .tool-picker {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 28px 0 24px; border-bottom: 1px solid var(--hmtm-line);
}
.hmtm-ui .tool-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-width: 0; min-height: 72px; padding: 16px 12px;
  border: 0; border-radius: 0; text-align: left; box-shadow: none;
  color: var(--hmtm-ink); background: var(--hmtm-white);
}
.hmtm-ui .tool-card:not(:last-child) { border-right: 1px solid var(--hmtm-line); }
.hmtm-ui .tool-card::after {
  content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px;
  height: 3px; background: transparent;
}
.hmtm-ui .tool-card.is-active::after { background: var(--hmtm-orange); }
.hmtm-ui .tool-card:hover { background: var(--hmtm-surface); }
.hmtm-ui .tool-card-icon {
  flex: 0 0 32px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border-radius: 0; background: transparent;
}
.hmtm-ui .tool-card-icon img, .hmtm-ui .tool-card-icon svg { width: 32px; height: 32px; }
.hmtm-ui .tool-card-text { min-width: 0; }
.hmtm-ui .tool-card-text strong {
  font-size: var(--hmtm-tool-size); line-height: var(--hmtm-tool-line);
  font-weight: 700; overflow-wrap: anywhere;
}
.hmtm-ui .tool-card-text small { display: none; }
.hmtm-ui .tool-work { min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.hmtm-ui .tool-work-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.hmtm-ui .tool-work-head h3 { margin: 0; font-size: 20px; line-height: 30px; }
.hmtm-ui .tool-badge { padding: 4px 8px; border-radius: 4px; font-size: 14px; line-height: 22px; font-weight: 700; }
.hmtm-ui .tool-badge--closed { color: var(--hmtm-muted); background: var(--hmtm-surface); }
.hmtm-ui .tool-badge--live { color: var(--hmtm-success); background: var(--hmtm-success-bg); }
.hmtm-ui .tool-hint, .hmtm-ui .tool-disclaimer {
  margin: 12px 0 0; color: var(--hmtm-muted);
  font-size: var(--hmtm-help-size); line-height: var(--hmtm-help-line);
}
.hmtm-ui .tool-closed-note { margin: 12px 0 0; padding: 8px 12px; color: var(--hmtm-muted); background: var(--hmtm-surface); border-left: 3px solid var(--hmtm-line); font-size: var(--hmtm-help-size); line-height: var(--hmtm-help-line); }
.hmtm-ui .tool-form {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px;
  align-items: stretch; gap: 12px 16px;
  width: 100%; max-width: none; margin: 24px 0 0;
}
.hmtm-ui .tool-field-label {
  grid-column: 1 / -1; font-size: var(--hmtm-label-size);
  line-height: var(--hmtm-label-line); font-weight: 700;
}
.hmtm-ui .tool-input-wrap {
  display: flex; align-items: center; min-width: 0; min-height: var(--hmtm-control-height);
  border: 1px solid var(--hmtm-line); border-radius: var(--hmtm-radius);
  background: var(--hmtm-white);
}
.hmtm-ui .tool-input-wrap:focus-within { outline: 3px solid var(--hmtm-focus); outline-offset: 3px; }
.hmtm-ui .tool-input {
  flex: 1; min-width: 0; width: 100%; min-height: calc(var(--hmtm-control-height) - 2px);
  padding: 14px 18px; border: 0; border-radius: var(--hmtm-radius);
  outline: none; box-shadow: none; background: transparent;
  color: var(--hmtm-ink); font-size: var(--hmtm-input-size);
  line-height: var(--hmtm-input-line);
}
.hmtm-ui .tool-input::placeholder { color: var(--hmtm-muted); opacity: 1; }
.hmtm-ui .tool-input-wrap .tool-input:focus-visible { outline: none; }
.hmtm-ui .tool-paste {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-width: 92px; min-height: 44px; margin: 8px 8px 8px 0;
  padding: 8px 12px; border: 0; border-left: 1px solid var(--hmtm-line);
  background: transparent; color: var(--hmtm-ink); font-size: 18px; line-height: 26px; font-weight: 700;
}
.hmtm-ui .tool-paste svg { width: 24px; height: 24px; }
.hmtm-ui .tool-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 160px; min-width: 0; min-height: var(--hmtm-control-height);
  padding: 12px 24px; border: 0; border-radius: var(--hmtm-radius);
  background: var(--hmtm-navy); color: var(--hmtm-white);
  font-size: var(--hmtm-query-btn-size); line-height: var(--hmtm-query-btn-line); font-weight: 700;
}
.hmtm-ui .tool-submit:hover { background: var(--hmtm-ink); }
.hmtm-ui .tool-submit:disabled { cursor: default; background: var(--hmtm-line); color: var(--hmtm-muted); }
.hmtm-ui .tool-field-error { grid-column: 1 / -1; margin: 0; color: var(--hmtm-error); font-size: var(--hmtm-help-size); line-height: var(--hmtm-help-line); }
.hmtm-ui .tool-result {
  min-height: 128px; margin-top: 32px; padding: 24px 0;
  border: 0; border-top: 1px solid var(--hmtm-line); border-radius: 0;
  color: var(--hmtm-ink); background: var(--hmtm-white);
}
.hmtm-ui .tool-result::before { display: none; }
.hmtm-ui .tool-result .tr-title { margin: 0; font-size: var(--hmtm-result-title-size); line-height: var(--hmtm-result-title-line); font-weight: 700; }
.hmtm-ui .tool-result .tr-desc { margin: 8px 0 0; color: var(--hmtm-muted); font-size: var(--hmtm-result-body-size); line-height: var(--hmtm-result-body-line); }
.hmtm-ui .tool-result .tr-body { margin-top: 16px; font-size: var(--hmtm-result-body-size); line-height: var(--hmtm-result-body-line); overflow-wrap: anywhere; }
.hmtm-ui .tool-result .tr-body:empty { display: none; }
.hmtm-ui .tool-result[data-state="idle"] { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hmtm-ui .tool-result[data-state="loading"], .hmtm-ui .tool-result[data-state="unopened"] { padding: 16px 20px; background: var(--hmtm-surface); border-left: 3px solid var(--hmtm-muted); }
.hmtm-ui .tool-result[data-state="success"] { padding: 16px 20px; background: var(--hmtm-success-bg); border-left: 3px solid var(--hmtm-success); }
.hmtm-ui .tool-result[data-state="success"] .tr-title { color: var(--hmtm-success); }
.hmtm-ui .tool-result[data-state="empty"], .hmtm-ui .tool-result[data-state="partial"] { padding: 16px 20px; background: var(--hmtm-warning-bg); border-left: 3px solid var(--hmtm-warning); }
.hmtm-ui .tool-result[data-state="empty"] .tr-title, .hmtm-ui .tool-result[data-state="partial"] .tr-title { color: var(--hmtm-warning); }
.hmtm-ui .tool-result[data-state="invalid"], .hmtm-ui .tool-result[data-state="error"] { padding: 16px 20px; background: var(--hmtm-error-bg); border-left: 3px solid var(--hmtm-error); }
.hmtm-ui .tool-result[data-state="invalid"] .tr-title, .hmtm-ui .tool-result[data-state="error"] .tr-title { color: var(--hmtm-error); }
.hmtm-ui .query-code { font-family: var(--hmtm-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hmtm-ui .table-scroll { max-width: 100%; overflow-x: auto; }
.hmtm-ui .site-footer { margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--hmtm-line); background: var(--hmtm-white); font-size: var(--hmtm-footer-size); line-height: var(--hmtm-footer-line); }
.hmtm-ui .footer-top, .hmtm-ui .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.hmtm-ui .footer-top p, .hmtm-ui .footer-bottom p { margin: 0; }
.hmtm-ui .footer-bottom { margin-top: 12px; color: var(--hmtm-muted); }
.hmtm-ui .support-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 0; border-radius: 50%; background: var(--hmtm-navy); color: var(--hmtm-white);
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --hmtm-brand-size: 22px; --hmtm-brand-line: 30px;
    --hmtm-nav-size: 16px; --hmtm-nav-line: 24px;
    --hmtm-isf-size: 40px; --hmtm-isf-line: 52px;
    --hmtm-query-size: 36px; --hmtm-query-line: 46px;
    --hmtm-tool-size: 18px; --hmtm-tool-line: 28px;
  }
  .hmtm-ui .site-nav { gap: 20px; }
  .hmtm-ui .isf-banner { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; padding: 32px 24px; }
  .hmtm-ui .isf-banner-icon-wrap { height: 96px; padding-right: 16px; }
  .hmtm-ui .isf-banner-icon-wrap svg { width: 80px; height: 80px; }
  .hmtm-ui .btn-isf { font-size: 22px; line-height: 32px; padding: 16px 24px; }
  .hmtm-ui .tool-card { gap: 8px; }
}
@media (max-width: 767px) {
  :root {
    --hmtm-gutter: 16px; --hmtm-control-height: 56px;
    --hmtm-brand-size: 20px; --hmtm-brand-line: 28px;
    --hmtm-nav-size: 16px; --hmtm-nav-line: 24px;
    --hmtm-isf-size: 30px; --hmtm-isf-line: 40px;
    --hmtm-banner-copy-size: 14px; --hmtm-banner-copy-line: 22px;
    --hmtm-isf-btn-size: 20px; --hmtm-isf-btn-line: 28px;
    --hmtm-query-size: 28px; --hmtm-query-line: 38px;
    --hmtm-intro-size: 14px; --hmtm-intro-line: 22px;
    --hmtm-tool-size: 16px; --hmtm-tool-line: 24px;
    --hmtm-label-size: 16px; --hmtm-label-line: 24px;
    --hmtm-input-size: 16px; --hmtm-input-line: 24px;
    --hmtm-query-btn-size: 20px; --hmtm-query-btn-line: 28px;
    --hmtm-result-title-size: 18px; --hmtm-result-title-line: 28px;
    --hmtm-result-body-size: 16px; --hmtm-result-body-line: 26px;
    --hmtm-help-size: 13px; --hmtm-help-line: 21px;
    --hmtm-footer-size: 12px; --hmtm-footer-line: 20px;
  }
  .hmtm-ui .site-header { display: none; }
  .hmtm-ui .isf-banner {
    width: 100%; max-width: none; grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px; min-height: 0; margin: 0 auto 24px;
    padding: 40px 16px 24px; border-radius: 0;
  }
  .hmtm-ui .isf-banner-icon-wrap { height: 64px; padding: 0; border: 0; }
  .hmtm-ui .isf-banner-icon-wrap svg { width: 64px; height: 64px; }
  .hmtm-ui .isf-banner-actions { grid-column: 1 / -1; }
  .hmtm-ui .isf-banner-actions p { display: none; }
  .hmtm-ui .btn-isf { width: 100%; min-height: 56px; padding: 12px 20px; }
  .hmtm-ui .mobile-menu-button {
    position: absolute; top: 0; right: 8px; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 8px; border: 0;
    background: transparent; color: var(--hmtm-white);
  }
  .hmtm-ui .mobile-menu-button svg { width: 24px; height: 24px; }
  .hmtm-ui .tool-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; border: 0; }
  .hmtm-ui .tool-card { min-height: 64px; gap: 8px; padding: 12px; border: 1px solid var(--hmtm-line); border-radius: var(--hmtm-radius-panel); }
  .hmtm-ui .tool-card:not(:last-child) { border-right: 1px solid var(--hmtm-line); }
  .hmtm-ui .tool-card.is-active { background: var(--hmtm-selected); }
  .hmtm-ui .tool-card::after { right: 0; bottom: 0; left: 0; border-radius: 0 0 var(--hmtm-radius-panel) var(--hmtm-radius-panel); }
  .hmtm-ui .tool-card-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .hmtm-ui .tool-card-icon img, .hmtm-ui .tool-card-icon svg { width: 28px; height: 28px; }
  .hmtm-ui .tool-card--long .tool-card-text strong { font-size: 14px; line-height: 22px; }
  .hmtm-ui .tool-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hmtm-ui .tool-input { padding: 12px 14px; }
  .hmtm-ui .tool-paste { min-width: 72px; padding: 8px; margin: 4px 4px 4px 0; font-size: 16px; line-height: 24px; }
  .hmtm-ui .tool-paste svg { width: 20px; height: 20px; }
  .hmtm-ui .tool-submit { width: 100%; padding: 12px 20px; }
  .hmtm-ui .tool-result { min-height: 112px; margin-top: 24px; }
  .hmtm-ui .site-footer { margin-top: 24px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .hmtm-ui .footer-top, .hmtm-ui .footer-bottom { flex-direction: column; gap: 8px; }
  .hmtm-ui .support-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hmtm-ui *, .hmtm-ui *::before, .hmtm-ui *::after { scroll-behavior: auto; animation: none; transition: none; }
}