/* ============================================================================
 * ECHO demo — AI Inspection module (Assignment page)
 * ============================================================================
 * The module is its own design (see redesign/AI-Inspection.html), so it does not
 * inherit the Veritas restyle: every rule here is scoped under .ai-module and this
 * sheet loads last, which is what keeps its names (.cell, .btn, .icon, .search,
 * table/th/td …) off the captured panes that still use the old look.
 * ========================================================================= */

/* ── the module fills the pane and scrolls internally ─────────────────────── */
#demoPaneHost .container.ai-insp-container {
  padding: 0;
  overflow: hidden;
  background: #eef2f7;
}

/* The container hands down Veritas type (18px/21px); the prototype was authored
 * at the browser default, so reset to it rather than letting that through. */
.ai-module {
  height: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  color: var(--text);
  font-size: 16px;
  line-height: normal;
}

.ai-module * {
  box-sizing: border-box;
}

.ai-module .work { height: 100%; }

:is(.ai-module, .visit-page) {
--bg: #eef2f7;
  --surface: #fff;
  --line: #e2e8f0;
  --line2: #edf2f7;
  --text: #1a2332;
  --text2: #5a677a;
  --text3: #8a96a8;
  --brand: #0c4f8c;
  --brand2: #1565a8;
  --brand-soft: #eaf2fa;
  --brand-mid: #d4e5f5;
  --ok: #1b8a58; --ok-bg: #e7f6ee;
  --warn: #a87400; --warn-bg: #fff5d9;
  --danger: #c0392b;
  --high: #c25a22; --high-bg: #ffeee6;
  --shadow: 0 10px 28px rgba(16,36,64,.08);
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --side: #d5dce6;
}

.ai-module button,
.ai-module input,
.ai-module select,
.ai-module textarea {
font: inherit;
}

.ai-module button {
cursor: pointer;
}

.ai-module button:disabled {
opacity: .45; cursor: not-allowed;
}

.ai-module .logo {
font-weight: 700; letter-spacing: .06em;
}

.ai-module .work {
min-height: 0; display: grid; grid-template-rows: 1fr;
  padding: 12px 14px 14px; gap: 0;
}

:is(.ai-module, .visit-page) .btn {
border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

:is(.ai-module, .visit-page) .btn:hover {
border-color: #b7c7db;
}

:is(.ai-module, .visit-page) .btn.primary {
background: var(--brand); border-color: var(--brand); color: #fff;
}

:is(.ai-module, .visit-page) .btn.primary:hover {
background: var(--brand2);
}

:is(.ai-module, .visit-page) .btn.soft {
background: #f6f9fc;
}

:is(.ai-module, .visit-page) .btn.danger {
color: var(--danger); border-color: #f0c4c0; background: #fff;
}

:is(.ai-module, .visit-page) .btn.danger:hover {
background: #fff5f5;
}

:is(.ai-module, .visit-page) .btn.ghost {
background: transparent;
}

:is(.ai-module, .visit-page) .btn.icon-danger {
width: 28px; height: 28px; padding: 0; border-radius: 8px; justify-content: center;
  color: var(--danger); border-color: #f0c4c0;
}

:is(.ai-module, .visit-page) .btn.icon-danger:hover {
background: #fff1f0;
}

.ai-module .main {
min-height: 0; display: grid; grid-template-rows: auto 1fr;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
}

.ai-module .main-toolbar {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line2); background: #f8fafc;
  flex-wrap: wrap;
}

.ai-module .main-toolbar .ttl {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0;
}

.ai-module .main-toolbar .ttl strong {
font-size: 15px;
}

.ai-module .main-toolbar .ttl .desc {
font-size: 12px; color: var(--text3);
}

.ai-module .main-toolbar .acts {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.ai-module .main-split {
min-height: 0; display: grid; grid-template-columns: 340px 1fr;
}

.ai-module .list-pane {
border-right: 1px solid var(--line2); display: grid; grid-template-rows: auto auto 1fr; min-height: 0;
  background: #fbfcfe;
}

.ai-module .hint-bar {
padding: 6px 12px; font-size: 11px; color: var(--text3); background: #f3f7fb;
  border-bottom: 1px solid var(--line2); display: none;
}

.ai-module .hint-bar.on {
display: block;
}

.ai-module .list-bar {
padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--line2);
}

.ai-module .list-bar .row {
display: flex; gap: 8px; align-items: center; justify-content: space-between;
}

.ai-module .list-bar h2 {
margin: 0; font-size: 13px; color: var(--text2); font-weight: 700;
}

.ai-module .sort-hint {
font-size: 11px; color: var(--text3); line-height: 1.4; padding: 0 2px;
}

.ai-module .sort-hint.has-manual {
color: var(--brand);
}

.ai-module .count-pill {
font-size: 11px; background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: 2px 8px; font-weight: 700;
}

.ai-module .seg {
display: inline-flex; background: #eef2f7; border-radius: 999px; padding: 3px;
}

.ai-module .seg button {
border: 0; background: transparent; border-radius: 999px;
  padding: 5px 10px; font-size: 12px; color: var(--text2);
}

.ai-module .seg button.on {
background: #fff; color: var(--brand); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.ai-module .search {
width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px;
  outline: none; background: #fff; font-size: 13px;
}

.ai-module .search:focus {
border-color: #98b6d4; box-shadow: 0 0 0 3px rgba(12,79,140,.12);
}

.ai-module .list-scroll {
overflow: auto; min-height: 0; padding: 8px;
}

.ai-module .cl-card {
border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: #fff; margin-bottom: 8px; cursor: pointer; transition: .12s ease;
  position: relative; display: flex; gap: 8px; align-items: flex-start;
}

.ai-module .cl-card .drag-handle {
display: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
  align-items: center; justify-content: center; color: var(--text3); font-size: 12px;
  cursor: grab; background: #fff; flex: 0 0 auto; margin-top: 2px;
}

.ai-module .cl-card:hover {
border-color: #b9cce0;
}

.ai-module .cl-card.active {
border-color: var(--brand); background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.ai-module .cl-card.dragging {
opacity: .55; border-style: dashed;
}

/* 检查表的来源（ITP / Work Scope）摆在这张卡的名字上方：两个页面的列表长得
 * 一模一样，只有这里说得出这批检查表是照什么生成的。 */
.ai-module .cl-card .src-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .04em;
}

.ai-module .cl-card .top-line {
display: flex; justify-content: space-between; gap: 8px; align-items: flex-start;
}

.ai-module .cl-card .title {
font-size: 13px; font-weight: 700; line-height: 1.35;
}

.ai-module .cl-card .time {
font-size: 11px; color: var(--text3); white-space: nowrap;
}

