/* ============================================================
 *  安全工具箱 /tools —— 全宽 + 左侧工具菜单（仿文章详情左栏）
 * ============================================================ */
.page-tools .tools {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.page-tools .tools::-webkit-scrollbar { width: 8px; }
.page-tools .tools::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* 全宽栅格：左菜单 + 右内容 */
.tools__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-lg) var(--edge-pad) 140px;
  display: grid;
  grid-template-columns: var(--detail-list-width) 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* ── 左侧工具菜单 ── */
.tool-nav {
  position: sticky;
  top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-right: 1px solid var(--border);
  padding-right: var(--space-lg);
  min-height: 0;
}
.tool-nav__brand { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); }
.tool-nav__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2.5px; color: var(--text-ghost); }
.tool-nav__title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--text-heading); margin-top: 3px; }

.tool-nav__list { display: flex; flex-direction: column; gap: 4px; }
.tool-nav__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.tool-nav__item:hover { background: var(--bg-surface-hover); }
.tool-nav__item.is-active { background: var(--bg-surface); border-left-color: var(--text-heading); }
.tool-nav__name { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.tool-nav__item.is-active .tool-nav__name { color: var(--text-heading); }
.tool-nav__sub { font-size: 11.5px; color: var(--text-muted); }

.tool-nav__note { font-size: 11px; color: var(--text-ghost); line-height: 1.6; margin-top: auto; padding-top: var(--space-md); }

/* ── 右侧内容 ── */
.tool-main { min-width: 0; }
.toolpane { animation: tool-fade 240ms ease both; }
@keyframes tool-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.toolpane__head { margin-bottom: var(--space-lg); }
.toolpane__title { font-family: var(--font-heading); font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--text-heading); line-height: 1.2; }
.toolpane__desc { margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); max-width: 760px; }

/* ── 通用控件 ── */
.tool-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: var(--space-md) 0 6px; }
.tool-input, .tool-output, .tool-select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-body); font-size: 13.5px;
  padding: 10px 12px; font-family: var(--font-body);
}
.tool-input.mono, .tool-output.mono { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.tool-input:focus, .tool-select:focus { outline: none; border-color: var(--border-strong); }
textarea.tool-input { resize: vertical; }
.tool-output { white-space: pre-wrap; word-break: break-all; min-height: 44px; margin: 0; }
.tool-select { width: auto; min-width: 180px; cursor: pointer; }
.tool-row { display: flex; align-items: center; gap: var(--space-md); }
.tool-label--flat { margin: 0; }
.tool-hint--inline { display: inline; margin: 0; }
.tool-divider { height: 1px; background: var(--border); margin: var(--space-xl) 0 0; }
.tool-hint { font-size: 12px; color: var(--text-muted); margin-top: var(--space-sm); line-height: 1.5; }
.tool-hint.is-error { color: var(--severity-critical); }
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.tool-btn {
  font-family: var(--font-body); font-size: 12.5px; padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-secondary); cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tool-btn:hover { border-color: var(--border-strong); color: var(--text-heading); background: var(--bg-surface-hover); }
.tool-btn--primary { background: var(--text-heading); color: var(--bg-surface); border-color: var(--text-heading); }
.tool-btn--primary:hover { background: #000; color: var(--bg-surface); }

/* ── 问号 / 悬停详解 ── */
.help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: help; flex: 0 0 auto;
}
.help:hover, .help:focus { color: var(--bg-surface); background: var(--text-heading); border-color: var(--text-heading); outline: none; }
.help__tip {
  display: none; position: absolute; left: 50%; top: 150%; transform: translateX(-50%);
  z-index: 30; width: 270px; max-width: 72vw;
  background: var(--text-heading); color: #e9e9e6;
  padding: 10px 12px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 400; line-height: 1.65;
  text-align: left; box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}
.help__tip b { color: #fff; }
.help__tip .opt { color: #fff; font-family: var(--font-mono); }
.help__tip-options { margin-top: 6px; }
.help:hover .help__tip, .help:focus .help__tip { display: block; }

/* ============================================================
 *  CVSS
 * ============================================================ */
.tool-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-xl); align-items: start; }
.metric-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
.metric { min-width: 0; }
.metric__name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-heading); margin-bottom: 6px; }
.metric__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.metric__opt {
  font-family: var(--font-body); font-size: 12px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.metric__opt:hover { border-color: var(--border-strong); color: var(--text-heading); }
.metric__opt.is-active { background: var(--text-heading); color: var(--bg-surface); border-color: var(--text-heading); }

.cvss-result {
  position: sticky; top: var(--space-md);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-body) 100%);
  padding: var(--space-lg); text-align: center;
}
.cvss-score { font-family: var(--font-heading); font-size: 56px; font-weight: 800; line-height: 1; color: var(--text-heading); }
.cvss-sev { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; }
.cvss-sev--critical { color: var(--severity-critical); } .cvss-score--critical { color: var(--severity-critical); }
.cvss-sev--high { color: var(--severity-high); } .cvss-score--high { color: var(--severity-high); }
.cvss-sev--medium { color: var(--severity-medium); } .cvss-score--medium { color: var(--severity-medium); }
.cvss-sev--low { color: var(--severity-low); } .cvss-score--low { color: var(--severity-low); }
.cvss-sev--none { color: var(--text-muted); }
.cvss-vector-wrap { margin-top: var(--space-md); }
.cvss-vector { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-code); padding: 8px; border-radius: var(--radius); word-break: break-all; line-height: 1.5; }
.cvss-vector-wrap .tool-btn { margin-top: 8px; width: 100%; }
.cvss-breakdown { margin-top: var(--space-md); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); text-align: left; line-height: 1.7; }
.cvss-breakdown span { color: var(--text-heading); }

