/* ==================== css/ui-pgt-template.css — PGT 导入模板编辑页 (Tab 135) ====================
 * 前缀 .pgtt-;颜色全走 style.css 的 CSS 变量;按钮复用 .btn .btn--* ;输入复用 .tbl-input
 * (style.css 只给 .data-table td .tbl-input 定样式,本页表格都带 .data-table,行外的输入在下面补一份同款)。
 * 单页从上到下六个分区,行内输入,无弹窗。
 * ============================================================================================ */

#pgtTemplateEditorView .pgtt-page { max-width: 1240px; margin: 0 auto; padding: 4px 0 40px; color: var(--ink); }

/* ---- 页头 ---- */
#pgtTemplateEditorView .pgtt-head { margin-bottom: 14px; }
#pgtTemplateEditorView .pgtt-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#pgtTemplateEditorView .pgtt-head-text { min-width: 0; }
#pgtTemplateEditorView .pgtt-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--ink); }
#pgtTemplateEditorView .pgtt-sub { font-size: 12px; color: var(--ink-secondary); margin-top: 2px; }
#pgtTemplateEditorView .pgtt-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#pgtTemplateEditorView .pgtt-meta { font-size: 12px; color: var(--ink-muted); }
#pgtTemplateEditorView .pgtt-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#pgtTemplateEditorView .pgtt-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

#pgtTemplateEditorView .pgtt-banner { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--ink-secondary); }
#pgtTemplateEditorView .pgtt-banner--warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
#pgtTemplateEditorView .pgtt-banner--muted { background: var(--surface-muted); }
#pgtTemplateEditorView .pgtt-banner .btn { margin-left: auto; }

/* ---- 校验错误 ---- */
#pgtTemplateEditorView .pgtt-errors { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); font-size: 12px; }
#pgtTemplateEditorView .pgtt-errors-title { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
#pgtTemplateEditorView .pgtt-errors ul { margin: 0; padding-left: 20px; }
#pgtTemplateEditorView .pgtt-errors li { margin: 2px 0; }

/* ---- 分区 ---- */
#pgtTemplateEditorView .pgtt-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px 16px; margin-bottom: 14px; }
#pgtTemplateEditorView .pgtt-section-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
#pgtTemplateEditorView .pgtt-hint { font-size: 12px; color: var(--ink-secondary); margin-bottom: 10px; line-height: 1.5; }
#pgtTemplateEditorView .pgtt-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--ink-muted); background: var(--surface-dim); border-radius: var(--radius-sm); }
#pgtTemplateEditorView .pgtt-row-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#pgtTemplateEditorView .pgtt-row-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
#pgtTemplateEditorView .pgtt-inline-note { font-size: 12px; }
#pgtTemplateEditorView .pgtt-muted { color: var(--ink-muted); }
#pgtTemplateEditorView .pgtt-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; }
#pgtTemplateEditorView .pgtt-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }

/* ---- 表格(与胚胎室表格族同一骨架:行高钉死 40px,表头 11px 大写) ---- */
#pgtTemplateEditorView .pgtt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#pgtTemplateEditorView .pgtt-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-secondary); background: var(--surface-dim); border-bottom: 1px solid var(--border); padding: 8px 10px; white-space: nowrap; vertical-align: bottom; }
#pgtTemplateEditorView .pgtt-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; height: 40px; box-sizing: border-box; }
#pgtTemplateEditorView .pgtt-table tbody tr:last-child td { border-bottom: none; }
#pgtTemplateEditorView .pgtt-table .pgtt-num { width: 36px; text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
#pgtTemplateEditorView .pgtt-table .pgtt-actions { width: 1%; white-space: nowrap; text-align: right; }
#pgtTemplateEditorView .pgtt-table .pgtt-actions .pgtt-icon-btn + .pgtt-icon-btn { margin-left: 2px; }
#pgtTemplateEditorView .pgtt-table .pgtt-colname { font-weight: 600; color: var(--ink); }
#pgtTemplateEditorView .pgtt-table .pgtt-dd-cell { display: flex; align-items: center; gap: 8px; }
#pgtTemplateEditorView .pgtt-table .pgtt-dd-cell .ui-dd { width: 200px; flex: 0 0 auto; }
#pgtTemplateEditorView .pgtt-table .ui-dd-trigger { padding: 4px 10px; min-height: 28px; }
#pgtTemplateEditorView .pgtt-table--dict td:nth-child(2) { width: 46%; }
#pgtTemplateEditorView .pgtt-table--hist td { height: auto; padding: 7px 10px; }
#pgtTemplateEditorView .pgtt-subhead { font-weight: 400; font-size: 10.5px; text-transform: none; }

