/* =========================================================
   工具站页面样式
   依赖 assets/style.css 中的设计变量（--accent:#047857）
   适用于：首页、全部工具、在线工具、更新日志
   ========================================================= */

body.ts {
  padding: 0;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ts-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.ts-skip:focus { left: 0; }

.ts-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 工具类 ---------- */
body.ts [hidden] { display: none !important; }

.ts-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 顶栏 ---------- */
.ts-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 250, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.ts-head__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.ts-head .brand { min-height: 44px; }
.ts-head .brand__name { font-size: 17px; }
.brand__tag {
  display: inline-block;
  padding-left: 8px;
  margin-left: 0;
  border-left: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted-fg);
  white-space: nowrap;
}
.ts-nav { display: none; align-items: center; gap: 4px; }
.ts-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ts-nav a:hover { color: var(--fg); background: var(--muted); }
.ts-nav a[aria-current="page"] { color: var(--accent); background: rgba(4, 120, 87, .08); font-weight: 600; }
.ts-head__spacer { margin-left: auto; }
.ts-head__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ts-head__action svg { width: 18px; height: 18px; }
.ts-head__action:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 顶栏下拉（全部工具 / 耀具工坊） ---------- */
.ts-nav__item { position: relative; }
.ts-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-fg);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ts-nav__trigger:hover,
.ts-nav__item.is-open .ts-nav__trigger { color: var(--fg); background: var(--muted); }
.ts-nav__item.is-active .ts-nav__trigger {
  color: var(--accent);
  background: rgba(4, 120, 87, .08);
  font-weight: 600;
}
.ts-nav__trigger > svg.ts-nav__caret {
  width: 13px;
  height: 13px;
  opacity: .6;
  transform: rotate(90deg);
  transition: transform .22s var(--ease);
}
.ts-nav__item.is-open .ts-nav__caret { transform: rotate(-90deg); }

.ts-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  width: 560px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.ts-menu--workshop { width: 380px; grid-template-columns: 1fr; }
.ts-nav__item.is-open .ts-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ts-menu__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-menu__label {
  margin: 0 0 4px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted-fg);
  text-transform: uppercase;
}
.ts-menu a,
.ts-nav .ts-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--fg);
  font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.ts-menu a:hover,
.ts-nav .ts-menu a:hover { background: var(--muted); color: var(--accent); }
.ts-menu__icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(4, 120, 87, .08);
  color: var(--accent);
}
.ts-menu__icon svg { width: 16px; height: 16px; }
.ts-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-menu__text b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ts-menu__text span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-menu__count {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-fg);
}
.ts-menu__all,
.ts-nav .ts-menu__all {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(4, 120, 87, .06);
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
}
.ts-menu__all svg { width: 15px; height: 15px; margin-left: auto; transition: transform .2s var(--ease); }
.ts-menu__all:hover svg { transform: translateX(3px); }
.ts-menu__hint {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-fg);
}

/* ---------- 主区域 ---------- */
.ts-main { flex: 1; }
.ts-sec { padding: 40px 0 4px; }
.ts-sec:first-child { padding-top: 32px; }
.ts-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ts-sec__head h2 {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ts-sec__head a {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ts-sec__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ts-sec__note { color: var(--muted-fg); font-size: 14px; line-height: 1.7; max-width: 42em; }

/* ---------- 首屏 ---------- */
.ts-hero { padding: 32px 0 12px; }
.ts-hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 6.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 20em;
}
.ts-hero h1 em {
  font-style: normal;
  color: var(--accent);
  background: linear-gradient(120deg, var(--accent), var(--accent-sec));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ts-hero__lead {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted-fg);
  max-width: 40em;
}
.ts-hero__lead strong { color: var(--fg); font-weight: 600; }

/* 首屏动效：Canvas 星轨 + 透视网格，浅色主题下低对比呈现 */
.ts-hero--fx {
  position: relative;
  /* isolation 会为动效画布建层叠上下文，必须抬到后续卡片之上，否则搜索下拉会被卡片盖住 */
  z-index: 2;
  isolation: isolate;
  /* 左右对称的径向光：避免出现左侧发白、右侧发绿的色差 */
  background:
    radial-gradient(90% 70% at 50% -6%, rgba(16, 185, 129, .13), rgba(16, 185, 129, 0) 64%),
    radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, .06), rgba(56, 189, 248, 0) 72%),
    linear-gradient(180deg, #F6FBF9 0%, var(--bg) 92%);
}
.ts-hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}
.ts-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 只保留上下方向的淡出，整幅同色，不再左白右绿 */
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 58%, var(--bg) 100%);
}
.ts-hero__inner { position: relative; z-index: 2; }

