/* ==========================================================================
   工具页共用样式 —— tools/tool.css
   --------------------------------------------------------------------------
   谁用：tools/<slug>/ 下每个工具页。引法（顺序别改，共 4 个）：
       /css/tailwind.min.css  →  /css/fonts-late.css  →  /tools/tool.css  →  本工具 style.css

   设计方向：中性浅色「仪器」风 —— 浅灰底 + 白卡片 + 1px 发丝描边；单一克制的
             青色 (teal) 强调。去玻璃拟态、去霓虹发光：像工具，不像装饰页。

   约定
   · 本文件是工具页外观的**唯一来源**：背景 / 卡片 / 按钮 / 表单 / 滑块 / 分段选择都在这。
     工具私有的布局才写进各自的 style.css。
   · 工具页**也引** tailwind.min.css（提供 normalize + 备用工具类），但外观**不依赖**它：
     本文件自带一份最小重置，去掉 tailwind 也不会跑版。
   · 旧变量名 --macaron-* / --glass-* / --pink-* 现在只是**兼容别名**（旧私有样式还在用）；
     新写的规则请用语义色：--accent / --ok / --warn / --danger + --surface / --border / --text-*。
   · 自检 INV-TOOLS（.test_script/check-invariants.sh）会检查：工具页引用了本文件、
     且未引主站脚本 / 主站样式。
   ========================================================================== */

:root {
  /* —— 语义色板（暖白 · 马卡龙；新代码请用这些）—— */
  --bg-page: #fbf9f5; /* 暖白底 */
  --bg-page-2: #f6f1ea;

  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f5f2eb; /* 内嵌底 / 分区轨道 */

  --border: #ece7e0; /* 发丝描边 */
  --border-strong: #e2dbd1;

  --text: #1c1917; /* 主文字（深） */
  --text-2: #57534e; /* 次要 */
  --text-3: #a8a29e; /* 弱 / 说明 */

  --accent: #f43f5e; /* 玫瑰：主按钮 / 焦点 / 选中 */
  --accent-strong: #e11d48;
  --accent-soft: rgba(244, 63, 94, 0.1);
  --accent-ring: rgba(244, 63, 94, 0.28);

  --ok: #0e9f6e;
  --warn: #d97706;
  --danger: #dc2626;

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 6px 20px -6px rgba(180, 160, 150, 0.28);

  --radius: 10px;
  --radius-lg: 16px;

  /* —— 分区强调色（卡片标题的小色块 / 选中态用它；由 .card-* 赋给 --card-accent）—— */
  --rose: #f43f5e;
  --emerald: #659e87;
  --purple: #7e79b5;
  --amber: #f59e0b;
  --sky: #0ea5e9;
  --stone: #78716c;

  /* 工具页字距（比主站紧一点，读数更整齐） */
  --en-letter-spacing: 0.02em;

  /* —— 兼容别名（旧私有样式在用；新代码别用）—— */
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-page-2);
  --page-gradient: linear-gradient(180deg, var(--bg-page), var(--bg-page-2));

  --bg-glass: var(--surface);
  --bg-glass-hover: var(--surface-2);
  --glass-cream: var(--surface);
  --glass-blush: var(--surface);
  --glass-sky: var(--surface);
  --glass-mint: var(--surface);
  --glass-lilac: var(--surface);
  --glass-peach: var(--surface);
  --glass-sand: var(--surface);

  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);

  --pink-accent: var(--accent);
  --pink-light: #fbd0d7;
  --pink-glow: var(--accent-ring);
  --pink-deep: var(--accent-strong);

  --border-color: var(--border);
  --border-hover: var(--border-strong);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  --macaron-mint: var(--ok);
  --macaron-mint-rgb: 14, 159, 110;
  --macaron-mint-ink: var(--ok);
  --macaron-peach: var(--warn);
  --macaron-peach-rgb: 217, 119, 6;
  --macaron-peach-ink: var(--warn);
  --macaron-pink: var(--danger);
  --macaron-pink-rgb: 220, 38, 38;
  --macaron-pink-ink: var(--danger);
  --macaron-cyan: var(--accent);
  --macaron-cyan-rgb: 244, 63, 94;
  --macaron-cyan-ink: var(--accent-strong);
  --macaron-purple: var(--purple);
  --macaron-purple-rgb: 126, 121, 181;
  --macaron-purple-ink: #5b569b;
  --macaron-sky: var(--sky);
  --macaron-sky-rgb: 14, 165, 233;
  --macaron-sky-ink: #0369a1;
}

/* --------------------------------------------------------------------------
   基础 / 背景
   注：外观**不依赖** tailwind，所以这里自带一份最小 normalize（其中 box-sizing 最关键：
       少了它，width:100% + 内边距会横向溢出、右侧内容被挤出屏幕）。
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

html {
  background: var(--bg-page);
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  font-size: 15px;
  color: var(--text);
  font-family: 'english', 'chinese', sans-serif;
  letter-spacing: var(--en-letter-spacing);
  background: var(--page-gradient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

input,
select,
textarea,
button {
  font-family: 'english', 'chinese', sans-serif;
  letter-spacing: var(--en-letter-spacing);
}

a {
  color: inherit;
  text-decoration: none;
}

/* 视觉隐藏但保留在无障碍树 / 可聚焦（用于隐藏的 file input 等） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* 滚动条：中性灰（不再是粉色） */
* {
  scrollbar-width: thin;
  scrollbar-color: #c3cbd2 transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #c3cbd2;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: #a9b3bc;
}

