/* ==========================================================================
   xj-tool 公共样式
   设计原则：平面。不用阴影、渐变动效和悬浮位移，只用边框和留白划分层级。
   暗色主题通过 <html data-theme="dark"> 切换，变量集中在 :root / [data-theme]
   ========================================================================== */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --border: #e4e7eb;
  --border-strong: #c9ced6;
  --text: #1f2328;
  --text-dim: #6b7280;
  --placeholder: #a8aeb8;
  --accent: #2f6feb;
  --accent-text: #ffffff;
  --accent-soft: #eaf1fe;
  --danger: #d1242f;
  --danger-soft: #fdecee;
  --ok: #1a7f37;
  --ok-soft: #e9f6ec;
  --json-bool: #8250df;
  --radius: 6px;
  --radius-sm: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2129;
  --border: #2d333b;
  --border-strong: #444c56;
  --text: #e6edf3;
  --text-dim: #9099a4;
  --placeholder: #666e7a;
  --accent: #58a6ff;
  --accent-text: #0d1117;
  --accent-soft: #17253a;
  --danger: #ff7b72;
  --danger-soft: #2d1a1c;
  --ok: #3fb950;
  --ok-soft: #12261a;
  --json-bool: #d2a8ff;
}

* { box-sizing: border-box; }

/* 始终给滚动条留位置：页面长短不同时切换，内容宽度不会来回跳 */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 触屏上快速连点链接 / 按钮会被浏览器当成双击缩放，整页突然变大；
   manipulation 只保留单击和滚动，关掉双击缩放手势 */
a, button, input, select, textarea, label { touch-action: manipulation; }

/* ---------- 布局骨架 ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* 顶栏铺满整个视口宽度，logo 贴左、主题切换贴右 */
.site-header__inner {
  max-width: none;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.logo:hover { text-decoration: none; }
.logo__mark { color: var(--accent); font-family: var(--mono); }

.spacer { flex: 1; }

/* 工具间快速切换：一级是分组，hover / 点击展开二级工具。
   菜单嵌在 site-header 里，和 logo 同一行，所以这里不再自带宽高和底边框 */
.tool-nav__inner {
  display: flex;
  gap: 18px;
}
.tool-nav__item {
  flex: 0 0 auto;
  /* 菜单项高度不能超过 logo，否则从首页（无菜单）进入工具页时顶栏会被撑高 */
  padding: 3px 0 1px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.tool-nav__item:hover { color: var(--text); text-decoration: none; }
.tool-nav__item.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.tool-nav__group { position: relative; flex: 0 0 auto; }

/* 一级分组是按钮，重置浏览器默认样式；默认用正文色，比二级更醒目 */
.tool-nav__group-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
}
.tool-nav__group-btn:hover { color: var(--accent); }
.tool-nav__group.is-active > .tool-nav__group-btn {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tool-nav__group.is-open > .tool-nav__group-btn { color: var(--accent); }

.tool-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 180px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility .12s;
}
/* 触屏 / 键盘：点击切换 */
.tool-nav__group.is-open > .tool-nav__sub {
  visibility: visible;
  opacity: 1;
}
/* 桌面：hover 展开。子菜单顶部紧贴一级项，移动过程中不会闪烁 */
@media (hover: hover) {
  .tool-nav__group:hover > .tool-nav__sub {
    visibility: visible;
    opacity: 1;
  }
}

.tool-nav__sub .tool-nav__item {
  display: block;
  padding: 7px 14px;
  border-bottom: 0;
}
.tool-nav__sub .tool-nav__item:hover {
  color: var(--text);
  background: var(--surface-2);
}
.tool-nav__sub .tool-nav__item.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 500;
}

/* 内容区默认占 90% 宽；JSON 格式化这类需要铺满的工具加 --full 排除 */
.site-main {
  max-width: 90%;
  margin: 0 auto;
  padding: 20px 20px 56px;
}
.site-main--full { max-width: none; }