/* 首页：动效铺满顶部，顶栏融入首屏 */
.ts-home { --head-h: 64px; }
.ts-home .ts-head {
  background: rgba(250, 250, 250, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(226, 232, 240, 0);
  transition:
    background-color .42s var(--ease),
    box-shadow .42s var(--ease),
    backdrop-filter .42s var(--ease),
    -webkit-backdrop-filter .42s var(--ease);
}
.ts-home .ts-head.is-scrolled {
  background: rgba(250, 250, 250, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(226, 232, 240, .75);
}
.ts-home .ts-head .ts-head__action { box-shadow: 0 2px 10px rgba(15, 23, 42, .07); }
.ts-home .ts-hero--fx {
  margin-top: calc(-1 * var(--head-h));
  padding-top: calc(var(--head-h) + 32px);
}

@keyframes ts-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.ts-hero--fx .ts-hero__title,
.ts-hero--fx .ts-hero__lead,
.ts-hero--fx .ts-search,
.ts-hero--fx .ts-filters,
.ts-hero--fx .ts-hero__cta {
  animation: ts-hero-rise .72s var(--ease) backwards;
}
.ts-hero--fx .ts-hero__lead { animation-delay: .08s; }
.ts-hero--fx .ts-search { animation-delay: .16s; z-index: 3; }
.ts-hero--fx .ts-filters { animation-delay: .22s; }
.ts-hero--fx .ts-hero__cta { animation-delay: .3s; }

.ts-hero__cta { margin-top: 22px; }
.ts-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--accent), var(--accent-sec));
  box-shadow: 0 6px 16px rgba(4, 120, 87, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ts-cta svg { width: 18px; height: 18px; flex: none; }
.ts-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4, 120, 87, .26); }
.ts-cta:active { transform: scale(.97); }
.ts-cta:focus-visible { outline: 3px solid rgba(4, 120, 87, .35); outline-offset: 2px; }

@media (max-width: 640px) {
  .ts-hero__fx { opacity: .7; }
  .ts-hero__veil {
    background: linear-gradient(180deg, rgba(250, 250, 250, .66) 0%, rgba(250, 250, 250, .56) 58%, var(--bg) 100%);
  }
  .ts-hero__cta { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-hero--fx .ts-hero__title,
  .ts-hero--fx .ts-hero__lead,
  .ts-hero--fx .ts-search,
  .ts-hero--fx .ts-filters,
  .ts-hero--fx .ts-hero__cta { animation: none; }
  .ts-cta:hover { transform: none; }
  .ts-home .ts-head { transition: none; }
  .ts-note,
  .ts-note::after,
  .ts-note svg { transition: none; }
  .ts-note:hover { transform: none; }
  .ts-note:hover svg { transform: none; }
}

.ts-search { position: relative; margin-top: 26px; max-width: 660px; }
.ts-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ts-search__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, .16);
}
.ts-search__field > svg { width: 20px; height: 20px; color: var(--muted-fg); flex: none; }
.ts-search input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
}
.ts-search input::placeholder { color: #98A1B0; }
.ts-search__hint {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--muted-fg);
}