.ai-module .cl-card .meta {
margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px;
}

:is(.ai-module, .visit-page) .chip {
font-size: 11px; border-radius: 999px; padding: 2px 8px;
  background: #eef2f7; color: var(--text2);
}

:is(.ai-module, .visit-page) .chip.ok {
background: var(--ok-bg); color: var(--ok);
}

:is(.ai-module, .visit-page) .chip.warn {
background: var(--warn-bg); color: var(--warn);
}

:is(.ai-module, .visit-page) .chip.muted {
background: #f1f5f9; color: var(--text3);
}

:is(.ai-module, .visit-page) .chip.star {
background: #fff4d6; color: #9a6b00;
}

.ai-module .manual-on .cl-card {
cursor: grab;
}

.ai-module .manual-on .cl-card .drag-handle {
display: inline-flex;
}

.ai-module .empty-list {
text-align: center; color: var(--text3); padding: 40px 16px; font-size: 13px;
}

.ai-module .detail-pane {
min-height: 0; display: grid; grid-template-rows: 1fr; overflow: hidden;
}

.ai-module #detailContent {
min-height: 0;
}

.ai-module .detail-empty {
grid-row: 1 / -1; display: grid; place-items: center; color: var(--text3); text-align: center; padding: 40px;
}

.ai-module .detail-empty h3 {
margin: 0 0 8px; color: var(--text2); font-size: 16px;
}

.ai-module .detail-empty p {
margin: 0 0 16px; font-size: 13px; line-height: 1.6; max-width: 360px;
}

.ai-module .detail-head {
padding: 14px 16px 10px; border-bottom: 1px solid var(--line2);
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}

.ai-module .detail-head h2 {
margin: 0; font-size: 16px;
}

.ai-module .detail-head .sub {
margin-top: 4px; font-size: 12px; color: var(--text3);
}

.ai-module .detail-actions {
display: flex; gap: 8px; flex-wrap: wrap;
}

.ai-module .source-bar {
padding: 10px 16px; border-bottom: 1px solid var(--line2); background: #f8fafc;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.ai-module .source-bar .label {
font-size: 12px; color: var(--text2); font-weight: 600; margin-right: 4px;
}

.ai-module .source-link {
border: 1px solid var(--brand-mid); background: #fff; color: var(--brand);
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
}

.ai-module .source-link:hover {
background: var(--brand-soft);
}

.ai-module .detail-tools {
padding: 8px 16px; display: flex; justify-content: space-between; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--line2);
}

.ai-module .table-wrap {
overflow: auto; min-height: 0;
}

.ai-module table {
width: 100%; border-collapse: collapse; font-size: 13px;
}

.ai-module th {
position: sticky; top: 0; z-index: 1; background: #f5f8fc; text-align: left;
  padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--text2); white-space: nowrap;
  vertical-align: middle; height: 42px;
}

.ai-module td {
padding: 0 12px; border-bottom: 1px solid var(--line2);
  vertical-align: middle; height: 48px;
}

.ai-module tr:hover td {
background: #f8fbfe;
}

.ai-module .row-sec td {
background: #fafbfd; font-weight: 700; height: 44px;
}

.ai-module .row-grp td {
font-weight: 600; height: 44px;
}

.ai-module .row-grp td:first-child {
padding-left: 28px;
}

.ai-module .row-leaf td:first-child {
padding-left: 48px; font-weight: 400;
}

.ai-module .row-sec,
.ai-module .row-grp {
cursor: pointer;
}

.ai-module .row-sec:hover td {
background: #eef4fb !important;
}

.ai-module .row-grp:hover td {
background: #f3f7fc !important;
}

.ai-module .row-sec .cell,
.ai-module .row-grp .cell {
width: 100%;
}

.ai-module .row-critical td {
background: #fff1f0;
}

.ai-module .row-critical:hover td {
background: #ffe4e1;
}

.ai-module .row-high td {
background: #fff4ec;
}

.ai-module .row-high:hover td {
background: #ffe9d9;
}

.ai-module .row-medium td {
background: #fffbeb;
}

.ai-module .row-medium:hover td {
background: #fef3c7;
}

.ai-module .row-low td {
background: #f0fdf6;
}

.ai-module .row-low:hover td {
background: #dcfce7;
}

.ai-module .row-hit td {
box-shadow: inset 0 0 0 999px rgba(12, 79, 140, .04);
}

.ai-module .row-dim td {
opacity: .34;
}

.ai-module .cell {
display: flex; align-items: center; min-height: 48px; line-height: 1.35;
}

.ai-module .cell.wrap {
white-space: normal; max-width: 360px;
}

.ai-module .ellipsis {
max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  display: block;
}

:is(.ai-module, .visit-page) .pill {
display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 4px 10px 4px 6px; font-size: 11px; font-weight: 700;
  border: 1px solid transparent; line-height: 1; vertical-align: middle;
}

:is(.ai-module, .visit-page) .pill .dot {
width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; flex: 0 0 auto;
}

:is(.ai-module, .visit-page) .pill.critical {
background: #fde8e7; color: #b42318; border-color: #f3c5c1;
}

:is(.ai-module, .visit-page) .pill.critical .dot {
background: #d92d20;
}

:is(.ai-module, .visit-page) .pill.high {
background: #ffefe6; color: #b54708; border-color: #f9d2bc;
}

:is(.ai-module, .visit-page) .pill.high .dot {
background: #ec5b13;
}

:is(.ai-module, .visit-page) .pill.medium {
background: #fff6df; color: #8a6500; border-color: #f0dca0;
}

:is(.ai-module, .visit-page) .pill.medium .dot {
background: #c69100;
}

:is(.ai-module, .visit-page) .pill.low {
background: #e8f7ef; color: #147a48; border-color: #b7e4c7;
}

:is(.ai-module, .visit-page) .pill.low .dot {
background: #1f9d5b;
}

.ai-module .actions-cell {
display: inline-flex; gap: 6px; align-items: center;
}

.ai-module .mark {
background: #fff3bf; border-radius: 3px; padding: 0 2px;
}