/* 行外输入(手动规则参数)与表内 .tbl-input 同款 */
#pgtTemplateEditorView .pgtt-manual .tbl-input,
#pgtTemplateEditorView .pgtt-input-xs, #pgtTemplateEditorView .pgtt-input-sm {
    display: inline-block; height: 28px; box-sizing: border-box; padding: 3px 8px; margin: 0;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: 12px; line-height: 20px;
}
#pgtTemplateEditorView .pgtt-manual .tbl-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
#pgtTemplateEditorView .pgtt-input-xs { width: 56px; text-align: center; }
#pgtTemplateEditorView .pgtt-input-sm { width: 160px; }

/* 图标按钮(表内操作列 / 规则删除):无边框、hover 才显底 */
#pgtTemplateEditorView .pgtt-icon-btn { border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--ink-muted); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#pgtTemplateEditorView .pgtt-icon-btn:hover { background: var(--surface-muted); color: var(--ink); }
#pgtTemplateEditorView .pgtt-icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger-text); }
#pgtTemplateEditorView .pgtt-icon-btn[disabled] { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* 状态标签 */
#pgtTemplateEditorView .pgtt-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--ink-secondary); white-space: nowrap; line-height: 16px; }
#pgtTemplateEditorView .pgtt-tag--ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
#pgtTemplateEditorView .pgtt-tag--warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
#pgtTemplateEditorView .pgtt-tag--err { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
#pgtTemplateEditorView .pgtt-tag--muted { color: var(--ink-muted); }

#pgtTemplateEditorView .pgtt-note { display: inline-block; font-size: 12px; color: var(--ink-secondary); }
#pgtTemplateEditorView .pgtt-note--warn { color: var(--warning-text); }
#pgtTemplateEditorView .pgtt-note--err { color: var(--danger-text); }

/* ---- ① 加一列下拉:按标签宽,别吃满整行 ---- */
#pgtTemplateEditorView .pgtt-addcol .ui-dd { width: 240px; }

/* ---- ③ 规则卡 ---- */
#pgtTemplateEditorView .pgtt-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
#pgtTemplateEditorView .pgtt-card:last-child { margin-bottom: 0; }
#pgtTemplateEditorView .pgtt-card-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
#pgtTemplateEditorView .pgtt-rule-list { margin: 0 0 8px; padding-left: 22px; font-size: 12.5px; }
#pgtTemplateEditorView .pgtt-rule-list li { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
#pgtTemplateEditorView .pgtt-rule-list li > span { flex: 1; }
#pgtTemplateEditorView .pgtt-examples { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-size: 12px; }
#pgtTemplateEditorView .pgtt-examples .btn { display: inline-flex; align-items: center; gap: 6px; }
#pgtTemplateEditorView .pgtt-infer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 6px 0 10px; border-radius: var(--radius-sm); background: var(--brand-light); border: 1px solid var(--brand-border); font-size: 12.5px; }
#pgtTemplateEditorView .pgtt-infer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pgtTemplateEditorView .pgtt-infer .btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
#pgtTemplateEditorView .pgtt-dd-inline { width: 260px; flex: 0 0 auto; }
#pgtTemplateEditorView .pgtt-dd-inline .ui-dd-trigger { padding: 4px 10px; min-height: 28px; }
#pgtTemplateEditorView .pgtt-manual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; }
#pgtTemplateEditorView .pgtt-manual .pgtt-dd-inline { width: 200px; }
#pgtTemplateEditorView .pgtt-inline-field { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-secondary); }