/* 搜索建议下拉 */
.ts-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  max-height: min(60vh, 380px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .13), 0 2px 8px rgba(15, 23, 42, .06);
}
.ts-suggest[hidden] { display: none; }
.ts-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.ts-suggest__item:hover,
.ts-suggest__item.is-active {
  background: var(--muted);
  color: inherit;
  text-decoration: none;
}
.ts-suggest__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--muted);
  color: var(--accent);
}
.ts-suggest__icon svg { width: 16px; height: 16px; }
.ts-suggest__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ts-suggest__body b { font-size: 14px; font-weight: 600; }
.ts-suggest__body b mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.ts-suggest__meta {
  overflow: hidden;
  font-size: 12px;
  color: var(--muted-fg);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ts-suggest__empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted-fg);
}

.ts-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ts-filters__label {
  align-self: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-right: 4px;
}

/* ---------- 分类 ---------- */
.ts-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ts-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
  transition: border-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.ts-cat:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ts-cat svg { width: 18px; height: 18px; color: var(--accent); }
.ts-cat__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ts-cat__desc { font-size: 12px; font-weight: 400; color: var(--muted-fg); }
.ts-cat__count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted-fg); }
.ts-cat--empty { opacity: .62; }
.ts-cat--empty:hover { opacity: 1; }

/* ---------- 工具卡片 ---------- */
.ts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
.ts-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ts-card:hover { border-color: var(--accent-sec); transform: translateY(-2px); box-shadow: var(--shadow); }
.ts-card__head { display: flex; align-items: center; gap: 12px; }
.ts-card__icon {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(4, 120, 87, .09);
  color: var(--accent);
}
.ts-card__icon svg { width: 22px; height: 22px; }
.ts-card h3 { font-family: var(--display); font-size: 18px; line-height: 1.3; }
.ts-card h3 a:hover { color: var(--accent); }
.ts-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
/* 标签内的小图标必须限尺寸，否则 svg 按默认 300x150 渲染，会把卡片顶爆 */
.ts-card__tag svg { width: 12px; height: 12px; flex: none; }
.ts-card__sum { font-size: 14px; color: var(--muted-fg); line-height: 1.6; }

/* ---------- 预告条目（尚未上线） ---------- */
.ts-card--soon { border-style: dashed; background: transparent; }
.ts-card--soon:hover { border-color: var(--border); transform: none; box-shadow: none; }
.ts-card--soon .ts-card__icon { background: rgba(15, 23, 42, .05); color: var(--muted-fg); }
.ts-card--soon h3 { color: var(--muted-fg); }
.ts-card--soon .ts-card__tag { color: var(--muted-fg); }
.ts-card__soon { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* ---------- 首页工坊入口 ---------- */
.ts-workshop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
.ts-workshop__card { color: inherit; text-decoration: none; }
.ts-workshop__card:hover h3 { color: var(--accent); }
.ts-workshop__card .ts-card__tag { margin-top: auto; }

@media (min-width: 640px) {
  .ts-workshop__grid { grid-template-columns: repeat(3, 1fr); }
}
/* 工坊只有一个分类时占满整行 */
.ts-workshop__grid--one { grid-template-columns: 1fr; }
/* 工坊有两个分类时并排两列，移动端沿用单列 */
@media (min-width: 640px) {
  .ts-workshop__grid--two { grid-template-columns: repeat(2, 1fr); }
}
.ts-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-fg);
}
.ts-meta li { display: flex; align-items: center; gap: 5px; }
.ts-meta li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--border);
}
.ts-card__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ts-card__note { min-width: 0; flex: 1 1 auto; font-size: 12px; color: var(--muted-fg); }
.ts-card__foot .btn { flex: none; white-space: nowrap; }

.ts-empty {
  padding: 28px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
  color: var(--muted-fg);
  font-size: 14px;
}
.ts-empty a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 最近更新 ---------- */
.ts-updates {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}
.ts-updates li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 20px;
  font-size: 14px;
}
.ts-updates li + li { border-top: 1px solid var(--border); }
.ts-updates time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-fg);
  flex: none;
  min-width: 92px;
}
.ts-updates strong { font-weight: 600; }
.ts-updates span { color: var(--muted-fg); flex: 1 1 240px; min-width: 0; }
.ts-updates .ts-updates__kind {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--accent);
  background: rgba(4, 120, 87, .08);
}
.ts-updates .ts-updates__kind[data-kind="improve"] {
  color: var(--muted-fg);
  background: var(--muted);
}