.ai-module .risk-sum {
display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

.ai-module .risk-sum .rs {
display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 9px 3px 7px;
  font-size: 11px; font-weight: 700; line-height: 1; border: 1px solid transparent;
  cursor: pointer; user-select: none; transition: .12s ease;
}

.ai-module .risk-sum .rs:hover {
transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.ai-module .risk-sum .rs.is-active {
outline: 2px solid var(--brand); outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(12,79,140,.12);
}

.ai-module .risk-sum .rs .ic {
width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; flex: 0 0 auto;
}

.ai-module .risk-sum .rs .num {
font-variant-numeric: tabular-nums;
}

.ai-module .risk-sum .rs.critical {
background: #fde8e7; color: #b42318; border-color: #f3c5c1;
}

.ai-module .risk-sum .rs.critical .ic {
background: #d92d20;
}

.ai-module .risk-sum .rs.high {
background: #ffefe6; color: #b54708; border-color: #f9d2bc;
}

.ai-module .risk-sum .rs.high .ic {
background: #ec5b13;
}

.ai-module .risk-sum .rs.medium {
background: #fff6df; color: #8a6500; border-color: #f0dca0;
}

.ai-module .risk-sum .rs.medium .ic {
background: #c69100;
}

.ai-module .risk-sum .rs.low {
background: #e8f7ef; color: #147a48; border-color: #b7e4c7;
}

.ai-module .risk-sum .rs.low .ic {
background: #1f9d5b;
}

.ai-module .risk-sum .rs.is-zero {
opacity: .42; filter: grayscale(.25);
}

.ai-module .icon {
width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--brand); display: inline-grid; place-items: center;
}

.ai-module .icon:hover {
background: var(--brand-soft);
}

.ai-module .icon.danger {
color: var(--danger); border-color: #f0c4c0;
}

.ai-module .icon.danger:hover {
background: #fff1f0;
}

.ai-module .wiz-mask {
position: fixed; inset: 0; background: rgba(12, 24, 40, .45);
  display: none; z-index: 40; align-items: stretch; justify-content: center; padding: 24px;
}

.ai-module .wiz-mask.on {
display: flex;
}

.ai-module .wiz {
width: min(1080px, 100%); max-height: 100%; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); display: grid; grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}

.ai-module .wiz-head {
padding: 16px 18px; border-bottom: 1px solid var(--line2);
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}

.ai-module .wiz-head h3 {
margin: 0; font-size: 17px;
}

.ai-module .wiz-head p {
margin: 4px 0 0; font-size: 12px; color: var(--text3);
}

.ai-module .wiz-steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line2); background: #f8fafc;
}

.ai-module .wiz-step {
display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent;
}

.ai-module .wiz-step .n {
width: 26px; height: 26px; border-radius: 50%; background: #c5d0df; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}

.ai-module .wiz-step.active {
background: var(--brand-soft); border-color: var(--brand-mid);
}

.ai-module .wiz-step.active .n {
background: var(--brand);
}

.ai-module .wiz-step.done .n {
background: var(--ok);
}

.ai-module .wiz-step .t {
font-size: 13px; font-weight: 700;
}

.ai-module .wiz-step .d {
font-size: 11px; color: var(--text3); margin-top: 2px;
}

.ai-module .wiz-body {
overflow: auto; padding: 16px 18px; min-height: 0;
}

.ai-module .wiz-foot {
padding: 12px 18px; border-top: 1px solid var(--line2);
  display: flex; justify-content: space-between; gap: 10px; background: #fff;
}

.ai-module .wiz-panel {
display: none;
}

.ai-module .wiz-panel.on {
display: block;
}

.ai-module .file-row {
display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}

.ai-module .file-row.on {
border-color: var(--brand); background: var(--brand-soft);
}

.ai-module .upload-zone {
border: 1.5px dashed #b7c9de; border-radius: 14px; background: #f5f9fd;
  padding: 22px 16px; text-align: center; transition: .15s ease; outline: none;
}

.ai-module .upload-zone:hover,
.ai-module .upload-zone:focus,
.ai-module .upload-zone.dragover {
border-color: var(--brand); background: var(--brand-soft);
}

.ai-module .upload-ico {
font-size: 22px; margin-bottom: 6px; opacity: .75;
}

.ai-module .upload-title {
font-size: 14px; font-weight: 700; color: var(--text);
}

.ai-module .upload-sub {
font-size: 12px; color: var(--text3); margin-top: 4px;
}

.ai-module .upload-item {
display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px;
  background: #fff; margin-bottom: 6px; font-size: 12px;
}

.ai-module .upload-item .name {
font-weight: 600;
}

.ai-module .upload-item .st {
color: var(--ok);
}

.ai-module .upload-item .st.err {
color: var(--danger);
}

.ai-module .upload-item .st.wait {
color: var(--warn);
}

.ai-module .empty-files {
border: 1px dashed var(--line); border-radius: 12px; padding: 18px;
  text-align: center; color: var(--text3); font-size: 13px; background: #fafbfd;
}

.ai-module .field {
margin-bottom: 14px;
}

.ai-module .field label {
display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px;
}

.ai-module .field input,
.ai-module .field textarea,
.ai-module .field select {
width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none;
}

.ai-module .field textarea {
min-height: 88px; resize: vertical;
}

.ai-module .grid-2 {
display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px;
}

.ai-module .s1-layout {
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; align-items: start;
}

.ai-module .s1-card {
background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; min-width: 0;
}

.ai-module .s1-card h4 {
margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}

.ai-module .s1-card h4 .num {
width: 22px; height: 22px; border-radius: 50%; background: var(--brand);
  color: #fff; font-size: 12px; display: inline-grid; place-items: center; flex: 0 0 auto;
}

.ai-module .s1-card .hint {
margin: 0 0 12px; font-size: 12px; color: var(--text3); line-height: 1.5;
}

.ai-module .s1-card .block-title {
margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--text2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.ai-module .s1-card .block-title .cnt {
font-size: 11px; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); border-radius: 999px; padding: 2px 8px;
}

.ai-module .upload-zone {
border: 1.5px dashed #b7c9de; border-radius: 12px; background: linear-gradient(180deg,#f7fbff,#f3f8fd);
  padding: 18px 14px; text-align: center; transition: .15s ease; outline: none;
}

.ai-module .s1-params .ef-label {
display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin: 0 0 6px;
}

.ai-module .s1-params .ef-label em {
color: var(--danger); font-style: normal;
}

.ai-module .s1-params textarea,
.ai-module .s1-params select {
width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 13px; outline: none; background: #fff;
}

.ai-module .s1-params textarea {
min-height: 110px; resize: vertical; line-height: 1.5;
}

.ai-module .s1-params textarea:focus,
.ai-module .s1-params select:focus {
border-color: #8bb0d6; box-shadow: 0 0 0 3px rgba(12,79,140,.12);
}

.ai-module .s1-params .param-block {
margin-bottom: 14px;
}

.ai-module .s1-tip {
font-size: 12px; color: var(--text2); line-height: 1.55;
  background: #f0f7ff; border: 1px solid var(--brand-mid); border-radius: 10px;
  padding: 10px 12px;
}

.ai-module .s1-tip b {
color: var(--brand);
}

.ai-module .file-row {
display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  background: #fff; cursor: pointer;
}

.ai-module .file-row.on {
border-color: var(--brand); background: #f3f8fd; box-shadow: inset 3px 0 0 var(--brand);
}

.ai-module .file-row input {
width: 15px; height: 15px; margin: 0;
}

.ai-module .file-row .fn {
font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all;
}

.ai-module .file-row .fm {
font-size: 11px; color: var(--text3); margin-top: 3px;
}

.ai-module .file-row .tags {
display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
}

@media (max-width: 900px) {
  .ai-module .s1-layout { grid-template-columns: 1fr; }
}

.ai-module .progress {
display: none; margin-top: 8px;
}

.ai-module .progress.on {
display: block;
}

.ai-module .bar {
height: 8px; background: #e6edf5; border-radius: 999px; overflow: hidden; margin-top: 8px;
}

.ai-module .bar i {
display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #3aa0e0); transition: width .2s;
}

.ai-module .kpi {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}

.ai-module .kpi div {
border: 1px solid var(--line2); border-radius: 10px; padding: 10px; text-align: center; background: #f8fafc;
}

.ai-module .kpi b {
display: block; font-size: 18px; color: var(--brand);
}

.ai-module .kpi span {
font-size: 11px; color: var(--text3);
}

.ai-module .itp-mini {
border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff;
}

.ai-module .itp-mini h4 {
margin: 0 0 6px; font-size: 13px; color: var(--brand);
}

.ai-module .itp-mini p {
margin: 0; font-size: 12px; color: var(--text2); line-height: 1.45;
}

.ai-module .done-box {
text-align: center; padding: 8px 8px 20px;
}

.ai-module .done-box .badge-ok {
width: 56px; height: 56px; border-radius: 50%; margin: 8px auto 14px;
  background: linear-gradient(145deg, #22c55e, #16a34a); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(22,163,74,.28);
}

.ai-module .done-box h4 {
margin: 0 0 8px; font-size: 20px;
}

.ai-module .done-box p {
margin: 0 0 16px; color: var(--text2); font-size: 13px;
}

.ai-module .done-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 640px; margin: 0 auto 18px; text-align: left;
}

.ai-module .done-stats .ds {
background: #f8fafc; border: 1px solid var(--line2); border-radius: 12px; padding: 12px;
}

.ai-module .done-stats .ds b {
display: block; font-size: 18px; color: var(--brand); margin-top: 4px;
}

.ai-module .done-stats .ds span {
font-size: 11px; color: var(--text3);
}

.ai-module .done-src {
max-width: 640px; margin: 0 auto 18px; text-align: left;
  border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: #fff;
}

.ai-module .done-src h5 {
margin: 0 0 8px; font-size: 12px; color: var(--text2);
}

.ai-module .done-src .tags {
display: flex; flex-wrap: wrap; gap: 6px;
}

.ai-module .review-card {
border: 1px solid var(--line); border-radius: 14px; padding: 0; margin-bottom: 14px;
  background: #fff; overflow: hidden;
}

.ai-module .review-card.off {
opacity: .55; background: #f8fafc;
}

.ai-module .review-card .rv-top {
display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-bottom: 1px solid var(--line2); background: #f8fafc;
}

.ai-module .review-card .rv-top input {
margin-top: 4px; width: 16px; height: 16px; flex: 0 0 auto;
}

.ai-module .review-card .rv-main {
flex: 1; min-width: 0;
}

.ai-module .review-card .rv-id {
margin: 0; font-size: 13px; font-weight: 700; color: var(--brand);
  word-break: break-all; line-height: 1.4;
}

.ai-module .review-card .rv-meta-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}