/* 标题区保持窄栏；标题和描述分两行并整体居中 */
.page-head {
  max-width: 900px;
  margin: 0 auto 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.page-head h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.page-head p {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.site-footer {
  max-width: none;
  margin: 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

/* ---------- 首页 ---------- */

.search-box {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}
.search-box input {
  flex: 1;
  width: auto;
  padding: 8px 11px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box__clear {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.search-box__clear:hover { color: var(--text); border-color: var(--border-strong); }

/* 一个大类一张卡片 */
.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cat-card + .cat-card { margin-top: 14px; }
.cat-card__head {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.cat-card__body { padding: 0 12px; }
.cat-card .tool-card:last-child { border-bottom: 0; }

/* 工具列表：一行一个，名称 + 说明同行 */

.tool-card {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tool-card:hover { text-decoration: none; }
.tool-card:hover .tool-card__name { color: var(--accent); }
/* 名称要明显压过右边那行灰色说明，不然整行看起来是一坨同等的文字 */
.tool-card__name {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.tool-card__desc {
  color: var(--placeholder);
  font-size: 12px;
  min-width: 0;
}

.empty {
  padding: 32px 0;
  text-align: center;
  color: var(--text-dim);
}

/* ---------- 工具页通用控件 ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}
/* 面板标题要压过同一行右侧的灰色 hint 和按钮，否则一整条读下来分不出主次 */
.panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.panel__body { padding: 12px; }

/* 面板标题栏里的操作控件做紧凑一些，别比标题还抢眼 */
.panel__head .btn { padding: 3px 8px; font-size: 12px; }
.panel__head select { padding: 2px 6px; font-size: 12px; }

/* 左右分栏：输入 / 结果并排，窄屏上下堆叠 */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.split > .panel { margin-bottom: 0; }

/* JSON 结果树：语法高亮 + 点击箭头折叠 */
.json-view {
  max-height: 66vh;
  overflow: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
.json-empty { color: var(--placeholder); font-size: 13px; }

.j-node { display: block; }
.j-toggle {
  display: inline-block;
  width: 11px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 10px;
  user-select: none;
}
.j-node:not(.is-collapsed) > .j-head .j-toggle::before { content: '▾'; }
.j-node.is-collapsed > .j-head .j-toggle::before { content: '▸'; }
.j-node .j-fold { display: none; }
.j-node.is-collapsed > .j-children,
.j-node.is-collapsed > .j-foot { display: none; }
.j-node.is-collapsed > .j-head .j-fold { display: inline; }

.j-children {
  margin-left: 5px;
  padding-left: 12px;
  border-left: 1px dashed var(--border);
}
.j-row { white-space: pre-wrap; word-break: break-word; }

.j-key { color: var(--accent); }
.j-str { color: var(--ok); }
.j-num { color: var(--danger); }
.j-bool { color: var(--json-bool); }
.j-null { color: var(--text-dim); }
.j-punc { color: var(--text-dim); }

/* 一行按钮 / 开关 */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.row + .row { margin-top: 10px; }

/* 表单行：一行里塞好几组「标签 + 输入框 + 单位」时用。
   组内贴紧、组间拉开，否则所有元素等距排开，看不出哪几个是一组的。 */
.row--fields { gap: 24px; }
.row--fields + .row--fields { margin-top: 12px; }
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 不许压缩：窄屏时要整组一起换行，不能把组里的输入框挤窄了还顶出容器 */
  flex: 0 0 auto;
}

.btn {
  padding: 5px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--text-dim); background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn--primary:hover:not(:disabled) { background: var(--accent); opacity: .88; }

textarea, input[type="text"], input[type="number"],
input[type="datetime-local"], input[type="date"], select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
textarea:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="datetime-local"]:focus, input[type="date"]:focus, select:focus {
  border-color: var(--accent);
}
textarea {
  display: block;
  resize: vertical;
  line-height: 1.55;
  tab-size: 2;
}

select { font-family: var(--font); cursor: pointer; }

/* placeholder 是提示不是内容，比说明文字再淡一档 */
::placeholder {
  color: var(--placeholder);
  /* Firefox 默认还会再叠一层透明度，不置 1 的话两套主题对不齐 */
  opacity: 1;
}


input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
label.inline { cursor: pointer; user-select: none; }

.hint {
  font-size: 12px;
  color: var(--text-dim);
}

/* 提示条 */
.alert {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 10px 0 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
}
.alert--error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.alert--ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }

/* 结果键值展示 */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 13px;
}
.kv__k { color: var(--text-dim); white-space: nowrap; }
.kv__v { word-break: break-all; }

/* 分期明细表：数字要等宽右对齐，才能一眼看出逐期趋势 */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}
.table th, .table td {
  padding: 5px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}
/* 第一列是存续时间不是金额，左对齐 */
.table th:first-child, .table td:first-child { text-align: left; }
.table tbody tr:last-child td { border-bottom: 0; }

/* 文件拖拽区 */
.drop {
  margin-bottom: 14px;
  padding: 18px;
  text-align: center;
  /* 和输入框的 placeholder 同一档：都是「这里还没内容」的提示语气 */
  color: var(--placeholder);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.drop:hover, .drop.is-over {
  border-color: var(--accent);
  color: var(--accent);
}
.drop input[type="file"] { display: none; }

/* 复制按钮的瞬时反馈 */
.copy-btn.is-done { color: var(--ok); border-color: var(--ok); }

/* ---------- 滑块 ---------- */

input[type="range"] {
  width: 150px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* ---------- 逐条结果列表（密码、图片等） ---------- */

.list { display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }

.list-row__main { flex: 1; min-width: 0; }

.list-row__title {
  font-family: var(--mono);
  word-break: break-all;
  line-height: 1.45;
}

.list-row__meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.list-row__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.delta-ok { color: var(--ok); }
.delta-bad { color: var(--danger); }

/* 强度条 */
.meter {
  height: 4px;
  margin-top: 6px;
  background: var(--surface-2);
  overflow: hidden;
}
.meter__fill { height: 100%; }

@media (max-width: 640px) {
  .site-main { padding: 16px 14px 40px; }
  .split { grid-template-columns: 1fr; }
  /* 窄屏也保持一行，靠缩小字号和内边距腾地方，主题按钮不能被挤出屏幕 */
  .site-header__inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .tool-nav__inner { gap: 10px; }
  .tool-nav__item { font-size: 12px; }
  .logo { font-size: 14px; gap: 4px; }
  .site-header .btn { padding: 3px 8px; font-size: 12px; }

  /* iOS 聚焦小于 16px 的输入框时会自动放大整个页面，手机端统一提到 16px */
  textarea, input[type="text"], input[type="number"],
  input[type="datetime-local"], input[type="date"], select { font-size: 16px; }
  .tool-card { flex-direction: column; gap: 0; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv__k { margin-top: 6px; }
}