/* ---------- 说明条 ---------- */
.ts-notes {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.ts-note {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.ts-note > * { position: relative; z-index: 1; }
.ts-note::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(130% 120% at 0% 0%, rgba(4, 120, 87, .1), rgba(4, 120, 87, 0) 58%);
  transition: opacity .28s var(--ease);
}
.ts-note:hover {
  transform: translateY(-3px);
  border-color: rgba(4, 120, 87, .34);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
}
.ts-note:hover::after { opacity: 1; }
.ts-note svg {
  width: 20px; height: 20px;
  color: var(--accent);
  flex: none;
  margin-top: 2px;
  transition: transform .28s var(--ease);
}
.ts-note:hover svg { transform: translateY(-1px) scale(1.08); }
.ts-note b { display: block; font-size: 14px; font-weight: 600; }
.ts-note p { font-size: 13px; color: var(--muted-fg); margin-top: 2px; }

/* ---------- 返回上一级 ---------- */
.ts-back { margin: 18px 0 0; font-size: 13px; }
.ts-back a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.ts-back a:hover { color: var(--accent); border-color: var(--accent-sec); }
.ts-back a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 与紧随其后的区块合并留白，避免顶部出现两段空隙 */
.screen > .ts-back { margin-top: 0; }
.ts-back + .ts-crumb { padding-top: 10px; }
.ts-back + .ts-tool-head { padding-top: 10px; }
.ts-back + .ws-hero { padding-top: 18px; }

/* ---------- 工具页 ---------- */
.ts-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-fg);
}
.ts-crumb a:hover { color: var(--accent); }
.ts-crumb svg { width: 12px; height: 12px; }

.ts-tool-head { padding: 16px 0 4px; }
.ts-tool-head h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-top: 8px;
}
.ts-tool-head p { margin-top: 10px; color: var(--muted-fg); font-size: 15px; max-width: 46em; }
.ts-tool-head .ts-meta { margin-top: 14px; font-size: 12px; }

.ts-layout { display: grid; gap: 20px; padding: 20px 0 8px; align-items: start; }
.ts-layout > * { min-width: 0; }
.ts-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 20px;
}
.ts-panel h2 { font-family: var(--display); font-size: 20px; }
.ts-panel__hint { margin-top: 4px; font-size: 13px; color: var(--muted-fg); }

.ts-drop {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 30px 18px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ts-drop.is-over { border-color: var(--accent); background: rgba(4, 120, 87, .06); }
.ts-drop > svg { width: 30px; height: 30px; color: var(--accent); }
.ts-drop strong { font-size: 15px; }
.ts-drop span { font-size: 13px; color: var(--muted-fg); }
.ts-drop .btn { margin-top: 6px; }

.ts-settings {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ts-setting { display: grid; gap: 6px; }
.ts-setting label { font-size: 14px; font-weight: 600; }
.ts-setting .field__hint { font-size: 12px; color: var(--muted-fg); }
.ts-setting__value { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); }
.ts-setting input[type="range"] { width: 100%; max-width: 440px; height: 32px; accent-color: var(--accent); }
.ts-setting input[type="color"] {
  width: 64px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}

/* ---------- 标签页 ---------- */
.ts-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow-x: auto;
}
.ts-tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ts-tab:hover { color: var(--fg); }
.ts-tab[aria-selected="true"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.ts-tabpanel { padding-top: 16px; }

.ts-code {
  margin-top: 12px;
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}

.ts-filelist { display: grid; gap: 10px; margin-top: 18px; }
.ts-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.ts-file__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-all;
}
.ts-file__meta {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-fg);
}
.ts-file__state {
  grid-column: 1;
  font-size: 12px;
  color: var(--muted-fg);
}
.ts-file__state[data-state="done"] { color: var(--accent); font-weight: 600; }
.ts-file__state[data-state="error"] { color: #B42318; font-weight: 600; }
.ts-file__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ts-file__actions .icon-btn { width: 40px; height: 40px; }
.ts-file__actions .icon-btn:hover { color: #B42318; }
.ts-file__actions .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
.ts-progress {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.ts-progress[hidden] { display: none; }
.ts-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .18s var(--ease);
}

.ts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.ts-actions .btn { flex: 1 1 180px; }

.ts-status { margin-top: 12px; font-size: 13px; color: var(--muted-fg); min-height: 1.2em; }
.ts-status[data-tone="error"] { color: #B42318; }
.ts-status[data-tone="ok"] { color: var(--accent); font-weight: 600; }

.ts-privacy {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(4, 120, 87, .06);
  border: 1px solid rgba(4, 120, 87, .18);
  font-size: 12.5px;
  color: var(--fg);
}
.ts-privacy svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }

.ts-aside { display: grid; gap: 16px; }
.ts-faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 0 16px;
  margin-top: 8px;
}
.ts-faq summary {
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}
.ts-faq summary::-webkit-details-marker { display: none; }
.ts-faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 18px; }
.ts-faq details[open] summary::after { content: "–"; }
.ts-faq p { padding: 0 0 14px; font-size: 13.5px; color: var(--muted-fg); }
.ts-faq p + p { padding-top: 0; }