.ai-module .review-card .rv-meta-grid .m {
background: #fff; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px;
}

.ai-module .review-card .rv-meta-grid .m .k {
font-size: 11px; font-weight: 700; color: var(--text3); margin-bottom: 4px;
}

.ai-module .review-card .rv-meta-grid .m .v {
font-size: 12px; color: var(--text); line-height: 1.45; word-break: break-word;
}

.ai-module .review-card .rv-actions {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center;
}

.ai-module .review-card .rv-items {
padding: 8px 12px 12px;
}

.ai-module .review-card .rv-item {
display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 10px; align-items: start;
  padding: 10px 10px; border: 1px solid var(--line2); border-radius: 10px;
  margin-bottom: 8px; background: #fff;
}

.ai-module .review-card .rv-item .seq {
font-weight: 800; color: var(--brand); font-size: 13px; padding-top: 2px;
}

.ai-module .review-card .rv-item .point {
font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4;
  word-break: break-word; white-space: normal;
}

.ai-module .review-card .rv-item .act {
font-size: 12px; color: var(--text2); line-height: 1.45;
  word-break: break-word; white-space: normal;
}

.ai-module .review-card .rv-item .ops {
display: inline-flex; gap: 6px; flex: 0 0 auto;
}

.ai-module .review-card .rv-head-row {
display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(0,1.1fr) auto;
  gap: 10px; padding: 6px 10px 8px; font-size: 11px; font-weight: 700; color: var(--text3);
}

@media (max-width: 900px) {
  .ai-module .review-card .rv-meta-grid { grid-template-columns: 1fr; }
  .ai-module .review-card .rv-item,
  .ai-module .review-card .rv-head-row { grid-template-columns: 40px 1fr auto; }
  .ai-module .review-card .rv-item .act { grid-column: 2 / 3; }
}

.ai-module .gen-layout {
display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px;
}

.ai-module .gen-side {
background: linear-gradient(180deg, #f4f8fc, #eef4fa); border: 1px solid var(--line2);
  border-radius: 14px; padding: 14px;
}

.ai-module .gen-side h4 {
margin: 0 0 10px; font-size: 13px;
}

.ai-module .gen-side .line {
font-size: 12px; color: var(--text2); margin: 0 0 8px; line-height: 1.5;
}

.ai-module .gen-side .box {
background: #fff; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}

.ai-module .gen-side .box b {
color: var(--brand);
}

.ai-module .edit-mask {
position: fixed; inset: 0; background: rgba(12,24,40,.45); display: none; z-index: 70;
  align-items: center; justify-content: center; padding: 20px;
}

.ai-module .edit-mask.on {
display: flex;
}

.ai-module .edit-modal {
width: min(520px, 100%); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 35, 60, .25);
  display: flex; flex-direction: column; max-height: min(90vh, 720px);
  border: 1px solid var(--line); overflow: hidden;
}

.ai-module .edit-hd {
flex: 0 0 auto; padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line2); background: #fff;
}

.ai-module .edit-hd h3 {
margin: 0; font-size: 17px; font-weight: 700; color: var(--text);
}

