/* ------------------------------------------------------------------
   工具箱页面公共组件
   前台工具页（templates/front/tool/*.html）共用，避免每页重复一份 CSS。
   配色沿用站点主色 #1464a8，边框 #e3e8ef，浅底 #f5f7fa。
   ------------------------------------------------------------------ */

.tu-page {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.tu-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    justify-content: space-between; margin-bottom: 14px;
}
.tu-bar .layui-btn { margin: 0; }
.tu-bar-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tu-tip { color: #98a2b3; font: normal 12px/20px "Microsoft YaHei", verdana; }

.tu-label {
    display: inline-flex; align-items: center; gap: 5px;
    font: normal 13px/24px "Microsoft YaHei", verdana; color: #44506b;
}
.tu-label input[type="checkbox"] { margin: 0; vertical-align: middle; }

.tu-num {
    width: 72px; height: 28px; padding: 0 6px; box-sizing: border-box;
    border: 1px solid #e3e8ef; border-radius: 4px; background: #fff;
    font: 13px/26px "Microsoft YaHei", verdana; color: #243244;
}
.tu-sel {
    height: 28px; padding: 0 6px; border: 1px solid #e3e8ef; border-radius: 4px;
    background: #fff; font: 13px/26px "Microsoft YaHei", verdana; color: #243244;
}
.tu-text {
    height: 28px; padding: 0 8px; box-sizing: border-box; width: 180px;
    border: 1px solid #e3e8ef; border-radius: 4px; background: #fff;
    font: 13px/26px "Microsoft YaHei", verdana; color: #243244;
}

.tu-split { display: flex; gap: 14px; }
.tu-pane {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    border: 1px solid #e3e8ef; border-radius: 6px; overflow: hidden; background: #fff;
}
.tu-pane-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; background: #f5f7fa; border-bottom: 1px solid #e3e8ef;
    font: normal 13px/20px "Microsoft YaHei", verdana; color: #44506b;
}
.tu-pane-head b { color: #1464a8; font-weight: 600; }
.tu-pane-head .tu-hint { color: #98a2b3; font-size: 12px; }

.tu-editor {
    flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box;
    border: 0; outline: none; resize: none; padding: 12px; background: #fcfdff;
    font: 13px/22px Consolas, "Courier New", monospace; color: #243244; tab-size: 4;
}
.tu-out {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; box-sizing: border-box;
    font: 13px/22px Consolas, "Courier New", monospace; color: #243244;
    white-space: pre-wrap; word-break: break-all;
}
.tu-out-flat { white-space: pre; word-break: normal; }

.tu-status { font: normal 12px/20px "Microsoft YaHei", verdana; color: #98a2b3; }
.tu-status.ok { color: #1a9c4c; }
.tu-status.err { color: #d93025; }
.tu-status.warn { color: #c77700; }

.tu-empty {
    padding: 34px 12px; text-align: center; color: #98a2b3;
    font: normal 13px/24px "Microsoft YaHei", verdana;
}
.tu-empty b { display: block; color: #d93025; margin-bottom: 6px; }
.tu-empty code {
    display: inline-block; margin-top: 8px; padding: 2px 6px; border-radius: 3px;
    background: #f5f7fa; color: #44506b; font: 12px/20px Consolas, monospace;
}

.tu-table { width: 100%; border-collapse: collapse; font: normal 13px/20px "Microsoft YaHei", verdana; color: #243244; }
.tu-table th {
    position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 10px;
    background: #f5f7fa; color: #44506b; font-weight: 600; border-bottom: 1px solid #e3e8ef;
}
.tu-table td { padding: 7px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.tu-table tbody tr:hover { background: #f7fafd; }
.tu-table .mono { font-family: Consolas, "Courier New", monospace; }
.tu-table .nowrap { white-space: nowrap; }

.tu-kv { width: 100%; border-collapse: collapse; font: normal 13px/20px "Microsoft YaHei", verdana; }
.tu-kv th {
    width: 40%; text-align: left; padding: 7px 10px; vertical-align: top;
    background: #fafbfd; color: #44506b; font-weight: 400; border-bottom: 1px solid #eef2f7;
}
.tu-kv td {
    padding: 7px 10px; border-bottom: 1px solid #eef2f7; word-break: break-all;
    font-family: Consolas, "Courier New", monospace; color: #243244;
}

.tu-code {
    display: block; padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 4px;
    background: #f7f9fc; color: #243244; white-space: pre-wrap; word-break: break-all;
    font: 12px/20px Consolas, "Courier New", monospace;
}

.tu-chips { padding: 2px 0; }
.tu-chip {
    display: inline-block; margin: 0 6px 6px 0; padding: 2px 9px; border-radius: 10px;
    background: #eef6ff; color: #1464a8; font: normal 12px/18px "Microsoft YaHei", verdana;
}
.tu-chip.soft { background: #f3f4f6; color: #5f6b7f; }
.tu-chip.warn { background: #fff4e5; color: #b25b00; }
.tu-chip.bad { background: #fdecec; color: #d93025; }

.tu-hit { cursor: pointer; }
.tu-hit:hover { background: #f2f6fd; }

.tu-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-tab {
    padding: 3px 12px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff;
    color: #5f6b7f; font: normal 12px/20px "Microsoft YaHei", verdana; cursor: pointer;
    white-space: nowrap;
}
.tu-tab:hover { border-color: #bcd8f5; color: #1464a8; }
.tu-tab.on { background: #eef6ff; border-color: #bcd8f5; color: #1464a8; font-weight: 600; }
.tu-tab.disabled, .tu-tab[disabled] { opacity: .45; cursor: not-allowed; }

.tu-stat { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tu-stat-item {
    flex: 1 1 0; min-width: 110px; padding: 10px 12px; border-radius: 6px;
    border: 1px solid #e3e8ef; background: #fbfcfe;
}
.tu-stat-item .t { color: #98a2b3; font: normal 12px/18px "Microsoft YaHei", verdana; }
.tu-stat-item .v {
    margin-top: 2px; color: #243244; word-break: break-all;
    font: 600 15px/22px Consolas, "Courier New", monospace;
}
.tu-stat-item.ok { background: #eef9f2; border-color: #bfe6cf; }
.tu-stat-item.ok .v { color: #1a9c4c; }
.tu-stat-item.del { background: #fdeeee; border-color: #f5c6c6; }
.tu-stat-item.del .v { color: #d93025; }
.tu-stat-item.info { background: #eef6ff; border-color: #bcd8f5; }
.tu-stat-item.info .v { color: #1464a8; }

@media (max-width: 900px) {
    .tu-split { flex-direction: column; }
    .tu-split .tu-pane { height: 380px; }
    .tu-text { width: 120px; }
}