.ts-spec { margin-top: 10px; }
.ts-spec div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.ts-spec div:last-child { border-bottom: 0; }
.ts-spec dt { color: var(--muted-fg); flex: none; }
.ts-spec dd { margin: 0; text-align: right; }

/* ---------- 页脚 ---------- */
.ts-foot {
  margin-top: 56px;
  padding: 36px 0 28px;
  background: var(--muted);
  border-top: 1px solid var(--border);
}
.ts-foot__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.ts-foot__brand { display: flex; align-items: center; gap: 10px; }
.ts-foot__brand img { width: 32px; height: 32px; border-radius: 10px; }
.ts-foot__brand span { font-family: var(--display); font-size: 17px; }
.ts-foot__about { margin-top: 10px; font-size: 13px; color: var(--muted-fg); max-width: 26em; }
.ts-foot h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 12px;
}
.ts-foot__links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: var(--muted-fg);
}
.ts-foot__links a:hover { color: var(--accent); }
.ts-foot__legal {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-fg);
}
/* 只有法务行的窄页脚（工坊各页）：块顶部边界线已划出区域，行内不再叠线 */
.ts-foot__legal:only-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 备案号：与法务行同色系，可点击跳转工信部 */
.ts-foot__icp { color: inherit; }
.ts-foot__icp:hover { color: var(--accent); }

/* ---------- 移动端标签栏 ---------- */
.ts-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
.ts-tabbar a {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 0 4px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--muted-fg);
}
.ts-tabbar svg { width: 21px; height: 21px; }
.ts-tabbar a:hover { background: var(--muted); color: var(--fg); }
.ts-tabbar a[aria-current="page"] { color: var(--accent); }

@media (max-width: 899px) {
  body.ts { padding-bottom: 78px; }
}

/* ---------- ≥640px：工具栅格两列 ---------- */
@media (min-width: 640px) {
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥720px：页脚与说明区多列 ---------- */
@media (min-width: 720px) {
  .ts-notes { grid-template-columns: repeat(3, 1fr); }
  .ts-foot__cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
  .ts-updates li { flex-wrap: nowrap; }
}

/* ---------- ≥900px：桌面导航 ---------- */
@media (min-width: 900px) {
  .ts-head__inner { min-height: 72px; }
  .ts-nav { display: flex; }
  .brand__tag { padding-left: 10px; font-size: 12px; }
  .ts-tabbar { display: none; }
  body.ts { padding-bottom: 0; }
  .ts-sec { padding: 56px 0 4px; }
  .ts-hero { padding: 52px 0 16px; }
  .ts-home { --head-h: 72px; }
  .ts-home .ts-hero--fx { margin-top: calc(-1 * var(--head-h)); padding-top: calc(var(--head-h) + 52px); }
  .ts-hero__lead { font-size: 17px; }
  .ts-search { margin-top: 30px; }
  .ts-sec__head h2 { font-size: 28px; }
  .ts-tool-head { padding-top: 22px; }
  .ts-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; padding-top: 24px; }
}