.ai-module .edit-hd p {
margin: 6px 0 0; font-size: 12px; color: var(--text3); line-height: 1.4;
}

.ai-module .edit-bd {
flex: 1 1 auto; overflow: auto; padding: 18px 20px 8px;
  background: #f7f9fc;
}

.ai-module .edit-ft {
flex: 0 0 auto; padding: 12px 20px 16px;
  border-top: 1px solid var(--line2); background: #fff;
  display: flex; justify-content: flex-end; gap: 10px;
}

.ai-module .ef {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}

.ai-module .ef > .el {
display: block; font-size: 11px; font-weight: 700; color: var(--text3);
  letter-spacing: .02em; margin: 0 0 8px; text-transform: uppercase;
}

.ai-module .ef > input,
.ai-module .ef > textarea {
width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text);
  outline: none; background: #fff; display: block;
}

.ai-module .ef > textarea {
min-height: 72px; resize: vertical; line-height: 1.45;
}

.ai-module .ef > input:focus,
.ai-module .ef > textarea:focus {
border-color: #8bb0d6; box-shadow: 0 0 0 3px rgba(12,79,140,.12);
}

.ai-module .ef-row {
display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin-bottom: 12px;
}

.ai-module .ef-row .ef {
margin-bottom: 0;
}

.ai-module .risk-pick {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.ai-module .risk-pick button {
border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--text2);
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px;
}

.ai-module .risk-pick button .dot {
width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; color: #fff; flex: 0 0 auto;
}

.ai-module .risk-pick button[data-risk="critical"] .dot {
background: #d92d20;
}

.ai-module .risk-pick button[data-risk="high"] .dot {
background: #ec5b13;
}

.ai-module .risk-pick button[data-risk="medium"] .dot {
background: #c69100;
}

.ai-module .risk-pick button[data-risk="low"] .dot {
background: #1f9d5b;
}

.ai-module .risk-pick button.on.critical {
background: #fde8e7; color: #b42318; border-color: #f3c5c1;
}

.ai-module .risk-pick button.on.high {
background: #ffefe6; color: #b54708; border-color: #f9d2bc;
}

.ai-module .risk-pick button.on.medium {
background: #fff6df; color: #8a6500; border-color: #f0dca0;
}

.ai-module .risk-pick button.on.low {
background: #e8f7ef; color: #147a48; border-color: #b7e4c7;
}

@media (max-width: 560px) {
  .ai-module .ef-row,
  .ai-module .risk-pick { grid-template-columns: 1fr; }
}

.ai-module .confirm-mask {
position: fixed; inset: 0; background: rgba(12,24,40,.42); display: none; z-index: 85;
  align-items: center; justify-content: center; padding: 20px;
}

.ai-module .confirm-mask.on {
display: flex;
}

.ai-module .confirm-box {
width: min(420px, 100%); background: #fff; border-radius: 18px;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15,35,60,.24);
  overflow: hidden;
}

.ai-module .confirm-box .hd {
padding: 16px 18px 8px; display: flex; gap: 12px; align-items: flex-start;
}

.ai-module .confirm-box .ico {
width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 18px; font-weight: 800;
  background: #fff1f0; color: var(--danger);
}

.ai-module .confirm-box h3 {
margin: 0; font-size: 16px;
}

.ai-module .confirm-box p {
margin: 6px 0 0; font-size: 13px; color: var(--text2); line-height: 1.55;
}

.ai-module .confirm-box .ft {
padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px;
  background: #f8fafc; border-top: 1px solid var(--line2);
}

@media (max-width: 900px) {
  .ai-module .gen-layout,
  .ai-module .done-stats { grid-template-columns: 1fr; }
  .ai-module .main-split { grid-template-columns: 1fr; }
}

.ai-module .drawer-mask {
position: fixed; inset: 0; background: rgba(12,24,40,.42); display: none; z-index: 50;
}

.ai-module .drawer-mask.on {
display: block;
}

.ai-module .drawer {
position: fixed; top: 0; right: 0; width: min(420px, 100vw); height: 100%;
  background: #fff;
  box-shadow: -16px 0 48px rgba(15, 35, 60, .18);
  transform: translateX(100%); transition: transform .22s ease;
  z-index: 51; display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
}

.ai-module .drawer.on {
transform: none;
}

.ai-module .drawer-hd {
flex: 0 0 auto;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line2);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  background: #fff;
}

.ai-module .drawer-hd .eyebrow {
font-size: 11px; font-weight: 700; color: var(--brand); margin: 0 0 6px; letter-spacing: .03em;
}

.ai-module .drawer-hd h3 {
margin: 0; font-size: 14px; line-height: 1.4; word-break: break-all; font-weight: 700;
}

.ai-module .drawer-hd .sub {
margin: 6px 0 0; font-size: 12px; color: var(--text3); line-height: 1.45;
}

.ai-module .drawer-bd {
flex: 1 1 auto; overflow: auto; padding: 16px 18px 20px;
  background: #f5f7fb;
}

.ai-module .drawer-ft {
flex: 0 0 auto; padding: 12px 18px; border-top: 1px solid var(--line2);
  background: #fff; display: flex; justify-content: flex-end;
}

.ai-module .src-card {
background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}

.ai-module .src-card .k {
font-size: 11px; font-weight: 700; color: var(--text3); margin: 0 0 4px;
}

.ai-module .src-card .v {
font-size: 13px; color: var(--text); line-height: 1.5; word-break: break-word; margin: 0;
}

.ai-module .src-card .v.id {
color: var(--brand); font-weight: 700; font-size: 13px;
}

.ai-module .src-card + .src-card {
margin-top: 0;
}

.ai-module .src-block-title {
display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 10px; padding: 0 2px;
}

.ai-module .src-block-title h4 {
margin: 0; font-size: 13px; font-weight: 700;
}

.ai-module .src-block-title .n {
font-size: 11px; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); border-radius: 999px; padding: 3px 8px;
}

.ai-module .src-item {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start;
}

.ai-module .src-item .seq {
width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft);
  color: var(--brand); font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

.ai-module .src-item .point {
margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35;
}

.ai-module .src-item .act {
margin: 0; font-size: 12px; color: var(--text2); line-height: 1.45;
}

.ai-module .src-empty {
text-align: center; color: var(--text3); padding: 28px 12px; font-size: 13px;
  background: #fff; border: 1px dashed var(--line); border-radius: 12px;
}

.ai-module .toast {
position: fixed; right: 16px; bottom: 16px; background: #17324d; color: #fff;
  padding: 11px 14px; border-radius: 12px; opacity: 0; transform: translateY(8px);
  transition: .2s; z-index: 80; pointer-events: none;
}

.ai-module .toast.on {
opacity: 1; transform: none;
}

