/* 模板交互窗口与调用日志面板样式（与 research.css 的配色一致） */
.tpl-body { margin: 0; height: 100dvh; overflow: hidden; }
.tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); height: 100dvh; }
.tpl-main { overflow-y: auto; padding: 0 18px 24px; background: #fff; border-right: 1px solid #dce2e1; }
.tpl-log { overflow-y: auto; background: #fafbfb; padding: 0 12px 16px; }
.tpl-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 54px; background: #fff; border-bottom: 1px solid #e1e6e4; }
.tpl-top h1 { font-size: 17px; margin: 0; }
.spacer { flex: 1; }
.status-chip { padding: 2px 10px; border-radius: 10px; background: #eef3f1; color: #35504a; font-size: 12px; }
.status-chip.terminal-ok { background: #d9efe3; color: #1b6a45; }
.status-chip.terminal-bad { background: #f6dcda; color: #a1342e; }
.conn { font-size: 12px; color: #98a3a1; }
.conn.up { color: #2f8f68; }
.conn.down { color: #c0463f; }
button.danger { border-color: #d9a6a3; color: #a1342e; }
button.mini { padding: 2px 8px; font-size: 12px; }
.ids { font-size: 12px; color: #5a686a; padding: 10px 0 4px; overflow-wrap: anywhere; line-height: 1.7; }
.banner { margin: 8px 0; padding: 9px 12px; border-radius: 4px; font-size: 13px; background: #fff6e0; border: 1px solid #ecd9a0; }
.banner.bad { background: #fbe9e7; border-color: #e5b9b4; }
.banner.ok { background: #e6f4ec; border-color: #b9dcc7; }
.empty { color: #7a8688; padding: 18px 4px; font-size: 14px; }
.form-area { padding: 6px 0; }
.form-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.form-head h2 { font-size: 16px; margin: 0; }
.form-meta { font-size: 12px; color: #6a7779; }
.qcard { border: 1px solid #e1e6e4; border-radius: 6px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 6px; }
.qcard.hidden-by-rule { display: none; }
.qcard.risk { border-color: #e2b4a1; background: #fff8f4; }
.qtitle { font-weight: 600; font-size: 14px; }
.qdesc, .qwhy, .qhint { font-size: 12px; color: #667577; }
.qmeta { font-size: 11px; color: #8a9698; }
.qcard input[type=text], .qcard input[type=date], .qcard select, .qcard textarea { width: 100%; }
.pair { display: flex; gap: 6px; align-items: center; }
.pair input { flex: 1; }
.entity { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 6px; }
.entity select:last-child { grid-column: 1 / -1; }
.matrix { border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { border: 1px solid #e1e6e4; padding: 4px 8px; text-align: center; }
.qopts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #566462; }
.qopts select { width: auto; }
.attach { display: grid; gap: 4px; font-size: 12px; }
.attach .files { color: #3a5a52; }
.submit-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e1e6e4; }
.submit-bar label { font-size: 12px; color: #566462; }
.submit-bar input { width: 12em; }
.submit-bar .primary { background: #216e63; color: #fff; border-color: #216e63; }
.panel { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 8px 0; }
.row label { font-size: 12px; color: #566462; display: grid; gap: 2px; }
.hint { font-size: 12px; color: #7a6a3a; margin: 6px 0; }
.result { max-height: 320px; overflow: auto; font-size: 12px; background: #f5f7f6; padding: 8px; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.neg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.neg-grid button { text-align: left; }
.neg-grid small { display: block; color: #7a8688; font-weight: 400; }
.cand { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed #e1e6e4; }
.cand span { flex: 1; overflow-wrap: anywhere; }

/* ---- 日志面板 ---- */
.log-head { position: sticky; top: 0; z-index: 2; background: #fafbfb; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #e1e6e4; }
.log-tabs { display: flex; gap: 2px; }
.tab { border: 1px solid #cfd8d5; background: #fff; padding: 4px 10px; font-size: 13px; }
.tab.on { background: #216e63; color: #fff; border-color: #216e63; }
.log-status { font-size: 12px; color: #5a686a; margin-left: auto; }
.log-body { padding-top: 8px; display: grid; gap: 6px; }
details.call { border: 1px solid #e1e6e4; background: #fff; border-radius: 4px; padding: 2px 8px; }
details.call > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; flex-wrap: wrap; }
.item .t { color: #7a8688; font-variant-numeric: tabular-nums; }
.tag { background: #eef3f1; color: #46605a; padding: 0 6px; border-radius: 3px; font-size: 11px; }
.tag.warn { background: #fff0cc; color: #8a6200; }
.st.ok { color: #1b6a45; font-weight: 700; }
.st.bad { color: #a1342e; font-weight: 700; }
.st.dup { color: #8a6200; font-weight: 700; }
.deliberate { background: #fde8d7; color: #9a4a12; padding: 0 6px; border-radius: 3px; font-size: 11px; }
.ms { color: #7a8688; margin-left: auto; }
.meta { font-size: 11px; color: #5a686a; overflow-wrap: anywhere; padding: 2px 0 4px; display: grid; gap: 2px; }
.meta .err { color: #a1342e; }
details.call pre { max-height: 300px; overflow: auto; font-size: 11px; background: #f5f7f6; padding: 6px; border-radius: 3px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.pill.PASS { background: #d9efe3; color: #1b6a45; }
.pill.FAIL { background: #f6dcda; color: #a1342e; }
.pill.PENDING { background: #eef0f0; color: #66737a; }
.pill.INFO { background: #e1ecf8; color: #2a5a8e; }
.pill.NA { background: #f1f1f1; color: #8a8a8a; }
details.check { border: 1px solid #e1e6e4; background: #fff; border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; }
details.check.FAIL { border-color: #e0a8a3; }
details.check > summary { cursor: pointer; font-size: 13px; }
.clause { color: #7a8688; font-size: 11px; }
.detail { font-size: 12px; color: #4c5a5c; padding: 4px 0; }

@media (max-width: 1000px) {
    .tpl-layout { grid-template-columns: 1fr; height: auto; }
    .tpl-body { overflow: auto; }
}