/* --------------------------------------------------------------------------
   页面外壳（限宽居中，与主站内容区一致）
   -------------------------------------------------------------------------- */
.tool-shell {
  width: 100%;
  /* 与主站外层容器同宽：index.html 的 .max-w-[1680px].mx-auto */
  max-width: 1680px;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 4rem;
}

.tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.tool-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

.tool-sub {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.glass-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* 家族底色类：统一白面，但每个家族带一个强调色（分区配色，保留类名不动 HTML） */
.card-sand,
.card-blush,
.card-sky,
.card-mint,
.card-lilac,
.card-peach {
  background: var(--surface);
}
.card-blush { --card-accent: var(--rose); }
.card-lilac { --card-accent: var(--purple); }
.card-mint { --card-accent: var(--emerald); }
.card-peach { --card-accent: var(--amber); }
.card-sky { --card-accent: var(--sky); }
.card-sand { --card-accent: var(--stone); }

/* 卡片留白 / 标题 / 字段行距 = 所有工具页共用的**密度基准**（偏紧凑）。
   改这里会同时影响全部工具页；单个工具页要更松，请在自己的 style.css 里覆盖，别改这里。 */
.card-pad {
  padding: 0.9rem 1rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
/* 分区色块：每个分区一个颜色（--card-accent），一眼区分 */
.card-title::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--card-accent, var(--accent));
}

/* --------------------------------------------------------------------------
   表单
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.62rem;
}
.field:last-child {
  margin-bottom: 0;
}

/* 一行式字段：标签 [输入] 单位（给 .field 加 .row）
   —— 标签固定宽度、右对齐贴输入框；unit 贴在输入框右侧；chips 自动落到第二行整行。 */
.field.row {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0.35rem;
}
.field.row > .field-label {
  display: block;
  margin: 0;
  white-space: nowrap;
  justify-self: end;
  color: var(--text-2);
}
.field.row > .unit,
.field.row > .hint {
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.field.row > .chips {
  grid-column: 1 / -1;
  margin-top: 0;
}
.field.row > .seg {
  justify-self: start;
}
.field.row > .range {
  grid-column: 2;
}
.field.row > .readout-inline,
.field.row > .range-ends {
  grid-column: 2 / -1;
}

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-2);
}
.field-label .hint {
  font-size: 0.68rem;
  color: var(--text-3);
}

.input,
select.input,
textarea.input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:hover {
  border-color: var(--border-strong);
}
.input:focus,
select.input:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input[readonly] {
  color: var(--text-2);
  background: var(--surface-3);
}

/* range 滑块（20px 高点击区，视觉轨道 4px） */
input[type="range"].range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
input[type="range"].range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
input[type="range"].range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
input[type="range"].range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
input[type="range"].range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--accent-ring);
}
input[type="range"].range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
input[type="range"].range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
}

/* --------------------------------------------------------------------------
   分段选择（选中态用青色）
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 0.78rem;
  padding: 0.32rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.seg button:hover {
  color: var(--text);
}
.seg button.is-active {
  background: var(--card-accent, var(--accent));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12);
}
.seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   预设值快捷 chip（如 电压 3.7 / 4.2）
   用法：<div class="chips" data-for="目标输入框id"> <button data-val="4.2">4.2</button> ... </div>
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.chips button {
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chips button:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.chips button.is-active {
  background: var(--card-accent, var(--accent));
  border-color: var(--card-accent, var(--accent));
  color: #fff;
  font-weight: 600;
}
.chips button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.btn:active:not(:disabled) {
  background: var(--surface-3);
}
.btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-primary:active:not(:disabled) {
  background: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   工具页页头 tab（导航项）：挂在 .tool-head 里，当前项用强调下划线
   --------------------------------------------------------------------------
   用法：<nav class="tool-nav" role="tablist"><button class="is-active">A</button><button>B</button></nav>
   层级：标题(1.35rem/700) > 导航项(1rem/600，选中 800 + 玫瑰下划线) > 副标题(0.8rem/弱)
   ⚠️ vape 计算器还留着一份同数值的旧副本 .vape-nav（在它自己的 style.css 里）；
      以后再动导航样式，两处要一起改，或者把 vape 也迁到 .tool-nav。
   -------------------------------------------------------------------------- */
.tool-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
}
.tool-nav button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.45rem 0.7rem 0.6rem;
  cursor: pointer;
  transition: color 0.18s ease;
}
.tool-nav button:hover {
  color: var(--text);
}
.tool-nav button.is-active {
  color: var(--accent-strong);
  font-weight: 800;
}
.tool-nav button.is-active::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.08rem;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.tool-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   拖放区
   -------------------------------------------------------------------------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 2.4rem 1.25rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dropzone:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.dropzone.is-drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone svg {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   动效 / 进度环
   -------------------------------------------------------------------------- */
@keyframes toolFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-in {
  animation: toolFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes toolSpin {
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: toolSpin 0.9s linear infinite;
}

@keyframes toolPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.pulse {
  animation: toolPulse 1.4s ease-in-out infinite;
}

.ring-track {
  stroke: var(--border);
}
.ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}