/* ---------- ≥1024px：三列 ---------- */
@media (min-width: 1024px) {
  .ts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≥1280px：四列 ---------- */
@media (min-width: 1280px) {
  .ts-grid { grid-template-columns: repeat(4, 1fr); }
  .ts-container { padding: 0 24px; }
}

/* ---------- 图片在线编辑 ---------- */
.ed-stage {
  position: relative;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background-color: #fff;
  background-image: conic-gradient(#EDEFF2 25%, #fff 0 50%, #EDEFF2 0 75%, #fff 0);
  background-size: 16px 16px;
  overflow: hidden;
}
.ed-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}
.ed-crop {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgba(4, 120, 87, .12);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .30);
  cursor: move;
  touch-action: none;
  z-index: 3;
}
.ed-crop[hidden] { display: none; }
.ed-crop__h {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
  touch-action: none;
}
.ed-crop__h::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.ed-crop__h[data-handle="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.ed-crop__h[data-handle="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.ed-crop__h[data-handle="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ed-crop__h[data-handle="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ed-crop__h[data-handle="n"] { left: 50%; top: -8px; margin-left: -8px; cursor: ns-resize; }
.ed-crop__h[data-handle="s"] { left: 50%; bottom: -8px; margin-left: -8px; cursor: ns-resize; }
.ed-crop__h[data-handle="w"] { left: -8px; top: 50%; margin-top: -8px; cursor: ew-resize; }
.ed-crop__h[data-handle="e"] { right: -8px; top: 50%; margin-top: -8px; cursor: ew-resize; }
.ed-texts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.ed-text {
  position: absolute;
  transform-origin: 50% 50%;
  padding: 0;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  color: #111827;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  cursor: move;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ed-text.is-selected {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}
.ed-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ed-size .input { width: 104px; flex: 0 0 auto; }
.ed-size__x { font-family: var(--mono); color: var(--muted-fg); }
.ed-size__unit { font-size: 13px; color: var(--muted-fg); }
.ed-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ed-meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-fg);
}
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ed-toolbar .btn { flex: 0 1 auto; }
.ed-sub { margin-top: 22px; font-size: 15px; font-weight: 700; }
.ed-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 400;
}
.ed-check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- 在线计算器 ---------- */
.calc-screen {
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #F8FAFC;
  text-align: right;
}
.calc-expr {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: #0F172A;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-height: 38px;
}
.calc-preview {
  min-height: 20px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted-fg);
  word-break: break-all;
}
.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.calc-key {
  min-height: 52px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: #0F172A;
  font-size: 19px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .12s ease, transform .06s ease;
}
.calc-key:hover { background: #F1F5F9; }
.calc-key:active { transform: scale(.97); }
.calc-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-key--fn { background: #F1F5F9; color: var(--muted-fg); font-size: 17px; }
.calc-key--op { background: rgba(4, 120, 87, .08); color: var(--accent); font-size: 21px; }
.calc-key--op:hover { background: rgba(4, 120, 87, .16); }
.calc-key--eq { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 21px; }
.calc-key--eq:hover { background: var(--accent-sec); }

.calc-out-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.calc-out {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
  color: #0F172A;
  overflow-wrap: anywhere;
}
.calc-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.calc-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.calc-rows b {
  flex: 0 0 auto;
  font-family: inherit;
  font-weight: 700;
  color: var(--muted-fg);
  white-space: nowrap;
}
.calc-rows span { text-align: right; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .calc-expr { font-size: 26px; }
  .calc-key { min-height: 50px; font-size: 18px; }
  .calc-out { font-size: 17px; }
}

/* ---------- 工具页搜索：工坊模块与页面的命中 ---------- */
.ts-sitehits {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-sitehit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.ts-sitehit__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ts-sitehit__name {
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ts-sitehit__name:hover { color: var(--accent); }
.ts-sitehit__name mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.ts-sitehit__group {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--accent);
}
.ts-sitehit__sum {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-fg);
}