@media (max-width: 1100px) {
  .ai-module .main { grid-template-columns: 1fr; }
  .ai-module .list-pane { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--line2); }
  .ai-module .grid-2 { grid-template-columns: 1fr; }
  .ai-module .wiz-mask { padding: 8px; }
}

/* ============================================================================
 * Work Scope variant (Visit)
 * ============================================================================ */

/* The Visit wizard has one step and so carries no step strip: three rows where
 * the Assignment wizard's markup fills four. */
.ai-module .wiz--single {
  grid-template-rows: auto 1fr auto;
}

/* Step 1 of the Assignment wizard styles the label/textarea/select it uses; the
 * Visit only needs the one-line title, so it borrows the same frame. */
.ai-module .s1-params input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
  background: #fff;
}

.ai-module .s1-params input:focus {
  border-color: #8bb0d6;
  box-shadow: 0 0 0 3px rgba(12, 79, 140, .12);
}

/* ============================================================================
 * Visit 页（Punch List / SQS）
 * ----------------------------------------------------------------------------
 * 这两个抓取页现在也按模块的样子读：顶部一条工具栏说明当前在看什么、右上角
 * 只留 New Visit、页面铺满窗口、内容在自己的区域里滚动。按钮语言与模块共用
 * （见上面 :is(.ai-module, .visit-page) 的 .btn 与设计令牌）。
 * ========================================================================= */

/* 页面铺满窗口高度，滚动交给 .page-body，外层不再整体滚动。 */
#demoPaneHost .container.visit-page {
  padding: 0;
  overflow: hidden;
  background: #eef2f7;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.visit-page .page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line2);
}

/* 工具栏三段：左页面名、中模块标签、右 New Visit。用三列网格定位，这样不论中间
 * 有没有标签组，右边的动作都贴住右端、中间那组是真居中。 */
.visit-page .page-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line2);
}

.visit-page .page-toolbar__lead {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.visit-page .page-toolbar__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.visit-page .page-toolbar__acts {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.visit-page .page-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 14px;
}

/* 模块切换是一排胶囊按钮：形状与 SQS 那张页面的按钮一致（999px、1px 细边、
 * 13px），当前项用 SQS 选中日期那块浅蓝 #E6F0F7 + 深蓝字。选择器带上
 * #demoPaneHost .container 以盖过 veritas.css 里的旧写法。 */
#demoPaneHost .container.visit-page .module-tabs {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#demoPaneHost .container.visit-page .module-tab {
  position: static;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #5b83a8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}

#demoPaneHost .container.visit-page .module-tab:hover {
  border-color: #b7c7db;
  color: #0a2d4c;
}

#demoPaneHost .container.visit-page .module-tab::after {
  content: none;
}

#demoPaneHost .container.visit-page .module-tab.is-active {
  background: #e6f0f7;
  border-color: #d4e5f5;
  color: #0a2d4c;
  font-weight: 700;
  box-shadow: none;
}

/* 每天那张列表的分页。抓取下来的行都在文档里，翻页就是决定哪些行在流内。 */
.visit-page .list-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 4px 2px;
  font-size: 12px;
  color: var(--text3);
}

.visit-page .list-pager__total {
  margin-right: 4px;
}

.visit-page .list-pager__step,
.visit-page .list-pager__num {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.visit-page .list-pager__step:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.visit-page .list-pager__num.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
 * 抓取内容里的 Element 控件换成模块的控件语言
 * ----------------------------------------------------------------------------
 * Punch List 与 SQS 的页面外壳已经是模块的，但卡里的按钮与搜索框还是 Veritas
 * 的（16px 圆角 / 48px 高 / 16px 字），和 Assignment 的模块条摆在一起就出戏。
 * 这里把它们对齐到 .btn / .icon / .search 的同一套值：胶囊 999px、13px、白底
 * 细边，只有主操作用品牌蓝实心；表内图标按钮 28×28 / 8px 圆角。选择器带上
 * #demoPaneHost .container 是为了盖过 veritas.css 的 .el-button.button-def。
 * ------------------------------------------------------------------------- */

#demoPaneHost .container.visit-page .el-button.button-def,
#demoPaneHost .container.visit-page .el-button.button-def:focus,
#demoPaneHost .container.visit-page .el-button.button-def:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

#demoPaneHost .container.visit-page .el-button.button-def:hover {
  border-color: #b7c7db;
  background: #fff;
  color: var(--text);
  box-shadow: none;
  transform: none;
}

#demoPaneHost .container.visit-page .el-button.button-def .icon {
  width: 16px;
  height: 16px;
  margin: 0;
  background-size: 16px 16px;
}

#demoPaneHost .container.visit-page .el-button.button-def.vbtn-primary,
#demoPaneHost .container.visit-page .el-button.button-def.vbtn-primary:focus,
#demoPaneHost .container.visit-page .el-button.button-def.vbtn-primary:visited {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

#demoPaneHost .container.visit-page .el-button.button-def.vbtn-primary:hover {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}

#demoPaneHost .container.visit-page .el-button.button-def.vbtn-danger,
#demoPaneHost .container.visit-page .el-button.button-def.vbtn-danger:focus,
#demoPaneHost .container.visit-page .el-button.button-def.vbtn-danger:visited {
  background: #fff;
  border-color: #f0c4c0;
  color: var(--danger);
}

#demoPaneHost .container.visit-page .el-button.button-def.vbtn-danger:hover {
  background: #fff5f5;
  color: var(--danger);
}

/* 只带图标的按钮（表内行操作） */
#demoPaneHost .container.visit-page .el-button.button-def.vbtn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
}

/* 表里的精灵图标（icon-edit / icon-delete / icon-save / icon-cancel） */
#demoPaneHost .container.visit-page .el-table td > .cell > [class^="icon-"] {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  background-size: 14px 14px;
}

#demoPaneHost .container.visit-page .el-table td > .cell > [class^="icon-"]:hover {
  background-color: var(--brand-soft);
}

#demoPaneHost .container.visit-page .el-table td > .cell > [class^="icon-"] + [class^="icon-"] {
  margin-left: 6px;
}

#demoPaneHost .container.visit-page .el-table td > .cell > div > .icon-delete {
  background-color: #fff;
  border-color: #f0c4c0;
}

#demoPaneHost .container.visit-page .el-table td > .cell > div > .icon-delete:hover {
  background-color: #fff1f0;
}

/* 搜索框：模块的 .search 形状，前置放大镜去掉（模块侧也没有） */
#demoPaneHost .container.visit-page .list-search {
  width: 260px;
  max-width: 100%;
  margin: 0;
}

#demoPaneHost .container.visit-page .list-search .list-search__icon {
  display: none;
}