/* ---- ④ 试导入 ---- */
#pgtTemplateEditorView .pgtt-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#pgtTemplateEditorView .pgtt-file-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#pgtTemplateEditorView .pgtt-file-btn input[type="file"] { display: none; }
#pgtTemplateEditorView .pgtt-file-meta { font-size: 12px; color: var(--ink-secondary); margin-bottom: 8px; }
#pgtTemplateEditorView .pgtt-scroll { overflow: auto; max-height: 520px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#pgtTemplateEditorView .pgtt-scroll .pgtt-table thead th { position: sticky; top: 0; z-index: 1; }
#pgtTemplateEditorView .pgtt-table--trial td.pgtt-raw { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-secondary); }
#pgtTemplateEditorView .pgtt-table--trial span.pgtt-raw { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--ink-secondary); }
#pgtTemplateEditorView .pgtt-table--trial td.pgtt-clean { min-width: 140px; }
#pgtTemplateEditorView .pgtt-table--trial td.pgtt-clean--example .tbl-input { border-color: var(--brand); background: var(--brand-light); }
#pgtTemplateEditorView .pgtt-table--trial td.pgtt-clean--mismatch .tbl-input { border-color: var(--warning-accent); background: var(--warning-bg); }
#pgtTemplateEditorView .pgtt-table--trial tr.pgtt-row--control td { color: var(--ink-muted); }

/* ---- ⑤ 版式预览:小表头示意,列宽 = 预设 ---- */
#pgtTemplateEditorView .pgtt-mini-wrap { margin-bottom: 12px; }
#pgtTemplateEditorView .pgtt-mini { width: 100%; max-width: 860px; table-layout: fixed; border-collapse: collapse; margin-top: 4px; font-size: 11px; }
#pgtTemplateEditorView .pgtt-mini th { border: 1px solid var(--border); background: var(--surface-dim); padding: 6px 6px; text-align: center; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pgtTemplateEditorView .pgtt-mini th.pgtt-mini-long { background: var(--brand-light); }
#pgtTemplateEditorView .pgtt-mini-w { font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 900px) {
    #pgtTemplateEditorView .pgtt-head-actions { width: 100%; justify-content: flex-end; }
    #pgtTemplateEditorView .pgtt-table .pgtt-dd-cell .ui-dd { width: 160px; }
}

/* ==================== 第三批 B3(2026-10-01):两栏 + 效果面板 + 右栏对话 ==================== */
/* ---- 整页两栏:左编辑器(≤1240px)、右对话(≥1200px 固定 360px 吸顶;窄屏叠到下面) ---- */
#pgtTemplateEditorView .pgtt-wrap { display: flex; align-items: flex-start; gap: 16px; max-width: 1640px; margin: 0 auto; }
#pgtTemplateEditorView .pgtt-wrap > .pgtt-page { flex: 1 1 auto; min-width: 0; margin: 0; }
#pgtTemplateEditorView .pgtt-assist { flex: 0 0 360px; width: 360px; position: sticky; top: calc(var(--topbar-h, 56px) + 12px); }
#pgtTemplateEditorView .pgtt-assist:empty { display: none; }
@media (max-width: 1199px) {
    #pgtTemplateEditorView .pgtt-wrap { flex-direction: column; }
    #pgtTemplateEditorView .pgtt-assist { position: static; width: 100%; flex: 0 0 auto; }
    #pgtTemplateEditorView .pgtt-assist-card { height: 60vh; min-height: 360px; }
}