/* ── JWT ── */
.jwt-out { margin-top: var(--space-lg); }
.jwt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.jwt-block__title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
.jwt-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.jwt-tag { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 9px; border-radius: var(--radius); background: var(--bg-code); color: var(--text-heading); }
.jwt-tag--warn { background: var(--severity-high-bg); color: var(--severity-high); }
.jwt-tag--bad { background: var(--severity-critical-bg); color: var(--severity-critical); }
.jwt-tag--ok { background: var(--severity-low-bg); color: var(--severity-low); }
.jwt-verify { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed var(--border); }
.jwt-verify-out { margin-top: var(--space-md); font-size: 13px; font-weight: 600; min-height: 1.2em; }
.jwt-verify-out .ok { color: var(--severity-low); }
.jwt-verify-out .bad { color: var(--severity-critical); }
.jwt-verify-out .neutral { color: var(--text-muted); font-weight: 400; }

/* ── Hash ── */
.hash-out { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.hash-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-sm); align-items: center; }
.hash-row__name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hash-row__val { font-family: var(--font-mono); font-size: 12px; color: var(--text-heading); word-break: break-all; background: var(--bg-code); padding: 6px 9px; border-radius: var(--radius); cursor: pointer; }
.hash-row__val:hover { background: var(--bg-surface-hover); }
.hashid-out { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ── 数据脱敏 ── */
.ds-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ds-rule {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 10px; background: var(--bg-surface);
  transition: border-color var(--transition), color var(--transition);
}
.ds-rule:hover { border-color: var(--border-strong); color: var(--text-heading); }
.ds-rule input { accent-color: var(--text-heading); }
.ds-opts { margin: 8px 0 var(--space-sm); }
.ds-check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary);
}
.ds-check input { accent-color: var(--text-heading); }
.ds-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); min-height: 1.2em; }

/* ── 正则测试 ── */
.rgx-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.rgx-preset {
  font-size: 12px; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.rgx-preset:hover { border-color: var(--border-strong); color: var(--text-heading); background: var(--bg-surface-hover); }
.rgx-flags { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: var(--space-sm) 0; font-size: 12.5px; color: var(--text-secondary); }
.rgx-flags > span { color: var(--text-muted); }
.rgx-flags label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.rgx-flags input { accent-color: var(--text-heading); }
.rgx-highlight {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-all; color: var(--text-body);
  max-height: 240px; overflow: auto;
}
.rgx-highlight mark { background: var(--severity-medium-bg); color: var(--severity-medium); border-radius: 2px; padding: 0 1px; }
.rgx-matches { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); max-height: 200px; overflow: auto; }
.rgx-matches .m { padding: 4px 0; border-bottom: 1px solid var(--border); word-break: break-all; }
.rgx-matches .m:last-child { border-bottom: none; }
.rgx-matches .g { color: var(--text-muted); }

/* ============================================================
 *  响应式：窄屏左菜单变顶部横向
 * ============================================================ */
@media (max-width: 920px) {
  .tools__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .tool-nav {
    position: static; flex-direction: column; gap: var(--space-sm);
    border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: var(--space-md);
  }
  .tool-nav__list { flex-direction: row; flex-wrap: wrap; }
  .tool-nav__item { flex: 1 1 auto; border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius); }
  .tool-nav__item.is-active { border-left: none; border-bottom-color: var(--text-heading); }
  .tool-nav__note { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .cvss-result { position: static; }
}
@media (max-width: 560px) {
  .metric-groups { grid-template-columns: 1fr; }
  .jwt-cols { grid-template-columns: 1fr; }
}