#demoPaneHost .container.visit-page .list-search .list-search__input {
  width: 100%;
  height: auto;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: normal;
  box-shadow: none;
}

#demoPaneHost .container.visit-page .list-search .list-search__input:focus {
  border-color: #98b6d4;
  box-shadow: 0 0 0 3px rgba(12, 79, 140, .12);
}

/* ============================================================================
 * SQS 的 View Checklist 弹窗
 * ----------------------------------------------------------------------------
 * 外壳照生成检查表那个向导（同一层遮罩、同一张白面板、16px 圆角、标题与关闭在
 * 头部一行、正文自己滚），里面的清单照模块的明细表（表头 #f5f8fc、三条色带、
 * 44/48px 行高、风险整行底色、风险胶囊、13px）。
 * 选择器带两个 id（#demoPaneHost + #demo-dlg-view）以盖过 veritas.css 里按
 * [data-checklist="latest"] 写的那批规则。
 * ========================================================================= */

/* ── 外壳 ─────────────────────────────────────────────────── */
/* 抓取下来的弹窗是绝对定位 + 水平居中的，这一点保留；高度改成向导那样四周留
 * 24px、自己占满，正文在里面滚（原来固定 top:15%，高度随内容涨）。 */
#demoPaneHost .container.visit-page #demo-dlg-view .el-dialog {
  top: 24px !important;
  bottom: 24px !important;
  margin: 0 !important;
  width: min(1080px, 100%);
  max-height: none;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line2);
  background: #fff;
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-dialog__title {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-dialog__body {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  line-height: normal;
}

/* ── 清单：表头 ───────────────────────────────────────────── */
#demoPaneHost .container.visit-page #demo-dlg-view .el-table th,
#demoPaneHost .container.visit-page #demo-dlg-view .el-table th.is-leaf {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f5f8fc;
  border-bottom: 1px solid var(--line);
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-table th > .cell {
  padding: 11px 12px;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── 清单：单元格基线 ─────────────────────────────────────── */
#demoPaneHost .container.visit-page #demo-dlg-view .el-table > .el-table__header-wrapper > table,
#demoPaneHost .container.visit-page #demo-dlg-view .el-table > .el-table__body-wrapper > table {
  width: 100% !important;
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-table tbody tr > td {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line2);
}

#demoPaneHost .container.visit-page #demo-dlg-view .el-table tbody tr > td > .cell {
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

/* ── 清单：三条色带 ───────────────────────────────────────── */
/* ITP 行 = 模块的章节带 */
#demoPaneHost .container.visit-page #demo-dlg-view .echo-table-expand > .el-table__body-wrapper > table > tbody > tr.el-table__row > td {
  background: #fafbfd;
}

#demoPaneHost .container.visit-page #demo-dlg-view .echo-table-expand > .el-table__body-wrapper > table > tbody > tr.el-table__row > td > .cell {
  font-weight: 700;
}

/* 检验点 / 子活动 = 模块的分组带 */
#demoPaneHost .container.visit-page #demo-dlg-view :is(.checklist-l1, .checklist-l2) > .el-table__body-wrapper > table > tbody > tr.el-table__row > td {
  background: #fff;
}

#demoPaneHost .container.visit-page #demo-dlg-view :is(.checklist-l1, .checklist-l2) > .el-table__body-wrapper > table > tbody > tr.el-table__row > td > .cell {
  font-weight: 600;
}

/* 检查项 = 模块的叶子行：按风险整行着色 */
#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 > .el-table__body-wrapper > table > tbody > tr.el-table__row > td {
  height: 48px;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-critical) > td {
  background: #fff1f0;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-high) > td {
  background: #fff4ec;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-medium) > td {
  background: #fffbeb;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-low) > td {
  background: #f0fdf6;
}

/* 悬停：与模块一致，在各自底色上再深一档 */
#demoPaneHost .container.visit-page #demo-dlg-view .el-table tbody tr:not(:has(> td .risk-tag)):hover > td {
  background: #f8fbfe;
}

#demoPaneHost .container.visit-page #demo-dlg-view .echo-table-expand tbody tr.el-table__row:hover > td {
  background: #eef4fb;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-critical):hover > td {
  background: #ffe4e1;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-high):hover > td {
  background: #ffe9d9;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-medium):hover > td {
  background: #fef3c7;
}

#demoPaneHost .container.visit-page #demo-dlg-view .checklist-l3 tbody tr:has(> td .risk-tag.risk-low):hover > td {
  background: #dcfce7;
}

/* ── 清单：风险胶囊（模块的 .pill 形状） ──────────────────── */
#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-critical {
  background: #fde8e7;
  border-color: #f3c5c1;
  color: #b42318;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-critical::before {
  content: '!';
  background: #d92d20;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-high {
  background: #ffefe6;
  border-color: #f9d2bc;
  color: #b54708;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-high::before {
  content: '▲';
  background: #ec5b13;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-medium {
  background: #fff6df;
  border-color: #f0dca0;
  color: #8a6500;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-medium::before {
  content: '●';
  background: #c69100;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-low {
  background: #e8f7ef;
  border-color: #b7e4c7;
  color: #147a48;
}

#demoPaneHost .container.visit-page #demo-dlg-view .risk-tag.risk-low::before {
  content: '✓';
  background: #1f9d5b;
}

/* ----------------------------------------------------------------------------
 * Punch List 三张列表
 * ----------------------------------------------------------------------------
 * NCR / Punch List / Original Punch List 由 app.js 按固定列宽重画（见
 * PUNCH_LISTS），这里把它们画成模块表格的样子：表头 #f5f8fc 吸顶、13px、行高
 * 44px、只有横向分隔线；单元格单行省略，枚举值用 chip / 风险胶囊；表内的
 * ✎ / 🗑 与模块行操作同形。列宽是百分比（colgroup 上），所以永远铺满卡片宽，
 * 不会像抓取里那样横向溢出。
 * ------------------------------------------------------------------------- */

#demoPaneHost .container.visit-page .punch-grid {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  font-size: 13px;
  table-layout: fixed;
}

#demoPaneHost .container.visit-page .punch-grid > .el-table__header-wrapper > table,
#demoPaneHost .container.visit-page .punch-grid > .el-table__body-wrapper > table {
  width: 100%;
  table-layout: fixed;
}

#demoPaneHost .container.visit-page .punch-grid th,
#demoPaneHost .container.visit-page .punch-grid th.is-leaf {
  height: 42px;
  background: #f5f8fc;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

#demoPaneHost .container.visit-page .punch-grid th > .cell {
  padding: 0 12px;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#demoPaneHost .container.visit-page .punch-grid td,