/* ---- 右栏对话面板(js/pgt-template-assist.js) ---- */
#pgtTemplateEditorView .pgtt-assist-card { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h, 56px) - 24px); min-height: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
#pgtTemplateEditorView .pgtt-assist-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
#pgtTemplateEditorView .pgtt-assist-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
#pgtTemplateEditorView .pgtt-assist-sub { font-size: 11.5px; color: var(--ink-secondary); margin-top: 2px; line-height: 1.4; }
#pgtTemplateEditorView .pgtt-assist-log { flex: 1 1 auto; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
#pgtTemplateEditorView .pgtt-assist-welcome { font-size: 12px; color: var(--ink-secondary); line-height: 1.55; padding: 10px 12px; background: var(--surface-dim); border-radius: var(--radius-sm); }
#pgtTemplateEditorView .pgtt-msg { max-width: 92%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
#pgtTemplateEditorView .pgtt-msg--user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
#pgtTemplateEditorView .pgtt-msg--ai { align-self: flex-start; background: var(--surface-muted); color: var(--ink); border-bottom-left-radius: 4px; }
#pgtTemplateEditorView .pgtt-msg--thinking { color: var(--ink-muted); }
#pgtTemplateEditorView .pgtt-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
#pgtTemplateEditorView .pgtt-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-dim); color: var(--ink-secondary); line-height: 16px; }
#pgtTemplateEditorView .pgtt-chip--ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success-text); }
#pgtTemplateEditorView .pgtt-chip--err { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
#pgtTemplateEditorView .pgtt-change { border-left: 3px solid var(--brand); background: var(--brand-light); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; color: var(--ink); }
#pgtTemplateEditorView .pgtt-change--rejected { border-left-color: var(--warning-accent); background: var(--warning-bg); color: var(--warning-text); }
#pgtTemplateEditorView .pgtt-change-title { display: flex; align-items: center; gap: 5px; font-weight: 600; margin-bottom: 4px; }
#pgtTemplateEditorView .pgtt-change ul { margin: 0; padding-left: 18px; }
#pgtTemplateEditorView .pgtt-change li { margin: 2px 0; overflow-wrap: anywhere; }
#pgtTemplateEditorView .pgtt-assist-note { font-size: 12px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-muted); color: var(--ink-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.45; }
#pgtTemplateEditorView .pgtt-assist-note--warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
#pgtTemplateEditorView .pgtt-assist-note--err { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
#pgtTemplateEditorView .pgtt-assist-note .btn { display: inline-flex; align-items: center; gap: 4px; }
#pgtTemplateEditorView .pgtt-assist-composer { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#pgtTemplateEditorView .pgtt-assist-input { width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.4; background: var(--surface); color: var(--ink); min-height: 56px; }
#pgtTemplateEditorView .pgtt-assist-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
#pgtTemplateEditorView .pgtt-assist-input[disabled] { opacity: .6; }
#pgtTemplateEditorView .pgtt-assist-actions { display: flex; justify-content: space-between; gap: 8px; }
#pgtTemplateEditorView .pgtt-assist-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

/* ---- ⑦ 效果面板(④ 顶部) ---- */
#pgtTemplateEditorView .pgtt-effects { border: 1px solid var(--brand-border); background: var(--brand-light); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; }
#pgtTemplateEditorView .pgtt-effects-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; flex-wrap: wrap; }
#pgtTemplateEditorView .pgtt-effects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
#pgtTemplateEditorView .pgtt-effects-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; }
#pgtTemplateEditorView .pgtt-effects-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
#pgtTemplateEditorView .pgtt-effects-row .btn { display: inline-flex; align-items: center; gap: 4px; }
#pgtTemplateEditorView .pgtt-table--fx { margin-top: 4px; }
#pgtTemplateEditorView .pgtt-table--fx th { padding: 5px 8px; }
#pgtTemplateEditorView .pgtt-table--fx td { height: auto; padding: 4px 8px; font-size: 12px; }
#pgtTemplateEditorView .pgtt-table--fx td.pgtt-raw { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-secondary); }
#pgtTemplateEditorView .pgtt-fx-changed { color: var(--brand); font-weight: 600; }