/* =============================================================
   工具页通用外壳：顶部导航条（返回工具箱 + 当前工具名）
   所有工具页通过 <link rel="stylesheet" href="../assets/tool-bar.css"> 引入。
   自带浅色/深色自适应，跟随系统 prefers-color-scheme。
   用 position: sticky 而非 fixed —— 不脱离文档流，避免遮挡各工具原有的首屏内容。
   ============================================================= */
:root {
  --tp-bar-bg: rgba(255, 255, 255, 0.78);
  --tp-bar-border: rgba(15, 23, 42, 0.09);
  --tp-bar-text: #0f172a;
  --tp-bar-muted: #64748b;
  --tp-bar-accent: #6366f1;
  --tp-bar-hover-bg: rgba(99, 102, 241, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tp-bar-bg: rgba(13, 18, 32, 0.72);
    --tp-bar-border: rgba(255, 255, 255, 0.10);
    --tp-bar-text: #e6ebf5;
    --tp-bar-muted: #94a3b8;
    --tp-bar-accent: #818cf8;
    --tp-bar-hover-bg: rgba(129, 140, 248, 0.16);
  }
}

.tp-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem clamp(1rem, 4vw, 2rem);
  background: var(--tp-bar-bg);
  border-bottom: 1px solid var(--tp-bar-border);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.tp-bar__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  padding: .35rem .7rem;
  border-radius: 8px;
  color: var(--tp-bar-muted);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  transition: color .18s ease, background-color .18s ease, gap .18s ease;
}

.tp-bar__back:hover {
  color: var(--tp-bar-accent);
  background: var(--tp-bar-hover-bg);
  gap: .6rem;
}

.tp-bar__back:focus-visible {
  outline: 2px solid var(--tp-bar-accent);
  outline-offset: 2px;
}

.tp-bar__title {
  min-width: 0;
  color: var(--tp-bar-text);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .tp-bar__back span {
    display: none; /* 窄屏只留返回箭头，给标题让位 */
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-bar__back {
    transition: none;
  }
}