#demoPaneHost .container.visit-page .punch-grid__row td {
  height: 44px;
  border-bottom: 1px solid var(--line2);
}

#demoPaneHost .container.visit-page .punch-grid td > .cell {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#demoPaneHost .container.visit-page .punch-grid .el-table__body tr:hover > td {
  background: #f8fbfe;
}

/* 行内的 ✎ / 🗑 */
#demoPaneHost .container.visit-page .punch-grid .icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#demoPaneHost .container.visit-page .punch-grid .icon:hover {
  background: var(--brand-soft);
}

#demoPaneHost .container.visit-page .punch-grid .icon.danger {
  color: var(--danger);
  border-color: #f0c4c0;
}

#demoPaneHost .container.visit-page .punch-grid .icon.danger:hover {
  background: #fff1f0;
}

/* 卡片里表格与分页之间留一口气，并与单元格的 12px 对齐 */
#demoPaneHost .container.visit-page .panel-body > .list-pager {
  padding: 12px 12px 4px;
}

/* ----------------------------------------------------------------------------
 * Punch List 页的高度：卡片铺满窗口，表格在卡内滚
 * ----------------------------------------------------------------------------
 * 这张页面的三张卡行数不同（10 / 16 / 13 条），内容少的时候卡片只有半屏、多的
 * 时候又顶出窗口。这里让当前卡片撑满工具栏以下的全部高度，表格区域吃掉剩余空
 * 间并在内部滚动，所以两种行数都正好落在窗口里。分页条固定在卡片底部。
 * ------------------------------------------------------------------------- */

#demoPaneHost .container.visit-page--fill .page-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Every wrapper the capture puts between the page body and the current card has to
 * pass the height down — a form and then a row on SQS, just a form on Punch List —
 * so this is written against ancestry rather than against a fixed chain. */
#demoPaneHost .container.visit-page--fill .page-body :has(.panel.module-row.is-active) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#demoPaneHost .container.visit-page--fill .panel.module-row.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

#demoPaneHost .container.visit-page--fill .panel.module-row.is-active > .panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#demoPaneHost .container.visit-page--fill .panel-body > .punch-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* SQS 页同样让卡片铺满窗口：工具栏与模块条留在原位，人员/日期标签不动，只有
 * 当天那张表在卡内滚动，分页条钉在卡片底部。 */
#demoPaneHost .container.visit-page--fill .panel-body > .sqs-visit {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 这一层本来就是 flex 行（左边日期、右边列表），要让它能收缩，并且让列表被拉满
 * 高度 —— 抓取里这一行的对齐不是 stretch。 */
#demoPaneHost .container.visit-page--fill .sqs-visit__person {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

#demoPaneHost .container.visit-page--fill .sqs-visit__list,
#demoPaneHost .container.visit-page--fill .sqs-visit__day {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 表头留在上面，滚的是表体 */
#demoPaneHost .container.visit-page--fill .sqs-visit__day > .el-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#demoPaneHost .container.visit-page--fill .sqs-visit__day > .el-table > .el-table__body-wrapper {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* SQS 页的人员名与日期标签：不分选中与否，字都用正文的黑。原来未选中是浅蓝
 * #5B83A8、选中是深藏青 #0A2D4C，浅蓝那档读起来太淡。选中状态仍由人员名的下划
 * 线和日期的浅蓝底 + 左侧竖条区分，不靠字色。 */
#demoPaneHost .container.visit-page .sqs-visit__people li,
#demoPaneHost .container.visit-page .sqs-visit__people li:hover,
#demoPaneHost .container.visit-page .sqs-visit__people li.active,
#demoPaneHost .container.visit-page .sqs-visit__dates li,
#demoPaneHost .container.visit-page .sqs-visit__dates li:hover,
#demoPaneHost .container.visit-page .sqs-visit__dates li.active {
  color: var(--text);
}

/* SQS 的 Visit Data 表改成流式：列宽是百分比（app.js 写在 colgroup 上）、
 * table-layout: fixed，所以永远和卡片同宽，不再需要左右拉进度条。单元格单行
 * 省略，完整内容仍在 title / data-tip 里。
 * 抓取给表写了内联的 width:2492px，所以这里要 !important 才盖得住。 */
#demoPaneHost .container.visit-page .sqs-list,
#demoPaneHost .container.visit-page .sqs-list > .el-table__header-wrapper > table,
#demoPaneHost .container.visit-page .sqs-list > .el-table__body-wrapper > table {
  width: 100% !important;
  table-layout: fixed;
}

#demoPaneHost .container.visit-page .sqs-list th > .cell,
#demoPaneHost .container.visit-page .sqs-list td > .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 两个向导的步骤一都收成单列：ITP 侧只剩「选文件」一件事（Represent 与 Technical
 * document policy 已去掉，进度条移进同一张卡），Visit 侧的文件卡与设置卡改上下两行。
 * 选择器带上 .ai-module 以盖过上面 .s1-layout 的两列写法。 */
.ai-module .s1-layout--one {
  grid-template-columns: 1fr;
}

/* 已提交、还没出结果的检查表要一眼看出来：整张卡换成暖色底 + 虚线边，左侧用转圈
 * 替掉拖拽把手（生成中不排序），chip 是 Generating… / Queued。明细里也只说明在生成
 * 中。完成后 app 自动重画这一行（见 queueChecklists）。 */
.ai-module .cl-card--pending {
  border: 1px dashed #f0dca0;
  background: var(--warn-bg);
}

.ai-module .cl-card--pending:hover {
  border-color: #e0c274;
  background: #fff1c9;
}

.ai-module .cl-card--pending .title {
  color: var(--text2);
}

/* 与拖拽把手同尺寸，换掉它不会让卡片跳一下 */
.ai-module .cl-spin {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid rgba(168, 116, 0, .28);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: loading-rotate .8s infinite linear;
}

/* SQS 最后一列（Action）里那个语音图标：原来用浅蓝灰 --cb5，在白底上几乎看不出
 * 颜色，和模块里其它操作图标也不一致；换成模块的品牌蓝。表头 `Action` 之前被
 * 省略号吃掉了，是靠把这一列从 4% 放宽到 8% 解决的（见 SQS_COLUMN_WIDTHS）。 */
#demoPaneHost .container.visit-page .sqs-icon-voice {
  color: var(--brand);
}

/* 最后一列只放一个图标和一个 `Action` 表头：表头那 18px 的左右内边距会把标签挤
 * 到看不见（列宽 75px 只剩 39px 给文字），这里收成与正文一致的 12px。 */
#demoPaneHost .container.visit-page .sqs-list :is(th, td):last-child > .cell {
  padding-left: 12px;
  padding-right: 12px;
}