/* ============================================================
   轻工具箱 · Apple Design Language
   SF 字体栈 / 毛玻璃 / 分层阴影 / 大圆角 / 克制动效
   ============================================================ */
:root {
  --hair: rgba(0,0,0,.09);
  --bg: #ffffff;
  --bg-secondary: #F5F5F7;
  --card: #FFFFFF;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --accent: #0071E3;
  --accent-hover: #0077ED;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --border: rgba(0,0,0,.09);
  --border-light: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,.05), 0 16px 36px rgba(0,0,0,.11);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
html.dark {
  --hair: rgba(255,255,255,.11);
  --bg: #000000;
  --bg-secondary: #161617;
  --card: #1d1d1f;
  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6E6E73;
  --accent: #0A84FF;
  --accent-hover: #409CFF;
  --accent-soft: rgba(10, 132, 255, 0.15);
  --border: #38383D;
  --border-light: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
::selection { background: var(--accent); color: #fff; }

/* ---------- 毛玻璃导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--hair);
  transition: background 0.4s var(--ease);
}
html.dark .nav { background: rgba(18,18,20,.72); }
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}
.nav-logo { font-size: 20px; color: var(--accent); }
.nav-search { flex: 1; max-width: 280px; margin-left: auto; }
.nav-search input {
  width: 100%;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: box-shadow 0.25s var(--ease);
}
.nav-search input:focus { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.theme-toggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.25s;
}
.theme-toggle:hover { background: var(--border); }
.theme-toggle:active { transform: scale(0.92); }

/* ---------- Hero ---------- */
.hero {
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 22px 64px;
  text-align: center;
}
.hero-title {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 60%, var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: clamp(16px, 2.5vw, 19px);
  color: var(--text-secondary);
  line-height: 1.7;
  font-weight: 400;
}

/* ---------- 工具网格 ---------- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.tool-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hair);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: fadeUp 0.6s var(--ease) backwards;
}
.tool-card:nth-child(1) { animation-delay: .05s }
.tool-card:nth-child(2) { animation-delay: .1s }
.tool-card:nth-child(3) { animation-delay: .15s }
.tool-card:nth-child(4) { animation-delay: .2s }
.tool-card:nth-child(5) { animation-delay: .25s }
.tool-card:nth-child(6) { animation-delay: .3s }
.tool-card:nth-child(7) { animation-delay: .35s }
.tool-card:nth-child(8) { animation-delay: .4s }
.tool-card:nth-child(9) { animation-delay: .45s }
.tool-card:nth-child(10) { animation-delay: .5s }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.tool-card.wide { grid-column: 1 / -1; }
.tool-head { margin-bottom: 18px; }
.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tint, var(--accent));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 14px;
}
.tool-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.tool-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---------- 输入输出 ---------- */
.tool-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: var(--mono);
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.tool-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.tool-output {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 20px;
  max-height: 300px;
  overflow: auto;
  color: var(--text);
}
.tool-output:empty { display: none; }
.tool-output.error { color: #FF3B30; }
.mono { font-family: var(--mono); }

/* ---------- 按钮 ---------- */
.tool-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn {
  padding: 8px 18px;
  border: none;
  border-radius: 980px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.btn:hover { background: var(--border); }
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost {
  background: transparent;
  color: var(--accent);
}
.btn.ghost:hover { background: var(--accent-soft); }

/* ---------- 密码生成 ---------- */
.slider-label {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.slider-label b { color: var(--accent); font-family: var(--mono); }
input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.06);
  cursor: pointer;
}
.chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 980px;
  background: var(--bg-secondary);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.chip:has(input:checked) {
  background: var(--accent);
  color: #fff;
}
.chip input { accent-color: var(--accent); }

/* ---------- Diff ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.diff-out .diff-add { background: rgba(52, 199, 89, 0.15); color: #1F7A38; display: block; }
.diff-out .diff-del { background: rgba(255, 59, 48, 0.12); color: #C2170C; display: block; text-decoration: line-through; }
html.dark .diff-out .diff-add { color: #5BE584; }
html.dark .diff-out .diff-del { color: #FF8A80; }

/* ---------- Markdown 预览 ---------- */
.md-preview {
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.7;
  overflow: auto;
  max-height: 400px;
}
.md-preview h1, .md-preview h2, .md-preview h3 { margin: 0.8em 0 0.4em; line-height: 1.3; }
.md-preview h1 { font-size: 1.5em; }
.md-preview h2 { font-size: 1.3em; }
.md-preview p { margin: 0.5em 0; }
.md-preview code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 5px;
}
.md-preview pre {
  background: var(--bg);
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
  margin: 0.6em 0;
}
.md-preview pre code { background: none; padding: 0; }
.md-preview ul, .md-preview ol { padding-left: 1.5em; margin: 0.5em 0; }
.md-preview blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--text-secondary);
  margin: 0.6em 0;
}
.md-preview a { color: var(--accent); }
.md-preview strong { font-weight: 600; }

