/* ===== 文本工具（/tools/text/）===== */
.tool-text {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--sp-5);
}
.tool-text-header { margin-bottom: var(--sp-4); }
.tool-text-header h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); line-height: 1.25; color: var(--text); }
.tool-text-header p { margin: 0; color: var(--text-muted); }

.tool-text-panel[hidden] { display: none; }

/* 输入 / 输出区 */
.tool-text-area {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 320px; resize: vertical;
    font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
    white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4;
}
.tool-text-area[readonly] { background: var(--bg-hover); }
.tool-text-io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* 工具栏 */
.tool-text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tool-text-opt { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.tool-text-opt input[type="checkbox"] { accent-color: var(--accent); }
.tool-text-opt select, .tool-text-select { width: auto; padding-top: 5px; padding-bottom: 5px; }

.tool-text-groups { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tool-text-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool-text-group > span { width: 92px; flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.tool-text-status { min-height: 1.5em; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.tool-text-status.is-ok { color: var(--success); }
.tool-text-status.is-error { color: var(--danger); }

.tool-text-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.tool-text-actions[hidden] { display: none; }

/* 统计 */
.tool-text-panel[data-panel="stats"] .tool-text-area { width: 100%; min-height: 280px; white-space: pre-wrap; font-family: inherit; font-size: var(--fs-base); }
.tool-text-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.tool-text-stat { display: grid; align-content: start; gap: 2px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.tool-text-stat span { font-size: var(--fs-xs); color: var(--text-muted); }
.tool-text-stat strong { font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.tool-text-stat small { font-size: var(--fs-xs); color: var(--text-muted); }

/* 时间戳 */
.tool-text-now { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); background: var(--bg-hover); }
.tool-text-now > div { display: flex; align-items: center; gap: var(--sp-2); }
.tool-text-now span { font-size: var(--fs-sm); color: var(--text-muted); }
.tool-text-now strong { font-family: var(--font-mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.tool-text-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tool-text-time-card { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.tool-text-time-card .yb-input { width: 100%; box-sizing: border-box; }
.tool-text-time-card h3 { margin: 0; font-size: var(--fs-md); }
.tool-text-time-result { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.tool-text-time-result:empty { display: none; }
.tool-text-time-result dt { color: var(--text-muted); }
.tool-text-time-result dd { margin: 0; font-family: var(--font-mono); color: var(--text); word-break: break-all; }

/* 对比 */
.tool-text-panel[data-panel="diff"] .tool-text-area { min-height: 220px; }
.tool-text-diff-summary { margin-left: auto; font-size: var(--fs-sm); }
.tool-text-diff-summary .is-add { color: var(--success); font-weight: 600; }
.tool-text-diff-summary .is-del { color: var(--danger); font-weight: 600; }
.tool-text-diff-summary .is-same { color: var(--text-muted); }
.tool-text-diff { margin-top: var(--sp-3); overflow-x: auto; }
.tool-text-diff:empty { display: none; }
.diff-table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
}
.diff-table td { padding: 1px var(--sp-2); vertical-align: top; white-space: pre-wrap; word-break: break-all; }
.diff-ln { width: 48px; text-align: right; color: var(--text-muted); background: var(--bg-hover); user-select: none; }
.diff-a { border-right: 1px solid var(--border); }
.diff-table .is-empty { background: var(--bg-hover); }
.diff-table tr.is-del .diff-a,
.diff-table tr.is-chg .diff-a { background: var(--danger-bg); }
.diff-table tr.is-add .diff-b,
.diff-table tr.is-chg .diff-b { background: var(--success-bg); }
.diff-table mark { border-radius: 2px; color: inherit; }
.diff-table .diff-a mark { background: color-mix(in srgb, var(--danger) 30%, transparent); }
.diff-table .diff-b mark { background: color-mix(in srgb, var(--success) 30%, transparent); }
.diff-fold td { padding: 0; text-align: center; background: var(--bg-hover); }
.diff-fold-btn { width: 100%; padding: 4px; border: none; background: none; color: var(--accent); font-size: var(--fs-xs); cursor: pointer; }
.diff-fold-btn:hover { background: var(--accent-light); }

@media (max-width: 720px) {
    .tool-text { padding: var(--sp-4) 0; }
    .tool-text-io, .tool-text-time-grid { grid-template-columns: 1fr; }
    .tool-text-area { min-height: 200px; }
    .tool-text-group > span { width: 100%; }
}