/* ============================================================================
   工具页公共骨架（列表页 / 数据类工具共用）
   —— 只负责「布局 / 间距 / 区块节奏」，控件的颜色、圆角、高亮全部来自 ui-kit。
   用法：<div class="tp-tool"> 里放若干 .tp-sec（输入 / 设置 / 结果），
        设置区用 .tp-opts > .tp-opt（标签 + 控件，一行装不下自动换行），
        按钮用 .tp-acts，状态提示用 .tp-note，页脚用 .tp-foot。
   ========================================================================== */
.tp-tool { --gap: 16px; display: flex; flex-direction: column; gap: var(--gap); color: var(--ui-text); }
.tp-tool [hidden] { display: none !important; }

/* ---------- 区块与标题 ---------- */
.tp-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tp-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-sec-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.tp-sec-title .ui-i { color: var(--ui-primary); }
.tp-sec-hint { margin-left: auto; max-width: 62%; font-size: 12px; color: var(--ui-text-mute); text-align: right; }
.tp-sec-hint b { color: var(--ui-text); font-weight: 600; }
.tp-lb { font-size: 12.5px; color: var(--ui-text-mute); white-space: nowrap; }

/* ---------- 输入 ---------- */
.tp-ta > textarea { min-height: 148px; font-family: var(--font-mono); font-size: 13px; line-height: 1.72; }
.tp-ta.tp-ta-lg > textarea { min-height: 210px; }
.tp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 设置：一行一组，装不下换行 ---------- */
.tp-opts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; }
.tp-opt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tp-opt .ui-select { width: auto; }
.tp-opt .ui-input { width: auto; }
.tp-sel { min-width: 132px; }
.tp-sel-wide { min-width: 196px; }
.tp-key { width: 196px; }
.tp-key .ui-input { width: 100%; }
.tp-num input { width: 66px; }
.tp-unit { font-size: 12.5px; color: var(--ui-text-mute); }
.tp-tool .ui-switch-wrap { font-size: 12.5px; }

/* ---------- 按钮 ---------- */
.tp-acts { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-tool .ui-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.tp-menu { width: auto; }
.tp-menu .ui-panel { left: auto; right: 0; }

/* ---------- 状态行 ---------- */
.tp-note { text-align: center; font-size: 12px; line-height: 1.65; color: var(--ui-text-mute); min-height: 17px; }
.tp-note b { color: var(--ui-text); font-weight: 600; }
.tp-note code { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 4px; border-radius: 4px; background: var(--ui-bg-sub); color: var(--ui-text); }
.tp-note.ok { color: var(--ui-success-text, var(--green-500)); }
.tp-note.err { color: var(--ui-red, var(--red-500)); }
.tp-note.warn { color: var(--ui-amber-text, var(--ui-warning-text)); }

/* ---------- 结果：表格 / 空态 / 文本域 ---------- */
.tp-more { padding: 10px 14px; font-size: 12px; color: var(--ui-text-mute); text-align: center; background: var(--ui-bg-sub); border-top: 1px solid var(--ui-line-soft); }
.tp-empty { border: 1px dashed var(--ui-line); border-radius: var(--radius-md); background: var(--ui-bg-sub); }
.tp-empty .ui-empty { padding: 34px 20px; }
.tp-out > textarea { min-height: 260px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; word-break: break-all; }
.tp-mono { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.tp-no { width: 58px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ui-text-mute); }
.tp-nowrap { white-space: nowrap; }
.tp-sub { color: var(--ui-text-mute); font-size: 12px; }
.tp-bad { color: var(--ui-red, var(--gray-700)); }
.tp-good { color: var(--ui-success-text, var(--gray-700)); }

/* ---------- 画布 / 预览舞台（二维码、图片这类） ---------- */
.tp-stage {
  display: grid; place-items: center; padding: 22px; min-height: 240px;
  border: 1px solid var(--ui-line-soft); border-radius: var(--radius-md); background: var(--ui-bg-sub);
}
.tp-stage canvas, .tp-stage img { display: block; max-width: 100%; height: auto; border-radius: 6px; }

/* ---------- 页脚 ---------- */
.tp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid var(--ui-line-soft); font-size: 12px; color: var(--ui-text-mute); }

/* ---------- 详情页：应用场景小表 ---------- */
.tp-scene { margin-top: 12px; overflow-x: auto; }
.tp-scene table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tp-scene th, .tp-scene td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--ui-line-soft); vertical-align: top; }
.tp-scene th { font-size: 12px; font-weight: 600; color: var(--ui-text-mute); background: var(--ui-bg-sub); white-space: nowrap; }
.tp-scene td:first-child { white-space: nowrap; color: var(--ui-text); }
.tp-scene td:last-child { color: var(--ui-text-mute); }
.tp-scene code, .tp-detail-code code { font-family: var(--font-mono); font-size: 12px; padding: 1px 4px; border-radius: 4px; background: var(--ui-bg-sub); }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  .tp-sec-hint { margin-left: 0; width: 100%; max-width: none; text-align: left; }
  .tp-opts { flex-direction: column; align-items: stretch; gap: 10px; }
  .tp-opt { justify-content: space-between; }
  .tp-opt .ui-segmented { flex: 1; }
  .tp-opt .ui-segmented button { flex: 1; }
  .tp-opt .ui-select, .tp-opt .ui-input { flex: 1; width: auto; }
  .tp-table, .tp-table tbody, .tp-table tr, .tp-table td { display: block; }
  .tp-table thead { display: none; }
  .tp-table tr { padding: 11px 13px; border-bottom: 1px solid var(--ui-line-soft); }
  .tp-table tbody tr:last-child { border-bottom: 0; }
  .tp-table td { padding: 0; border: 0; width: auto !important; }
  .tp-table td.tp-no { font-size: 11px; margin-bottom: 3px; }
  .tp-table td.tp-cell-main { font-size: 13px; }
}
@media (max-width: 460px) {
  .tp-acts { gap: 8px; }
  .tp-acts .ui-btn, .tp-acts .tp-menu { flex: 1 1 calc(50% - 8px); padding: 0 8px; font-size: 13px; }
  .tp-acts .ui-btn.primary { flex: 1 1 100%; }
  .tp-menu > .ui-btn { width: 100%; }
  .tp-acts .ui-btn .ui-i { display: none; }
  .tp-acts .ui-btn.primary .ui-i, .tp-menu > .ui-btn .ui-i { display: inline-flex; }
}