/* ---------- 二维码 ---------- */
.qr-result {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.qr-result canvas, .qr-result img {
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

/* ---------- 正则 ---------- */
.regex-out mark {
  background: rgba(255, 214, 10, 0.5);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
html.dark .regex-out mark { background: rgba(255, 214, 10, 0.35); }
.regex-groups {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 10px 22px;
  background: var(--text);
  color: var(--bg);
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: 200;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---------- 页脚 ---------- */
.footer {
  text-align: center;
  padding: 40px 22px 56px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.footer-sub { margin-top: 6px; font-size: 12px; opacity: 0.8; }

/* ---------- 隐藏的工具（搜索过滤）---------- */
.tool-card.hidden { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .container { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 22px 44px; }
  .tool-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 字数统计格子 ---------- */
.stat-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat-cell {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.stat-cell b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
}
.stat-cell span {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ---------- 密码强度条 ---------- */
.strength-bar {
  margin-top: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.strength-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.4s var(--ease), background 0.4s;
}
.strength-bar i.s1 { width: 25%; background: #FF3B30; }
.strength-bar i.s2 { width: 50%; background: #FF9500; }
.strength-bar i.s3 { width: 75%; background: #FFCC00; }
.strength-bar i.s4 { width: 100%; background: #34C759; }

/* ---------- 表单标签 ---------- */
.field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  width: 100%;
}
.field-row:has(.field-label) { flex-direction: row; gap: 12px; }
.field-row:has(.field-label) .field-label { flex: 1; }
@media (max-width: 560px) {
  .field-row:has(.field-label) { flex-direction: column; }
}

/* ---------- 番茄钟 ---------- */
.pomo-display {
  text-align: center;
  font-size: 56px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.pomo-display.running { color: var(--accent); }
.pomo-display.break { color: #34C759; }
.pomo-phase {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 6px 0 18px;
  letter-spacing: 0.15em;
}

/* ---------- 习惯打卡热力图 ---------- */
.habit-heatmap {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  margin: 18px 0 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.habit-cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}
.habit-cell:hover { transform: scale(1.25); }
.habit-cell.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.habit-cell[data-lv="1"] { background: rgba(48,209,88,.3); }
.habit-cell[data-lv="2"] { background: rgba(48,209,88,.5); }
.habit-cell[data-lv="3"] { background: rgba(48,209,88,.75); }
.habit-cell[data-lv="4"] { background: #30D158; }
html.dark .habit-cell[data-lv="1"] { background: rgba(48,209,88,.25); }
html.dark .habit-cell[data-lv="2"] { background: rgba(48,209,88,.45); }
.habit-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  justify-content: flex-end;
}
.habit-legend .hl { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hl-0 { background: var(--bg-secondary); }
.hl-1 { background: rgba(48,209,88,.3); }
.hl-2 { background: rgba(48,209,88,.5); }
.hl-3 { background: rgba(48,209,88,.75); }
.hl-4 { background: #30D158; }

/* ---------- BMI 刻度 ---------- */
.bmi-scale {
  position: relative;
  height: 8px;
  border-radius: 4px;
  margin-top: 16px;
  background: linear-gradient(90deg, #64D2FF 0%, #64D2FF 18%, #34C759 18%, #34C759 42%, #FFCC00 42%, #FFCC00 50%, #FF9500 50%, #FF9500 58%, #FF3B30 58%, #FF3B30 100%);
}
.bmi-scale i {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 4px;
  height: 18px;
  background: var(--text);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.4s var(--ease);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- 喝水进度 ---------- */
.water-progress {
  margin-top: 16px;
  height: 36px;
  border-radius: 18px;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.water-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #64D2FF, #0A84FF);
  border-radius: 18px;
  transition: width 0.5s var(--ease);
}
.water-progress span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  mix-blend-mode: normal;
}

/* ---------- 抽签结果 ---------- */
.draw-result {
  margin-top: 16px;
  min-height: 0;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  padding: 8px 0;
  letter-spacing: 0.02em;
}
.draw-result.pop { animation: drawPop 0.45s var(--ease); }
@keyframes drawPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 分类标题 ---------- */
.cat-title {
  grid-column: 1 / -1;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 28px 0 4px;
  padding-left: 4px;
}
.cat-title:first-of-type { margin-top: 0; }
.cat-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 8px;
}

/* ---------- 文件拖放区 ---------- */
.file-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 16px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.file-drop:hover, .file-drop.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.file-label {
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: block;
}
.img-preview {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.img-preview img {
  max-width: 140px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* ---------- 渐变预览 ---------- */
.gradient-preview {
  margin-top: 14px;
  height: 96px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #0071E3, #BF5AF2);
  transition: background 0.2s;
  box-shadow: var(--shadow-sm);
}

/* ---------- 阴影调试舞台 ---------- */
.shadow-stage {
  margin-top: 16px;
  padding: 36px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: center;
}
.shadow-box {
  width: 120px;
  height: 120px;
  background: var(--card);
  border-radius: 16px;
  transition: box-shadow 0.15s;
}

/* ---------- Emoji 大全 ---------- */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  margin-top: 14px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.emoji-grid button {
  font-size: 24px;
  padding: 8px 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  line-height: 1.2;
}
.emoji-grid button:hover {
  background: var(--accent-soft);
  transform: scale(1.15);
}
.emoji-grid button:active { transform: scale(0.95); }
.emoji-tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.emoji-tab.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ---------- 颜色转换器 ---------- */
.color-swatch {
  margin-top: 12px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--hair);
  transition: background 0.3s;
}

/* ---------- 调色板 ---------- */
.palette-strip {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.palette-strip span {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 10px;
  font-family: var(--mono);
  padding-bottom: 4px;
  cursor: pointer;
  transition: transform 0.15s;
}
.palette-strip span:hover { transform: scaleY(1.15); }

/* ---------- CSS 三角形 ---------- */
.tri-stage {
  margin-top: 14px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.tri-dir.active { background: var(--accent); color: #fff; }

/* ---------- ASCII 码表 ---------- */
.ascii-table {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.ascii-cell {
  padding: 6px 4px;
  text-align: center;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--bg-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.ascii-cell:hover { background: var(--accent-soft); }
.ascii-cell b { display: block; font-size: 16px; color: var(--accent); }

/* ---------- 下拉选择框 ---------- */
select.tool-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  cursor: pointer;
}

/* ============================================================
   v2 · 分类导航 / 收藏 / 返回顶部 / 新工具布局
   ============================================================ */
.layout{grid-column:1/-1;display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:start}
.cat-nav{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
.cat-nav a{padding:8px 12px;border-radius:9px;color:var(--text-secondary);text-decoration:none;font-size:13px}
.cat-nav a:hover{background:var(--accent-soft);color:var(--accent)}
.cat-nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.cat-chips{grid-column:1/-1;display:none;position:sticky;top:60px;z-index:40;gap:7px;overflow-x:auto;padding:8px 2px;background:var(--bg);scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips a{flex-shrink:0;padding:7px 13px;border-radius:999px;background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;text-decoration:none}
.cat-chips a.on{background:var(--accent-soft);color:var(--accent)}
.cat-chips a#fav-toggle.on{background:var(--accent);color:#fff}
@media(max-width:1100px){
  .layout{grid-template-columns:1fr}
  .cat-nav{display:none}
  .cat-chips{display:flex}
}
.tool-card{position:relative}
.fav-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:transparent;border-radius:8px;color:var(--text-tertiary);cursor:pointer;font-size:17px;line-height:1}
.fav-btn:hover{background:var(--accent-soft)}
.tool-card.is-fav .fav-btn{color:#FF9F0A}
.to-top{position:fixed;right:22px;bottom:26px;z-index:90;width:42px;height:42px;border-radius:50%;border:0.5px solid var(--border);background:var(--card);color:var(--text-secondary);font-size:18px;cursor:pointer;box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{color:var(--accent)}
.tool-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tool-grid2 label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-secondary)}
.tool-grid2 input[type=number],.tool-grid2 input[type=file]{width:100%}
.tool-select{width:100%;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:0 12px;font-family:var(--font);font-size:14px}
.tool-row{margin-bottom:12px}
.hero-back{margin:14px 0 2px;font-size:14px}
.hero-back a{color:var(--accent);text-decoration:none}

/* ============================================================
   v3 · 迷你卡网格 / 分类 Tab / 工具弹窗
   ============================================================ */
#tool-vault{grid-column:1/-1}
#tool-vault[hidden]{display:none}
.cat-tabs{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 16px;scrollbar-width:none;position:sticky;top:51px;z-index:40;background:var(--bg)}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{flex-shrink:0;padding:8px 16px;border-radius:999px;font-size:13px;text-decoration:none;color:var(--text-secondary);border:1px solid var(--border-light);background:var(--card)}
.cat-tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.mini-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mini-grid{grid-template-columns:1fr 1fr}}
.mini-card{position:relative;background:var(--card);border:1px solid var(--border-light);border-radius:14px;padding:16px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.mini-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;font-size:14px;font-weight:600;background:color-mix(in srgb,var(--tint) 12%,transparent);color:var(--tint)}
.mini-name{display:block;margin-top:10px;font-size:14px;font-weight:500;color:var(--text)}
.mini-desc{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--text-secondary)}
.mini-star{position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;background:transparent;border-radius:8px;color:var(--text-tertiary);cursor:pointer;font-size:15px;line-height:1}
.mini-star:hover{background:var(--accent-soft);color:#FF9F0A}
.mini-empty{grid-column:1/-1;text-align:center;color:var(--text-secondary);padding:48px 0;font-size:14px}
.tool-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 16px}
.tool-modal[hidden]{display:none}
.tool-modal-panel{background:var(--card);border-radius:18px;max-width:760px;width:100%;padding:22px 24px 28px;box-shadow:var(--shadow-lg)}
.tool-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tool-modal-head h3{margin:0;font-size:17px;font-weight:500;color:var(--text)}
.tm-close{width:32px;height:32px;border:none;border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary);font-size:18px;cursor:pointer}
.tm-close:hover{color:var(--text)}
.leaf{width:26px;height:26px;color:var(--accent);flex-shrink:0}

/* ============================================================
   v5 · 手机端专项优化
   ============================================================ */
@media(max-width:560px){
  .hero{padding-top:26px}
  .hero-title{font-size:30px !important}
  .hero-sub{font-size:14px}
  .hero-back{font-size:13px}
  .nav-inner{gap:10px}
  .nav-search{flex:1}
  .nav-search input{height:42px;font-size:14px}
  .cat-tabs{top:51px;padding:6px 2px 12px}
  .cat-tabs a{padding:10px 16px;font-size:13px}
  .mini-grid{gap:10px}
  .mini-card{padding:14px;border-radius:12px}
  .mini-name{font-size:13px}
  .mini-desc{font-size:11px}
  .mini-star{width:38px;height:38px;top:6px;right:6px;font-size:16px}
  .btn{min-height:44px}
  .tool-input{font-size:16px}
  /* 弹窗手机全屏化 */
  .tool-modal{padding:0;align-items:stretch}
  .tool-modal-panel{max-width:none;width:100%;min-height:100vh;border-radius:0;padding:14px 16px calc(28px + env(safe-area-inset-bottom))}
  .tool-modal-head{position:sticky;top:0;z-index:5;background:var(--card);margin:0 -16px 14px;padding:10px 16px;border-bottom:1px solid var(--hair)}
  .tool-modal-head h3{font-size:16px}
  .tm-close{width:40px;height:40px;font-size:20px}
  .footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
/* 触控目标：星标桌面端也加大 */
.mini-star{width:34px;height:34px}
a{-webkit-tap-highlight-color:rgba(0,113,227,.12)}
.tool-modal-body .tool-card{background:transparent;border:none;box-shadow:none;border-radius:0;padding:0}
.tool-modal-body .tool-card:hover{transform:none}
.aic-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.aic-row .tool-select{width:110px;flex-shrink:0;height:40px;padding:0 8px}
.aic-row .tool-input{flex:1}
.aic-del{width:32px;height:40px;border:none;background:var(--bg-secondary);border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:16px;flex-shrink:0}
.aic-del:hover{color:var(--accent)}
.aim-table table{width:100%;border-collapse:collapse;font-size:12px}
.aim-table th,.aim-table td{padding:7px 8px;border-bottom:1px solid var(--hair);text-align:left;white-space:nowrap}
.aim-table th{color:var(--text-secondary);font-weight:500}
.aim-table td:first-child{font-weight:500;color:var(--text)}
.aim-note{font-size:11px;color:var(--text-tertiary);margin-top:8px}
.dp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dp-chip{border:1px solid var(--hair);background:var(--bg-secondary);border-radius:999px;padding:5px 10px;font-size:12px;color:var(--text-secondary);cursor:pointer;user-select:none}
.dp-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pf-var-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.pf-var-row label{width:110px;font-size:12px;color:var(--text-secondary);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-var-row .tool-input{flex:1}
/* v9 输出区交互增强 */
.out-wrap{position:relative}
.out-wrap .tool-output{padding-right:52px}
.out-copy{position:absolute;top:6px;right:6px;border:1px solid var(--hair);background:var(--bg);color:var(--text-secondary);border-radius:7px;font-size:11px;padding:3px 9px;cursor:pointer;opacity:0;transition:opacity .15s ease}
@media (hover:hover){.out-wrap:hover .out-copy,.out-copy:focus-visible{opacity:1}}
@media (hover:none){.out-copy{opacity:.9}}
.out-copy:hover{color:var(--accent);border-color:var(--accent)}
.out-copy:active{transform:scale(.94)}
pre.tool-output:empty::before{content:"结果将显示在这里";color:var(--text-tertiary);font-size:12px}
.tool-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tc-opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;font-size:12px;color:var(--text-secondary);align-items:center}
.tc-opts label{display:flex;align-items:center;gap:4px;cursor:pointer}
.tc-opts input[type=checkbox]{accent-color:var(--accent)}
.tc-opts .tool-select{height:30px;padding:0 6px;border:1px solid var(--hair);border-radius:7px;background:var(--bg);color:var(--text)}
.tc-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);flex:1}
.tc-label input[type=range]{flex:1}

/* ===== v13 动效体系 ===== */
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes outFlash{0%{background:var(--accent-soft)}100%{background:transparent}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tool-modal{animation:fadeIn .18s ease}
.tool-modal.closing{opacity:0;transition:opacity .16s ease}
.tool-modal-panel{will-change:transform,opacity}
.tool-modal:not([hidden]):not(.closing) .tool-modal-panel{animation:panelIn .26s cubic-bezier(.32,.72,.34,1)}
.tool-modal.closing .tool-modal-panel{transform:translateY(12px) scale(.98);transition:transform .16s ease}
.mini-card{animation:cardIn .4s both}
.mini-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mini-icon{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.mini-card:hover .mini-icon{transform:scale(1.1) rotate(-6deg)}
.tool-output.flash{animation:outFlash .7s ease}
.btn{transition:transform .12s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.btn:active{transform:scale(.96)}
.chip{transition:transform .12s ease,background .18s ease,color .18s ease}
.chip:active{transform:scale(.95)}
.cat-tabs a{transition:background .18s ease,color .18s ease,transform .12s ease}
.cat-tabs a:active{transform:scale(.95)}
.tool-input{transition:border-color .18s ease,box-shadow .18s ease}
.tool-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mini-empty::before{content:"🔍";display:block;font-size:26px;margin-bottom:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .tool-modal.closing{opacity:1}
}
.regex-replace{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.regex-rep-h{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.regex-rep-pre{margin:0;white-space:pre-wrap;word-break:break-all;font-size:12px;color:var(--text);background:var(--accent-soft);border-radius:8px;padding:10px}