/* 网站故障排查智能体 · 浅色运维控制台风格 · 完全离线 */
:root {
  --bg: #f4f6f9;
  --card: #fff;
  --line: #e1e5eb;
  --line2: #cfd6df;
  --ink: #1f2933;
  --ink2: #52606d;
  --ink3: #8794a3;
  --brand: #1a5fd0;
  --brand-soft: #e8f0fe;
  --yes: #188038;
  --yes-soft: #e6f4ea;
  --no: #d93025;
  --no-soft: #fce8e6;
  --probe: #7b3fc4;
  --text: #0b7a8a;
  --user: #3c4043;
  --warn: #e8710a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --hdr: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--bg);
  min-height: 100dvh;
}
img, svg { max-width: 100%; }
svg.tree { max-width: none; }
button { font: inherit; }
[hidden] { display: none !important; }
code, .mono { font-family: var(--mono); }

/* ---------- 诊断输入条 ---------- */
.ask { display: flex; gap: 10px; margin-top: 10px; }
.ask textarea {
  flex: 1; min-width: 0; resize: vertical; font: inherit; font-size: 16px; padding: 9px 12px;
  border: 1px solid var(--line2); border-radius: 9px; outline: none; min-height: 64px;
}
.ask textarea:focus, .ask input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ask-side { display: flex; flex-direction: column; gap: 8px; width: 400px; }
.ask input { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 8px; outline: none; }
.ask-btns { display: flex; gap: 8px; }
.ask-btns .btn { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { border: 1px solid var(--line2); background: #f8fafc; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink2); }
.chip:active { background: var(--brand-soft); border-color: var(--brand); }
.cat:active, .ov-card:active, .crumb:active { background: #e9eef6; }
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.api-hint { margin-top: 8px; font-size: 12.5px; color: #8a5a00; background: #fff8e1; border: 1px solid #f6e2a6; border-radius: 7px; padding: 4px 10px; }
.api-hint code { background: #fff; border: 1px solid #f0d78c; border-radius: 4px; padding: 0 4px; }

.btn {
  border: 1px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn:active:not(:disabled) { transform: translateY(1px); background: #eef2f7; }
.btn.primary:active:not(:disabled) { background: #123f8c; }
.btn.yes:active:not(:disabled) { background: #0f6b2d; }
.btn.no:active:not(:disabled) { background: #b3261e; }
.btn.sm, .cmdbox .cp { min-height: 0; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #154fb0; color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { padding: 2px 9px; font-size: 13px; border-radius: 6px; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: "…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink2); }
.btn.primary.busy::after { color: #fff; }
.btn.yes { background: var(--yes); border-color: var(--yes); color: #fff; }
.btn.no { background: var(--no); border-color: var(--no); color: #fff; }
.btn.yes:hover:not(:disabled), .btn.no:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.btn.yes.cur, .btn.no.cur { box-shadow: 0 0 0 3px rgba(0,0,0,.18); }

/* ---------- 诊断页三栏 ---------- */
.diag-grid { display: grid; grid-template-columns: 228px minmax(0, 1fr) 372px; gap: 12px; padding: 12px; align-items: start; }
.col-left, .col-mid, .col-right { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.col-left { padding: 10px 8px; position: sticky; top: calc(var(--hdr) + 12px); max-height: calc(100dvh - var(--hdr) - 24px); overflow: auto; }
.col-title { font-size: 12px; color: var(--ink3); padding: 0 8px 6px; letter-spacing: 1px; }
.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; text-align: left;
  border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 8px; cursor: pointer; position: relative;
}
.cat:hover { background: #f3f6fa; }
.cat .ic { font-size: 15px; text-align: center; }
.cat .nm { font-size: 13px; line-height: 1.35; }
.cat .pc { font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.cat .bar { position: absolute; left: 36px; right: 8px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--brand); opacity: .35; }
.cat.matched .pc { color: var(--brand); font-weight: 600; }
.cat.cur { background: var(--brand-soft); border-color: #c6dafc; }
.cat.cur .nm { font-weight: 600; color: #174ea6; }
.cat.walked:not(.cur) { background: #f6f8fb; }
.cat-note { font-size: 12px; color: var(--ink3); padding: 8px; line-height: 1.5; }
.cat-note a { color: var(--brand); cursor: pointer; }

.col-mid { min-width: 0; display: flex; flex-direction: column; position: sticky; top: calc(var(--hdr) + 12px); height: calc(100dvh - var(--hdr) - 24px); min-height: 420px; }
.flow-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.crumbs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; }
.crumb { border: 0; background: none; padding: 2px 6px; border-radius: 6px; cursor: pointer; color: var(--ink2); }
.crumb:hover { background: #f1f3f6; }
.crumb.cur { color: var(--ink); font-weight: 600; background: var(--brand-soft); }
.crumb-sep { color: var(--ink3); }
.crumbs .static { font-weight: 600; }
.crumbs .sub { color: var(--ink3); font-size: 12px; margin-left: 6px; }
.zoom { display: flex; align-items: center; gap: 4px; }
#zoomPct { font-size: 12px; color: var(--ink3); width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 5px 12px; font-size: 12px; color: var(--ink2); border-bottom: 1px solid var(--line); background: #fafbfc; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-edge { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.lg-edge.yes { background: var(--yes); }
.lg-edge.no { background: var(--no); }
.lg-tip { margin-left: auto; color: var(--ink3); }
.canvas-wrap {
  position: relative; flex: 1; overflow: auto; cursor: grab;
  background-color: #fbfcfd;
  background-image: radial-gradient(#dfe4ea 1px, transparent 1px); background-size: 18px 18px;
  border-radius: 0 0 12px 12px;
}
.canvas-wrap.dragging { cursor: grabbing; user-select: none; }
#flow { display: inline-block; padding: 10px; }
#flow svg { display: block; }

/* 来源徽章（HTML 与 SVG 两版） */
.src { display: inline-block; font-style: normal; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 4px; color: #fff; font-weight: 600; }
.src-probe { background: var(--probe); }
.src-text { background: var(--text); }
.src-user { background: var(--user); }
.src-conflict { background: var(--warn); }

/* ---------- SVG 流程图 ---------- */
.tree text { font-family: inherit; }
.tree .nd { cursor: pointer; transition: opacity .2s; }
.tree .nd .box { fill: #fff; stroke: #b9c3cf; stroke-width: 1.3; }
.tree .nd.check .box { fill: #fff; }
.tree .nd.check .qmark { fill: #eef2f7; stroke: #b9c3cf; }
.tree .nd.check .qmark-t { fill: var(--ink2); font-size: 11px; font-weight: 700; }
.tree .nd .t { fill: var(--ink); font-size: 12.5px; }
.tree .nd .hd-t { fill: #fff; font-size: 11.5px; font-weight: 600; }
.tree .nd.goto .box { fill: #f6f8fb; stroke: #8a96a6; stroke-dasharray: 5 4; }
.tree .nd.goto .t2 { fill: var(--brand); font-size: 12.5px; font-weight: 600; }
.tree .nd.goto .t { fill: var(--ink2); }
.tree .nd .probe-dot { fill: var(--probe); font-size: 10px; }
.tree .nd:hover .box { stroke: var(--brand); stroke-width: 2; }
.tree .nd.sel .box { stroke: var(--brand); stroke-width: 2.5; }
.tree .nd.on .box { stroke: #2f3b48; stroke-width: 2.2; }
.tree .nd.on.check .box { fill: #f7faff; }
.tree .nd.dim { opacity: .32; }
.tree .nd.dim:hover { opacity: .75; }
.tree .nd.pending .box { stroke: var(--brand); stroke-width: 2.6; fill: #f2f7ff; }
.tree .nd .pulse { fill: none; stroke: var(--brand); stroke-width: 3; opacity: 0; }
.tree .nd.pending .pulse { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { opacity: .8; stroke-width: 3; }
  100% { opacity: 0; stroke-width: 18; }
}
.tree .nd.end .ring { fill: none; stroke-width: 4; }
.tree .nd.end { filter: drop-shadow(0 3px 8px rgba(0,0,0,.22)); }
.tree .nd.flash .box { animation: flash .5s ease-in-out 3; }
@keyframes flash { 50% { stroke: #fbbc04; stroke-width: 5; } }
.tree .ed { fill: none; stroke-width: 1.6; opacity: .55; }
.tree .ed.yes { stroke: var(--yes); }
.tree .ed.no { stroke: var(--no); }
.tree .ed.on { stroke-width: 4; opacity: 1; }
.tree .ed.dim { opacity: .18; }
.tree .el rect { fill: #fff; stroke-width: 1.2; }
.tree .el text { font-size: 11.5px; font-weight: 700; text-anchor: middle; }
.tree .el.yes rect { stroke: var(--yes); }
.tree .el.yes text { fill: var(--yes); }
.tree .el.no rect { stroke: var(--no); }
.tree .el.no text { fill: var(--no); }
.tree .el.on rect { stroke-width: 2; }
.tree .el.yes.on rect { fill: var(--yes); }
.tree .el.no.on rect { fill: var(--no); }
.tree .el.on text { fill: #fff; }
.tree .el.dim { opacity: .25; }
.tree .bdg text { fill: #fff; font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.tree .bdg.src-probe rect { fill: var(--probe); }
.tree .bdg.src-text rect { fill: var(--text); }
.tree .bdg.src-user rect { fill: var(--user); }
.tree .bdg.conflict rect { fill: var(--warn); }
.tree.mini .nd { cursor: default; }

/* 节点详情抽屉 */
.drawer {
  position: absolute; right: 12px; top: 92px; width: 350px; max-width: calc(100% - 24px);
  max-height: calc(100% - 104px); overflow: auto; background: var(--card); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,30,50,.18); padding: 14px 16px; z-index: 5;
}
.drawer h3 { margin: 0 26px 6px 0; font-size: 15px; line-height: 1.45; }
.drawer .x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink3); line-height: 1; padding: 4px; }
.drawer .x:hover { color: var(--ink); }
.drawer .kind { font-size: 12px; color: var(--ink3); margin-bottom: 8px; }
.drawer .ans-now { font-size: 13px; margin: 6px 0 10px; padding: 6px 8px; border-radius: 7px; background: #f5f7fa; }
.drawer .yn { display: flex; gap: 8px; margin-top: 12px; }
.drawer .yn .btn { flex: 1; }
.drawer .sub-h { font-size: 12px; color: var(--ink3); margin: 12px 0 4px; letter-spacing: .5px; }
.drawer ul.under { padding-left: 0; list-style: none; margin: 0; font-size: 12.5px; }
.drawer ul.under li { padding: 2px 0; cursor: pointer; }
.drawer ul.under li:hover { color: var(--brand); }

/* how 列表、命令复制 */
ul.how { list-style: none; padding: 0; margin: 4px 0; }
ul.how li { padding: 3px 0 3px 14px; position: relative; font-size: 13px; }
ul.how li::before { content: "•"; position: absolute; left: 2px; color: var(--ink3); }
ul.how li.cmd { padding-left: 0; }
ul.how li.cmd::before { content: none; }
.cmdbox { display: flex; align-items: stretch; background: #1e2430; border-radius: 7px; overflow: hidden; }
.cmdbox code { flex: 1; color: #e3e8ef; padding: 5px 9px; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
.cmdbox code::before { content: "$ "; color: #7f8c9d; }
.cmdbox .cp { border: 0; border-left: 1px solid #39414f; background: #2a313e; color: #c9d2de; font-size: 12px; padding: 0 10px; cursor: pointer; }
.cmdbox .cp:hover { background: #364052; color: #fff; }
.tipbox { font-size: 13px; background: #fff8e1; border-left: 3px solid #f9ab00; padding: 6px 10px; border-radius: 0 6px 6px 0; margin: 8px 0; }
.probebox { font-size: 13px; background: #f5effc; border-left: 3px solid var(--probe); padding: 6px 10px; border-radius: 0 6px 6px 0; margin: 8px 0; }

/* ---------- 右栏面板 ---------- */
.col-right { padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 右栏内部两层：上面是实况处置台，下面是诊断详情。各自独立成列，避免卡片贴在一起 */
#panel, #liveConsole { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#panel:empty, #liveConsole:empty { display: none; }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-switch { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions .btn { flex: 1; padding: 5px 6px; font-size: 13px; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fff; }
.card > h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.card > h4 .cnt { color: var(--ink3); font-weight: 400; }
.notice { font-size: 12.5px; color: var(--ink2); background: #f5f7fa; border-radius: 8px; padding: 7px 10px; }
.notice.warn { background: #fff8e1; color: #7a5200; }
.notice b { color: var(--ink); }
.lv { display: inline-block; color: #fff; font-weight: 700; font-size: 12px; padding: 0 6px; border-radius: 4px; line-height: 19px; white-space: nowrap; }
.cause-card { border-width: 2px; border-left-width: 7px; }
.cause-card .ttl { font-size: 17px; font-weight: 700; margin: 6px 0 8px; line-height: 1.4; }
.kv { display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; font-size: 13px; margin-bottom: 8px; }
.kv dt { color: var(--ink3); }
.kv dd { margin: 0; }
ol.fix { margin: 4px 0 0; padding-left: 20px; font-size: 13px; overflow-wrap: anywhere; }
.card { min-width: 0; }
ol.fix li { padding: 2px 0; }
.pending-card { border: 2px solid var(--brand); background: linear-gradient(#f5f9ff, #fff 70px); }
.pending-card .q-lbl { font-size: 12px; color: var(--brand); font-weight: 600; letter-spacing: 1px; }
.pending-card .q { font-size: 16.5px; font-weight: 700; margin: 4px 0 8px; line-height: 1.45; }
.big-yn { display: flex; gap: 10px; margin-top: 12px; }
.big-yn .btn { flex: 1; font-size: 18px; font-weight: 700; padding: 10px 0; border-radius: 10px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 10px 22px; font-size: 13px; cursor: pointer; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li .dot { position: absolute; left: 1px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); }
.timeline li .dot.y { background: var(--yes); }
.timeline li .dot.n { background: var(--no); }
.timeline li .dot.g { background: var(--brand); }
.timeline li .dot.p { background: #fff; box-shadow: 0 0 0 2px var(--brand); }
.timeline li .dot.c { background: #444; }
.timeline .st { line-height: 1.45; }
.timeline .st:hover { color: var(--brand); }
.timeline .meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.ans { font-weight: 700; font-size: 12px; padding: 0 6px; border-radius: 4px; }
.ans.y { color: var(--yes); background: var(--yes-soft); }
.ans.n { color: var(--no); background: var(--no-soft); }
.ev { font-size: 12px; color: var(--ink3); }
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { padding: 6px 4px; border-radius: 7px; cursor: pointer; }
.rank li:hover { background: #f4f7fb; }
.rank .r1 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rank .r1 .tt { flex: 1; min-width: 0; }
.rank .r1 .pp { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink2); }
.rank .meter { height: 5px; background: #eef1f5; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.rank .meter i { display: block; height: 100%; border-radius: 3px; }
.rank .why { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
ul.lines { margin: 0; padding-left: 18px; font-size: 12.5px; font-family: var(--mono); }
ul.lines li { padding: 1px 0; overflow-wrap: anywhere; }
.small-note { font-size: 12px; color: var(--ink3); margin-top: 6px; }
.llm-out { white-space: pre-wrap; font-size: 13px; line-height: 1.65; margin: 0; font-family: inherit; max-height: 480px; overflow: auto; }
.err { color: var(--no); font-size: 13px; }
.target { font-size: 12.5px; color: var(--ink2); }
.target code { background: #f1f3f6; padding: 0 5px; border-radius: 4px; }

/* ---------- 总览 ---------- */
.pane-wide { padding: 22px 28px 40px; }
.pane-intro { color: var(--ink2); margin: 0 0 12px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ov-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: 6px; }
.ov-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(26,95,208,.12); }
.ov-card.cur { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.ov-card h3 { margin: 0; font-size: 15px; }
.ov-card .d { font-size: 12px; color: var(--ink3); min-height: 36px; line-height: 1.5; }
.ov-card .thumb { height: 170px; background: #fbfcfd; border-radius: 8px; border: 1px solid #eef1f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ov-card .thumb svg { width: 100%; height: 100%; }
.ov-card .st { display: flex; gap: 10px; font-size: 12px; color: var(--ink2); flex-wrap: wrap; }
.ov-card .st .lv { font-size: 11px; line-height: 17px; }

/* ---------- 排查清单 ---------- */
.man-tools { display: flex; gap: 8px; margin-bottom: 12px; }
#manual { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 24px 30px; max-width: 1100px; }
#manual h2 { font-size: 20px; margin: 4px 0 14px; }
#manual h3 { font-size: 16px; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
table.lvt { border-collapse: collapse; width: 100%; font-size: 13px; }
table.lvt th, table.lvt td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
table.lvt th { background: #f5f7fa; font-weight: 600; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pf { border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; }
.pf b { font-size: 13.5px; }
.pf label { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; padding: 2px 0; cursor: pointer; }
.pf input { margin-top: 4px; }
.man-cat { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 0; }
.man-cat > summary { padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 15px; background: #f8fafc; border-radius: 10px; list-style-position: inside; }
.man-cat[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.man-cat > summary .d { font-weight: 400; font-size: 12.5px; color: var(--ink3); margin-left: 8px; }
.man-cat > .body { padding: 8px 14px 12px; }
ul.ie { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--line2); }
.man-cat > .body > ul.ie { padding-left: 0; border-left: 0; }
ul.ie li { margin: 3px 0; font-size: 13.5px; }
ul.ie details > summary { cursor: pointer; padding: 1px 0; }
ul.ie details > summary .if { color: var(--brand); font-weight: 700; font-family: var(--mono); font-size: 12px; margin-right: 6px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 4px; margin-right: 6px; color: #fff; line-height: 18px; }
.tag.yes { background: var(--yes); }
.tag.no { background: var(--no); }
.leaf-c { display: inline; }
.leaf-c .who { color: var(--ink3); font-size: 12px; margin-left: 4px; }
.leaf-g { color: var(--brand); cursor: pointer; }
.leaf-g:hover { text-decoration: underline; }
.man-how { font-size: 12px; color: var(--ink3); margin: 0 0 2px 2px; }
.man-how code { color: var(--ink2); background: #f1f3f6; padding: 0 4px; border-radius: 3px; }

/* ---------- 提示条 ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #263238; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; z-index: 99; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ---------- 对话首页（#tab-home）：C 端会话界面 ---------- */
/* 结构：左会话栏（知识库/新对话/最近/分类） + 右对话流（空态居中落地页 → 提问后对话生长）。
   观感目标：干净、留白足、圆角大、层次靠投影而不是靠描边；信息密度交给左栏和推荐卡承载。 */
body:not(.tab-diag-on) #tab-diag { display: none !important; }

body.tab-on-home { background: var(--card); }

#tab-home { padding: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
body:not(.tab-on-home) #tab-home { display: none !important; }
#tab-home > .hp-main { flex: 1; min-height: 0; }

/* ---------- 左栏 ---------- */
.hp-side {
  display: flex; flex-direction: column; min-height: 0;
  background: #fbfbfd; border-right: 1px solid #eceef2;
  padding: 14px 10px 12px;
}
.hp-new {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink);
  border-radius: 11px; cursor: pointer; font-size: 13.5px; font-weight: 500;
  transition: border-color .14s, box-shadow .14s, color .14s;
}
.hp-new:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 3px 10px rgba(26,95,208,.1); }
.hp-new svg { color: var(--brand); }

.hp-side-scroll { flex: 1; min-height: 0; overflow: auto; margin-top: 16px; scrollbar-width: thin; }
.hp-side-h { font-size: 11.5px; font-weight: 600; color: var(--ink3); letter-spacing: .7px; padding: 0 8px; margin: 0 0 6px; }
.hp-side-scroll .hp-side-h:not(:first-child) { margin-top: 18px; }

.hp-recent { display: flex; flex-direction: column; gap: 1px; }
.hp-recent-i {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  color: var(--ink2); font-size: 13px; padding: 7px 9px; border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-recent-i:hover { background: #eef1f6; color: var(--ink); }
.hp-empty { font-size: 12.5px; color: var(--ink3); padding: 4px 9px; }

.hp-cats { display: flex; flex-direction: column; gap: 1px; }
.hp-cat {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--ink2); padding: 7px 9px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.hp-cat:hover { background: #eef1f6; color: var(--brand); }
.hp-cat .ic { flex: none; font-size: 14px; line-height: 1; }
.hp-cat .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hp-side-foot { flex: none; margin-top: 12px; padding: 10px 10px 2px; border-top: 1px solid #eceef2; }
.hp-kb { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--ink3); }
.hp-kb b { color: var(--ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-kb-detail { margin-top: 3px; font-size: 11px; color: var(--ink3); line-height: 1.5; }

/* ---------- 对话流 ---------- */
.hp-main { min-width: 0; display: flex; flex-direction: column; background: var(--card); }
.hp-stream { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.hp-inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: 880px; margin: 0 auto; padding: 28px 24px 26px; min-height: 100%;
}
/* 空态：整块居中，做出落地页的呼吸感 */
body:not(.home-asked) .hp-inner { justify-content: center; }

.hp-hero { text-align: center; margin-bottom: 26px; padding: 0 8px; }
.hp-hero-ic { display: flex; justify-content: center; font-size: 30px; color: var(--brand); line-height: 1; margin-bottom: 16px; }
.hp-title { margin: 0 0 10px; font-size: 27px; font-weight: 600; letter-spacing: .2px; line-height: 1.35; }
.hp-sub { margin: 0; color: var(--ink3); font-size: 14px; line-height: 1.6; }

.hp-chat { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.hp-turn { display: flex; flex-direction: column; gap: 18px; }
.hp-me { display: flex; justify-content: flex-end; }
.hp-bubble {
  max-width: 82%; background: var(--brand); color: #fff; border-radius: 16px 16px 4px 16px;
  padding: 11px 16px; font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 4px 14px rgba(26,95,208,.16);
}
.hp-bot { display: flex; gap: 11px; align-items: flex-start; }
.hp-av {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 14px; margin-top: 1px;
}
.hp-card { flex: 1; min-width: 0; }
.hp-typing { display: inline-flex; gap: 5px; padding: 10px 4px; }
.hp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); animation: hpDot 1.1s infinite ease-in-out; }
.hp-typing i:nth-child(2) { animation-delay: .16s; }
.hp-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes hpDot { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

.hp-catline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hp-cat-chip { font-size: 13px; font-weight: 600; color: var(--ink); background: #f2f4f8; border-radius: 8px; padding: 4px 10px; }
.hp-ev { font-size: 12px; color: var(--ink3); }

.hp-done { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--lvc, var(--brand)); border-radius: 15px; padding: 15px 17px; box-shadow: 0 6px 22px rgba(31,41,51,.06); }
.hp-done-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hp-done-t { font-size: 17px; font-weight: 600; margin-bottom: 12px; line-height: 1.45; }
.hp-ask { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 15px 17px; box-shadow: 0 6px 22px rgba(31,41,51,.06); }
.hp-ask .q-lbl { font-size: 12px; color: var(--brand); font-weight: 600; letter-spacing: .3px; margin-bottom: 6px; }
.hp-ask .q { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }

/* 是/否 做成两张可点的选项卡，比两个并排按钮更像对话产品 */
.hp-yn { display: flex; gap: 10px; margin-top: 14px; }
.hp-opt {
  flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  background: #fbfcfe; border: 1px solid var(--line2); border-radius: 12px; padding: 11px 14px;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.hp-opt:hover { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 4px 14px rgba(26,95,208,.12); }
.hp-opt .k { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hp-opt .d { font-size: 12px; color: var(--ink3); }
.hp-mini { margin-top: 12px; }
.hp-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hp-card .sub-h { font-size: 12px; font-weight: 600; color: var(--ink3); letter-spacing: .5px; margin: 20px 2px 6px; }
.hp-rank { margin-top: 4px; }
.hp-rank li { cursor: pointer; }

/* ---------- 输入框 ----------
   结构：网址行（可收起）→ 正文 → 底栏（工具胶囊 · 键位提示 · 发送）。
   正文与底栏之间不画分隔线，靠留白分层；聚焦只换一圈柔光，不跳色。 */
.hp-composer {
  width: 100%; margin-top: 22px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 20px;
  padding: 12px 14px 10px; box-shadow: 0 10px 32px rgba(31,41,51,.09);
  transition: border-color .16s, box-shadow .16s;
}
.hp-composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 32px rgba(31,41,51,.1); }
.hp-cmp-top textarea {
  width: 100%; border: 0; outline: none; resize: none; font: inherit;
  font-size: 15.5px; line-height: 1.65; padding: 2px 4px 6px; background: transparent;
  max-height: 180px; overflow-y: auto; display: block; color: var(--ink);
}
.hp-cmp-bar { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.hp-pills { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.hp-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px;
  border: 1px solid transparent; background: #f3f6fa; color: var(--ink2);
  border-radius: 999px; padding: 0 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color .14s, color .14s, background .14s, box-shadow .14s;
}
.hp-pill:hover { color: var(--brand); background: var(--brand-soft); }
.hp-pill:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(26,95,208,.2); }
.hp-pill-ic { display: inline-flex; line-height: 1; }
.hp-pill.on { color: var(--brand); background: var(--brand-soft); border-color: rgba(26,95,208,.18); }
.hp-pill.busy { pointer-events: none; opacity: .7; }
.hp-pill.busy .hp-pill-ic { animation: hpSpin 1s linear infinite; }
@keyframes hpSpin { to { transform: rotate(360deg); } }
/* AI 开关：胶囊尾巴上带一个小拨杆，开着时整颗胶囊染品牌色 */
.hp-pill-ai { padding-right: 8px; }
.hp-sw {
  position: relative; width: 24px; height: 14px; border-radius: 999px; margin-left: 3px;
  background: #cfd6df; transition: background .16s; flex: none;
}
.hp-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform .16s;
}
.hp-pill-ai.on { background: linear-gradient(135deg, #eef3ff, #f3eeff); color: #3b4fd0; border-color: rgba(91,92,230,.2); }
.hp-pill-ai.on .hp-sw { background: linear-gradient(135deg, #1a5fd0, #6a4ce0); }
.hp-pill-ai.on .hp-sw::after { transform: translateX(10px); }
.hp-pill-ai.off { opacity: .55; }
.hp-kbd { flex: none; font-size: 11.5px; color: #a3aebb; white-space: nowrap; margin-right: 2px; }
.hp-kbd kbd {
  font: inherit; font-size: 11px; padding: 0 5px; border-radius: 5px; margin: 0 1px;
  border: 1px solid #e3e8ef; border-bottom-width: 2px; background: #fff; color: #7a8796;
}
.hp-send {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(26,95,208,.28); transition: background .14s, transform .14s, box-shadow .14s, opacity .14s;
}
.hp-send:hover { background: #154fb0; }
.hp-send:active { transform: translateY(1px); }
.hp-send > span { display: grid; place-items: center; }
.hp-send .hp-send-stop { display: none; }
/* 空态：还没写字时淡成灰色，提示「写点什么再发」，但仍可点（会给出提示） */
.hp-send.empty { background: #d5dce6; box-shadow: none; }
.hp-send.empty:hover { background: #c8d0dc; transform: none; }
/* 生成中：变成深色「停止」钮，外圈转一道细环 */
.hp-send.busy { background: var(--ink); box-shadow: 0 0 0 3px rgba(31,41,51,.08); position: relative; }
.hp-send.busy .hp-send-go { display: none; }
.hp-send.busy .hp-send-stop { display: grid; }
.hp-send.busy::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--brand); animation: hpSpin 1s linear infinite;
}
/* 网址行：在正文上方，像一枚附件条 */
.hp-url {
  display: flex; align-items: center; gap: 6px; margin: -2px 0 8px;
  background: #f5f8fc; border: 1px solid #e8edf4; border-radius: 12px; padding: 0 4px 0 11px;
}
.hp-url[hidden] { display: none; }
.hp-url:focus-within { border-color: rgba(26,95,208,.4); background: #fff; }
.hp-url-ic { color: var(--brand); display: inline-flex; flex: none; }
.hp-url input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13.5px; padding: 8px 2px; color: var(--ink);
}
.hp-url-x {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink3); cursor: pointer; display: grid; place-items: center;
}
.hp-url-x:hover { background: #e9eef5; color: var(--ink); }

@media (max-width: 1240px) {
  .hp-kbd { display: none; }
}
@media (max-width: 1040px) {
  .hp-pill { padding: 0 10px; }
}

/* ---------- 对话里的 AI 深度分析卡 ---------- */
.hp-ai {
  margin-top: 18px; border-radius: 16px; padding: 14px 16px 16px;
  background: linear-gradient(180deg, #f7f9ff 0, #fff 70px);
  box-shadow: inset 0 0 0 1px rgba(91,92,230,.14);
}
.hp-ai.busy { box-shadow: inset 0 0 0 1px rgba(91,92,230,.3), 0 6px 22px rgba(91,92,230,.08); }
.hp-ai-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.hp-ai-h b { font-weight: 600; color: var(--ink); }
.hp-ai-ic {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #1a5fd0, #6a4ce0); flex: none;
}
.hp-ai.busy .hp-ai-ic { animation: hpPulse 1.6s ease-in-out infinite; }
@keyframes hpPulse { 50% { box-shadow: 0 0 0 5px rgba(106,76,224,.14); } }
.hp-ai-meta { font-size: 12px; color: var(--ink3); }
.hp-ai-sp { flex: 1; }
.hp-ai-a {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink2); padding: 4px 8px; border-radius: 8px;
}
.hp-ai-a:hover { background: #eef1f8; color: var(--brand); }
.hp-ai-a .ib { display: inline-flex; }
.hp-ai-pr:empty { display: none; }
.hp-ai-steps-h {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink3); cursor: pointer; padding: 2px 4px 2px 0;
}
.hp-ai-steps-h:hover { color: var(--brand); }
.hp-ai-steps-h .ib { display: inline-flex; transition: transform .16s; transform: rotate(-90deg); }
.hp-ai-steps-h[aria-expanded="true"] .ib { transform: none; }
.hp-ai-steps { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; position: relative; }
.hp-ai-steps > li { position: relative; padding: 0 0 10px 20px; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.hp-ai-steps > li::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: #e3e8f0; }
.hp-ai-steps > li:last-child::before { display: none; }
.hp-ai-steps .dot {
  position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px #b9c3d0;
}
.hp-ai-steps li.ok .dot { box-shadow: inset 0 0 0 5px #19a974; }
.hp-ai-steps li.bad .dot { box-shadow: inset 0 0 0 5px #d64545; }
.hp-ai-steps li.run .dot { box-shadow: inset 0 0 0 2px #6a4ce0; animation: hpPulse 1.2s ease-in-out infinite; }
.hp-ai-steps li.note .dot { width: 7px; height: 7px; left: 1px; top: 7px; box-shadow: none; background: #cdd4de; }
.hp-ai-steps li.note .tx { color: var(--ink3); white-space: pre-wrap; font-size: 12.5px; }
.hp-ai-steps .tx b { font-weight: 500; color: var(--ink); margin-right: 8px; word-break: break-all; }
.hp-ai-steps .br { color: var(--ink3); font-size: 12.5px; }
.hp-ai-run { font-size: 12px; color: #6a4ce0; }
.hp-ai-steps .sub { margin: 4px 0 0; padding: 6px 10px; list-style: none; background: #f6f8fb; border-radius: 8px; }
.hp-ai-steps .sub li { font-size: 12px; color: var(--ink2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.7; word-break: break-all; }
.hp-ai-body { margin-top: 10px; font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.hp-ai-body:empty { display: none; }
.hp-ai-wait { display: flex; align-items: center; gap: 10px; color: var(--ink3); font-size: 13px; }
.hp-typing { display: inline-flex; gap: 4px; }
.hp-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8d7be8; animation: hpDot 1.2s infinite ease-in-out; }
.hp-typing i:nth-child(2) { animation-delay: .15s; }
.hp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hpDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.md p { margin: 0 0 8px; }
.md h5 { font-size: 14.5px; font-weight: 600; margin: 14px 0 6px; color: var(--ink); }
.md h5:first-child { margin-top: 0; }
.md h5.md-sec { display: inline-block; font-size: 13px; color: #3b4fd0; background: #eef1ff; padding: 1px 9px; border-radius: 6px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md b { font-weight: 600; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: #f1f4f8; padding: 1px 5px; border-radius: 5px; }
.md hr { border: 0; border-top: 1px solid #edf0f5; margin: 12px 0; }
.md-code { position: relative; margin: 6px 0 10px; }
.md-code pre { margin: 0; background: #1f2633; color: #e6ebf2; border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; }
.md-code code { background: none; padding: 0; color: inherit; }
.md-copy {
  position: absolute; top: 6px; right: 6px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #cfd6df; font: inherit; font-size: 11.5px; padding: 3px 8px;
}
.md-copy:hover { background: rgba(255,255,255,.22); color: #fff; }
.md-caret {
  display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px;
  background: #6a4ce0; border-radius: 1px; animation: hpBlink 1s steps(2, start) infinite;
}
@keyframes hpBlink { to { visibility: hidden; } }
.hp-ai-btn .ib { display: inline-flex; margin-right: 4px; color: #6a4ce0; }

/* ---------- 推荐条目（空态时在输入框下方） ---------- */
.hp-reco { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 20px; }
/* 8 张卡固定排成 4×2，不留半行空位；主区变窄时退成 2 列，手机上单列（见 900px 断点） */
@media (max-width: 1100px) { .hp-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.home-asked .hp-reco, body.home-asked .hp-hint { display: none; }
.hp-reco-card {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.hp-reco-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(26,95,208,.12); transform: translateY(-1px); }
.hp-reco-card .ic { flex: none; font-size: 17px; line-height: 1.3; }
.hp-reco-card .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-reco-card .tt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hp-reco-card .ds { font-size: 12px; color: var(--ink3); line-height: 1.5; }
.hp-hint { margin-top: 14px; font-size: 12px; color: var(--ink3); text-align: center; }

/* ---------- 中屏：左侧栏常驻占去 268px，两侧栏先收窄，给流程图留足宽度 ---------- */
@media (max-width: 1500px) {
  .diag-grid { grid-template-columns: 200px minmax(0, 1fr) 352px; }
}
/* ---------- 平板：三栏 → 两栏（断点比原来的 1180px 后移了一个侧栏宽度） ---------- */
@media (max-width: 1360px) {
  .diag-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .col-right { grid-column: 1 / -1; }
  .col-mid { min-height: 460px; }
}
@media (max-width: 900px) {
  /* ---------- 手机 / 窄屏：纵向单列 + 底部「流程图 / 诊断详情」切换 ---------- */
  body { padding-bottom: env(safe-area-inset-bottom); }
  .ask { flex-direction: column; gap: 8px; }
  .ask textarea { min-height: 70px; max-height: 30vh; font-size: 16px; }
  .ask-side { width: auto; }
  .ask input { font-size: 16px; }
  .ask-btns { flex-wrap: wrap; }
  .ask-btns .btn { flex: 1 1 30%; min-height: 44px; font-size: 15px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; gap: 6px; }
  .chips .ev { flex: 0 0 auto; align-self: center; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }

  .diag-grid { display: flex; flex-direction: column; padding: 8px 8px 0; gap: 8px; overflow-x: hidden; }
  .col-left, .col-mid, .col-right { position: static; top: 0; min-width: 0; width: 100%; max-width: 100%; }
  .canvas-wrap, #canvas { min-width: 0; max-width: 100%; }
  .col-left { max-height: none; padding: 8px 6px; overflow: visible; width: 100%; }
  #catList { width: 100%; }
  .cat-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 auto; align-self: flex-start; grid-template-columns: 20px auto auto; min-height: 44px; height: 44px; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--line); background: #fbfcfd; white-space: nowrap; }
  .cat .nm { white-space: nowrap; }
  .cat .pc { white-space: nowrap; }
  .cat .bar { display: none; }
  .cat-note { padding: 6px 4px 0; }
  .col-mid { height: calc(100dvh - 150px); min-height: 340px; border-radius: 10px; }
  .flow-bar { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .crumbs { font-size: 13px; }
  .zoom { margin-left: auto; }
  .zoom .btn { min-height: 40px; min-width: 40px; }
  #zoomPct { width: 36px; font-size: 12px; }
  .legend { gap: 10px; padding: 4px 8px; font-size: 11.5px; }
  .lg-tip { display: none; }
  .canvas-wrap { border-radius: 0 0 10px 10px; }
  #flow { padding: 6px; }
  .drawer { right: 8px; top: 8px; width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .drawer .yn .btn, .drawer .yn .btn { min-height: 46px; }
  .drawer .x { padding: 10px; font-size: 22px; }

  .col-right { padding: 0; border: 0; background: transparent; }
  .card { padding: 11px 12px; }
  .actions .btn { min-height: 44px; }
  .big-yn .btn { min-height: 54px; }
  table.lvt { min-width: 560px; }
  ul.lines { padding-left: 16px; }
  .pf-grid, .ov-grid { grid-template-columns: 1fr; }
  .ov-card .thumb { height: 140px; }
  .pane-wide { padding: 10px 12px calc(24px + env(safe-area-inset-bottom)); }
  /* 窄屏：左侧栏收成抽屉（默认收起，点顶条汉堡展开），内容区独占整屏、整页滚动 */
  #tab-home { height: auto; min-height: calc(100dvh - 52px); overflow: visible; }
  .hp-side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; width: min(84vw, 300px);
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.16);
  }
  .hp-side.open { transform: none; }
  body.hp-side-open::after {
    content: ''; position: fixed; inset: 0; z-index: 65; background: rgba(20,28,38,.32);
  }
  body.hp-side-open { overflow: hidden; }
  .hp-inner { padding: 18px 14px calc(22px + env(safe-area-inset-bottom)); }
  body:not(.home-asked) .hp-inner { justify-content: flex-start; }
  .hp-hero { margin-top: 12vh; }
  .hp-title { font-size: 21px; }
  .hp-sub { font-size: 13px; }
  .hp-bubble { max-width: 90%; font-size: 15px; }
  .hp-composer textarea { font-size: 16px; }
  .hp-pills { gap: 6px; }
  .hp-pill { padding: 7px 11px; }
  .hp-send { width: 42px; height: 42px; }
  .hp-reco { grid-template-columns: 1fr; }
  .hp-yn { flex-direction: column; }
  .hp-opt { min-height: 56px; }
  .hp-acts .btn { flex: 1; min-height: 44px; }
  #manual { padding: 12px 14px calc(24px + env(safe-area-inset-bottom)); }
  .cmdbox code { font-size: 12px; }

  /* 只有当前面板可见 */
  #tab-diag.mob-flow .col-right, #tab-diag.mob-panel .col-mid { display: none; }
  .mobile-switch {
    display: flex; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #ffffffee; border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-switch button {
    flex: 1; min-height: 44px; border: 1px solid var(--line2); background: #f6f8fb; border-radius: 10px;
    font-size: 15px; color: var(--ink2); cursor: pointer;
  }
  .mobile-switch button.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
  body.tab-diag-on { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .drawer { top: 8px; }
}
@media (max-width: 400px) {
  .ask-btns .btn { flex: 1 1 46%; }
  .legend span:nth-child(n+5) { display: none; }
  .crumbs .sub { display: none; }
}

/* ---------- 打印 ---------- */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 12px; }
  .no-print, .btn, .col-left, .drawer, .actions, .zoom, .legend, .big-yn, .yn, .cmdbox .cp, .toast, .mobile-switch, .ops-days { display: none !important; }
  #tab-diag { display: block !important; }
  #tab-diag.mob-flow .col-right, #tab-diag.mob-panel .col-mid { display: block !important; }
  body, body.tab-diag-on { padding-bottom: 0; }
  #tab-diag, .diag-grid { display: block; padding: 0; }
  .col-mid, .col-right { border: 0; position: static; height: auto; min-height: 0; padding: 0; }
  .canvas-wrap { overflow: visible; background: none; height: auto; }
  #flow { display: block; padding: 0; }
  #flow svg { width: 100% !important; height: auto !important; }
  .tree .nd.pending .pulse { animation: none; }
  .col-right { margin-top: 10px; }
  .card { break-inside: avoid; }
  #manual { border: 0; padding: 0; max-width: none; }
  .man-cat { break-inside: auto; }
  .man-cat > summary, ul.ie details > summary { list-style: none; }
  .man-cat > summary::-webkit-details-marker, ul.ie details > summary::-webkit-details-marker { display: none; }
  .pane-wide { padding: 0; }
  #tab-home { display: none !important; }
  .ov-card { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==================== 云镜：侧栏品牌位 ==================== */
/* 横式标志以 <img> 引入，按 2 倍图源基准高度 35px 显示，避免高分屏发虚 */
/* 侧栏品牌位：官方标志（横式）+ 平台名。标志本身就是「中国医疗保障」官方原件，
   不再手绘，也不改色；平台名可随客户换，取自 brand.config.js。 */
.brand { display: flex; align-items: center; gap: 10px; margin: 0; flex: none; }
.brand-logo { display: block; height: 34px; width: auto; flex: none; }
.brand-tx { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.brand-tx b { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: .3px; white-space: nowrap; }
.brand-tx i { font-size: 11px; font-style: normal; color: var(--ink3); white-space: nowrap; }

/* 内联图标与文字基线对齐（全站通用） */
.ic-svg { vertical-align: middle; flex: none; }
.hp-hero-ic svg, .hp-hero-ic img { display: block; }
.hp-hero-ic { color: inherit; }

/* 首页头像：改用中国医疗保障圆标 */
.hp-av-chs { padding: 0; overflow: hidden; background: transparent; }
.hp-av-chs svg, .hp-av-chs img { display: block; }

/* 分类/推荐卡的图标槽：原来是 emoji 字号，现在装 SVG */
.hp-cat .ic { display: inline-flex; align-items: center; }
.hp-reco-card .ic { display: inline-flex; align-items: center; margin-top: -1px; }
.hp-cat-chip { display: inline-flex; align-items: center; gap: 5px; }
.cc-ic { display: inline-flex; color: var(--brand); }

/* 卡片标题里的图标 */
.k-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--brand); }
.hd-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.kd-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.tb-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--warn); }
.an-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.pb-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--probe); }

/* 流程图节点上的探测标记：由文字标记改为 <circle>，用主题色填充 */
.tree .nd .probe-dot { fill: var(--probe); font-size: 0; }

/* ==================== 云镜：侧栏「巡检台」四模块（与页面导航同一种单行条目） ==================== */
.hp-ops-list { display: flex; flex-direction: column; gap: 1px; }
.hp-ops {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--ink2); padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; transition: background .14s, color .14s;
}
.hp-ops:hover { background: #eef2f9; color: var(--ink); }
.hp-ops-ic { flex: none; display: inline-flex; align-items: center; color: var(--ink3); }
.hp-ops-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-ops-tx b { font-weight: inherit; color: inherit; }
.hp-ops-n {
  flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink3);
  background: #eef1f6; border-radius: 999px; padding: 1px 7px; min-width: 24px; text-align: center;
}
.hp-ops-n.bad { background: #fdecea; color: var(--no); font-weight: 600; }
.hp-ops:hover .hp-ops-n { background: #e2e8f2; }
.hp-ops:hover .hp-ops-n.bad { background: #fbd9d5; }

/* ==================== 云镜：巡检台 ==================== */
/* 巡检台靠 hidden 属性显隐（switchTab 统一设置）；显式 block 免得被 .tabpane 的规则盖住 */
#tab-ops { display: block; }

.ops-wrap { display: flex; flex-direction: column; gap: 16px; }
/* .btn 是 inline-flex，图标后面那个空格会被吞掉，用 gap 把图标与文字隔开 */
.ops-wrap .btn { gap: 5px; }

.ops-body { display: flex; flex-direction: column; gap: 14px; }

/* KPI 行 */
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ops-kpi {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
}
.ops-kpi.warn { border-color: #f6cfc9; background: #fffbfa; }
.ops-kpi-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.ops-kpi.warn .ops-kpi-ic { background: #fdecea; color: var(--no); }
.ops-kpi-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ops-kpi-tx b { font-size: 20px; font-weight: 650; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ops-kpi-tx span { font-size: 12.5px; color: var(--ink2); }
.ops-kpi-tx i { font-size: 11px; font-style: normal; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 说明条 */
.ops-note {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.65;
  background: #fff8ec; border: 1px solid #f5e0be; color: #7a5410; border-radius: 12px; padding: 11px 14px;
}
.ops-note.plain { background: #f6f8fb; border-color: var(--line); color: var(--ink2); }
.ops-note .ic-svg { flex: none; margin-top: 2px; color: var(--warn); }
.ops-note.plain .ic-svg { color: var(--brand); }
.ops-note b { color: inherit; }
.ops-note.bad { background: #fdecea; border-color: #f5c6c0; color: var(--no); }
.ops-note.bad .ic-svg { color: var(--no); }
.ops-note .btn { margin-left: auto; flex: none; }

/* 区块标题 */
.ops-head { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ops-head h3 {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.ops-head h3 .ic-svg { color: var(--brand); }
.ops-head-act { margin-left: auto; display: flex; gap: 7px; }
.ops-head-tip { font-size: 12px; color: var(--ink3); min-width: 0; }

/* 卡片 */
.ops-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(396px, 1fr)); gap: 12px; }
.ops-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
.ops-card.wide { grid-column: 1 / -1; }
.ops-card-hd { display: flex; align-items: flex-start; gap: 10px; }
.ops-card-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.ops-card-ic.bad { background: #fdecea; color: var(--no); }
.ops-card-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ops-card-tt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ops-card-tt i { font-size: 11.5px; font-style: normal; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ops-tag { flex: none; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; background: #eef1f6; color: var(--ink2); }
.ops-tag.ok { background: #e6f4ea; color: var(--yes); }
.ops-tag.bad { background: #fdecea; color: var(--no); }
.ops-tag.wait { background: #f2f4f8; color: var(--ink3); }

.ops-card-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--ink2); }
.ops-card-meta span { display: inline-flex; align-items: baseline; gap: 5px; }
.ops-card-meta em { font-style: normal; color: var(--ink3); }
.ops-card-meta select.ops-every {
  font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--line2); border-radius: 6px;
  background: #fbfcfe; color: var(--ink); cursor: pointer;
}
.ops-card-meta select.ops-every:focus { outline: none; border-color: var(--brand); }
.ops-card-err { font-size: 12px; color: var(--ink2); background: #f6f8fb; border-radius: 8px; padding: 7px 10px; }
.ops-card-err.bad { color: var(--no); background: #fdecea; }

.ops-card-act { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
/* 只有图标的删除钮：靠右、收窄，和左边的操作拉开 */
.ops-card-act .ic-only { margin-left: auto; padding: 2px 7px; }

/* 历史小方块 */
.ops-hist { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ops-hist-i { width: 9px; height: 16px; border-radius: 3px; background: var(--line); }
.ops-hist-i.ok { background: #a8d5b5; }
.ops-hist-i.bad { background: #e8a29a; }
.ops-hist-i.chg { background: #f3c77a; }
.ops-hist-l, .ops-hist-none { font-size: 11px; color: var(--ink3); margin-left: 5px; }

/* 空态 */
.ops-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 34px 20px; background: var(--card); border: 1px dashed var(--line2); border-radius: 14px;
  color: var(--ink3);
}
.ops-empty.sm { padding: 18px; border-style: solid; }
.ops-empty .ic-svg { color: var(--line2); }
.ops-empty p { margin: 0; font-size: 13px; max-width: 460px; line-height: 1.7; }

/* 表单 */
.ops-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
}
.ops-f { display: flex; flex-direction: column; gap: 5px; min-width: 130px; flex: 1; }
.ops-f.wide { flex: 2 1 300px; }
.ops-f > span { font-size: 12px; color: var(--ink3); }
.ops-f input, .ops-f select {
  font: inherit; font-size: 13.5px; padding: 8px 11px; border: 1px solid var(--line2);
  border-radius: 9px; outline: none; background: #fbfcfe; color: var(--ink); min-width: 0;
}
.ops-f input:focus, .ops-f select:focus { border-color: var(--brand); background: var(--card); }

/* 运行日志 */
.ops-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ops-log li {
  display: flex; gap: 12px; font-size: 12.5px; color: var(--ink2); padding: 6px 11px; border-radius: 8px;
}
.ops-log li:nth-child(odd) { background: #fafbfd; }
.ops-log .t { flex: none; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ops-log .k-bad { color: var(--no); }
.ops-log .k-run { color: var(--yes); }
.ops-log .src { flex: none; font-size: 11px; color: var(--ink3); background: #eef1f6; border-radius: 5px; padding: 0 6px; align-self: center; }
.ops-log .x { flex: 1; min-width: 0; }

/* 告警列表 */
.ops-alerts { display: flex; flex-direction: column; gap: 4px; }
.ops-alert {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 7px 11px;
  border-radius: 9px; background: #f8fafc; border-left: 3px solid var(--line2);
}
.ops-alert .lv { flex: none; font-weight: 700; font-size: 11px; width: 22px; }
.ops-alert.lv-P1 { border-left-color: var(--no); background: #fef7f6; }
.ops-alert.lv-P1 .lv { color: var(--no); }
.ops-alert.lv-P2 { border-left-color: var(--warn); }
.ops-alert.lv-P2 .lv { color: var(--warn); }
.ops-alert.lv-P3 { border-left-color: #d9a300; }
.ops-alert.lv-P3 .lv { color: #a87d00; }
.ops-alert .tt { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-alert .tg, .ops-alert .tm { flex: none; color: var(--ink3); font-size: 11.5px; }
.ops-alert-d { font-size: 12px; color: var(--ink2); padding: 0 11px 4px 43px; line-height: 1.6; }
.ops-more { font-size: 12px; color: var(--ink3); padding: 4px 0; }

/* 水位读数表 */
.ops-list { display: flex; flex-direction: column; gap: 1px; }
.ops-row {
  display: flex; align-items: center; gap: 12px; font-size: 12.5px; padding: 7px 11px; border-radius: 8px;
}
.ops-row:nth-child(odd) { background: #fafbfd; }
.ops-row-t { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-row-d { flex: none; color: var(--ink3); font-size: 11.5px; }
.ops-row-v { flex: none; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 走势图 */
.ops-chart { display: flex; flex-direction: column; gap: 4px; }
.ops-chart-hd { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.ops-chart-hd .ic-svg { color: var(--brand); }
.ops-spark { display: block; width: 100%; background: #fafbfd; border-radius: 8px; }

/* 问题记录 */
.ops-issues { display: flex; flex-direction: column; gap: 4px; }
.ops-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); margin-bottom: 2px; }
.ops-issue {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px;
  padding: 7px 11px; border-radius: 9px; background: #fef7f6; border-left: 3px solid var(--no);
}
.ops-issue.done { background: #f6faf7; border-left-color: var(--yes); }
.ops-issue .st { flex: none; font-weight: 600; color: var(--no); }
.ops-issue.done .st { color: var(--yes); }
.ops-issue .tm, .ops-issue .du { flex: none; color: var(--ink3); font-size: 11.5px; }
.ops-issue .nt { flex: 1 1 100%; color: var(--ink2); }

/* 接口清单 */
.ops-eps { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.ops-ep { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 5px 9px; border-radius: 8px; }
.ops-ep:nth-child(odd) { background: #fafbfd; }
.ops-ep .m { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink3); width: 34px; }
.ops-ep .k { flex: none; font-size: 10.5px; border-radius: 5px; padding: 1px 6px; background: #eef1f6; color: var(--ink2); }
.ops-ep .k-api { background: var(--brand-soft); color: var(--brand); }
.ops-ep .k-form { background: #f0ecfb; color: var(--probe); }
.ops-ep .p { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-ep .btn, .ops-ep .ops-tag { flex: none; white-space: nowrap; }

/* 复现记录 */
.ops-replays { display: flex; flex-direction: column; gap: 3px; }
.ops-replay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: #fafbfd; }
.ops-replay.changed { background: #fff8ec; border-left: 3px solid var(--warn); }
.ops-replay .tm, .ops-replay .du { flex: none; color: var(--ink3); font-size: 11.5px; }
.ops-replay .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-replay .st { flex: none; font-weight: 600; color: var(--ink2); }
.ops-replay .chg { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.ops-replay .same { flex: none; color: var(--ink3); }
.ops-replay .err { flex: 1 1 100%; color: var(--no); }

/* ---------- 巡检台：近 7 天小结与按天归档面板 ---------- */
.ops-week { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--ink2); background: #f6f8fb; border-radius: 10px; padding: 7px 11px; }
.ops-week > span { display: inline-flex; align-items: center; }
.ops-week-hd { gap: 5px; font-weight: 600; color: var(--ink); }
.ops-week-hd .ic-svg { color: var(--brand); }
.ops-week-hd small { font-weight: 400; color: var(--ink3); font-size: 11px; margin-left: 2px; }
.ops-week em { font-style: normal; color: var(--ink3); margin-right: 5px; }
.ops-cmp { font-style: normal; display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.ops-cmp.good { background: var(--yes-soft); color: var(--yes); }
.ops-cmp.bad { background: var(--no-soft); color: var(--no); }
.ops-cmp.flat { background: #eef1f5; color: var(--ink3); }

body.ops-days-on { overflow: hidden; }
.ops-days { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ops-days-mask { position: absolute; inset: 0; background: rgba(20, 28, 38, .32); animation: opsDaysFade .18s ease-out; }
.ops-days-box {
  position: relative; width: min(1080px, 100%); max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 18px; outline: none; overflow: hidden;
  box-shadow: 0 24px 64px rgba(20, 28, 38, .22), 0 2px 8px rgba(20, 28, 38, .08);
  animation: opsDaysIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes opsDaysFade { from { opacity: 0; } }
@keyframes opsDaysIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.ops-days .btn { gap: 5px; }
.ops-days button:focus-visible, .ops-days-tw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 头部：图标 · 标题 · 范围与导出 · 关闭；说明行单独一行 */
.ops-days-hd {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ic tt tools x" "meta meta meta meta";
  align-items: center; column-gap: 12px; row-gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line);
}
.ops-days-ic { grid-area: ic; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ops-days-tt { grid-area: tt; min-width: 0; }
.ops-days-tt h2 { margin: 0; font-size: 16px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-days-tt p { margin: 2px 0 0; font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-days-tt p i, .ops-days-meta i { font-style: normal; margin: 0 7px; color: #c5ccd6; }
.ops-days-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; }
.ops-days-x { grid-area: x; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink2); display: grid; place-items: center; cursor: pointer; }
.ops-days-x:hover { background: #eef1f5; color: var(--ink); }
.ops-days-meta { grid-area: meta; font-size: 12px; color: var(--ink3); }
.ops-days-seg { display: inline-flex; background: #eef1f5; border-radius: 10px; padding: 3px; gap: 2px; }
.ops-days-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.ops-days-seg button:hover { color: var(--ink); }
.ops-days-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .09); }

.ops-days-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ops-days-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); }
.ops-days-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink2); margin-bottom: 10px; }
.ops-days-ch b { color: var(--ink); font-weight: 600; }
.ops-days-ch > .ic-svg { color: var(--brand); }
.ops-days-lg { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--ink3); }
.ops-days-lg i { display: inline-block; margin-left: 6px; }
.ops-days-lg .sw { width: 10px; height: 10px; border-radius: 3px; }
.ops-days-lg .sw.ok { background: #a8d5b5; }
.ops-days-lg .sw.mid { background: #f3c77a; }
.ops-days-lg .sw.bad { background: #e8a29a; }
.ops-days-lg .sw.none { background: #e3e7ed; }
.ops-days-lg .sw.down { background: #f0b8b0; }
.ops-days-lg .ln { width: 16px; border-top: 2px solid var(--brand); }
.ops-days-lg .ln.p95 { border-top: 2px dashed #9db8e8; }
.ops-days-lg .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }

/* 每日可用率色带：一天一格，与历史小方块同一套颜色 */
.ops-days-strip { display: flex; gap: 2px; height: 30px; cursor: crosshair; }
.ops-days-strip.dense { gap: 1px; }
.ops-days-strip.xdense { gap: 0; }
.ops-days-strip i { flex: 1 1 0; min-width: 0; border-radius: 3px; background: #e3e7ed; transition: transform .12s, filter .12s; }
.ops-days-strip.xdense i { border-radius: 0; }
.ops-days-strip i.ok { background: #a8d5b5; }
.ops-days-strip i.mid { background: #f3c77a; }
.ops-days-strip i.bad { background: #e8a29a; }
.ops-days-strip i.none { background: #e3e7ed; }
.ops-days-strip i.pre { background: #f1f3f6; }
.ops-days-strip i.today { opacity: .6; }
.ops-days-strip i.on { filter: brightness(.86); transform: scaleY(1.12); }

/* 折线与柱：SVG 拉伸铺满，线宽不随拉伸变形；孤立的一天用圆点 */
.ops-days-plot { position: relative; height: 140px; margin-top: 18px; cursor: crosshair; }
.ops-days-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ops-days-plot .gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #e3e7ed; }
.ops-days-plot .gl.base { border-top-style: solid; border-color: #d5dbe3; }
.ops-days-plot .gl span { position: absolute; left: 0; bottom: 2px; font-size: 10.5px; line-height: 1.2; color: var(--ink3); background: rgba(255, 255, 255, .85); padding-right: 3px; }
.ops-days-plot path.p50 { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ops-days-plot path.p95 { fill: none; stroke: #9db8e8; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ops-days-plot path.area { fill: var(--brand); opacity: .08; stroke: none; }
.ops-days-plot rect.bar { fill: #f0b8b0; }
.ops-days-plot rect.bar.open { fill: #e0857a; }
.ops-days-plot .pt { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--brand); pointer-events: none; }
.ops-days-plot .pt.p95 { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #9db8e8; }
.ops-days-plot .pt.mt { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--warn); box-shadow: 0 0 0 1.5px #fff; }
.ops-days-vl { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(31, 41, 51, .35); pointer-events: none; }
.ops-days-ax { position: relative; height: 16px; margin-top: 6px; font-size: 11px; color: var(--ink3); }
.ops-days-ax span { position: absolute; top: 0; left: 0; white-space: nowrap; }
.ops-days-ax .mid { transform: translateX(-50%); }
.ops-days-ax .end { left: auto; right: 0; }
.ops-days-none { display: flex; align-items: center; gap: 6px; padding: 14px 0 6px; font-size: 13px; color: var(--ink3); }
.ops-days-none .ic-svg { color: var(--yes); }
.ops-days-tip {
  position: absolute; z-index: 2; pointer-events: none; max-width: 260px; padding: 8px 10px; border-radius: 10px;
  background: #1f2933; color: #fff; font-size: 12px; line-height: 1.55; box-shadow: 0 8px 24px rgba(20, 28, 38, .24);
  display: flex; flex-direction: column; gap: 1px;
}
.ops-days-tip b { font-weight: 600; margin-bottom: 2px; }
.ops-days-tip span { color: rgba(255, 255, 255, .86); }

/* 每日明细：表头吸顶，数字右对齐等宽 */
.ops-days-tw { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.ops-days-tb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ops-days-tb th { position: sticky; top: 0; z-index: 1; background: #f6f8fb; color: var(--ink2); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ops-days-tb td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; white-space: nowrap; color: var(--ink); }
.ops-days-tb tr:last-child td { border-bottom: 0; }
.ops-days-tb .n { text-align: right; font-variant-numeric: tabular-nums; }
.ops-days-tb td.d small { margin-left: 6px; color: var(--ink3); font-size: 11px; }
.ops-days-tb td.mid { background: #fff8ec; }
.ops-days-tb td.bad { background: var(--no-soft); color: var(--no); font-weight: 600; }
.ops-days-tb tr.gap td { color: var(--ink3); background: #fafbfc; font-size: 12px; }
.ops-days-tb td.tg .ops-tag { margin-right: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ops-days-mask, .ops-days-box { animation: none; }
  .ops-days-strip i { transition: none; }
}

@media (max-width: 700px) {
  .ops-cards { grid-template-columns: 1fr; }
  .ops-form { flex-direction: column; align-items: stretch; }
  .ops-f, .ops-f.wide { flex: 1 1 auto; }
  .ops-form .btn { width: 100%; }
  .ops-ep { flex-wrap: wrap; }
  .ops-ep .p { flex-basis: 100%; order: -1; }
  /* 按天归档在手机上铺满全屏，范围与导出另起一行，明细表首列吸左 */
  .ops-days { padding: 0; }
  .ops-days-box { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .ops-days-hd { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tt x" "tools tools tools" "meta meta meta"; padding: 12px 14px 10px; }
  .ops-days-tools { justify-content: space-between; flex-wrap: wrap; }
  .ops-days-body { padding: 12px 14px 16px; }
  .ops-days-card { padding: 12px; }
  .ops-days-lg { margin-left: 0; width: 100%; }
  .ops-days-tb th:first-child, .ops-days-tb tr:not(.gap) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .ops-days-tb th:first-child { z-index: 2; background: #f6f8fb; }
}

/* ==================== 视觉层：对话首页的质感升级 ====================
   借鉴要点（不引入任何外部资源，全离线）：
   1) 极浅的蓝白渐变 + 细网格 + 两团弥散光晕打底，替代大片纯白；
   2) 近白输入卡用 20px+ 圆角与极柔投影分层，而不是靠描边；
   3) 强调色只用一支蓝，其余靠留白与灰阶拉开层级。 */
/* 底纹铺在整个主区（.hp-main）上，而不是只铺在中间那条内容栏里，否则两侧会露出大片纯白 */
.hp-main { position: relative; isolation: isolate; }
.hp-stream { background: transparent; }

/* 底：细网格叠在浅渐变上（先写的层在上面，所以网格写在前、渐变垫底）；
   用 mask 让网格向四周淡出，避免像表格线 */
body:not(.home-asked) .hp-main::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(26,95,208,.055) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(26,95,208,.055) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #ffffff 0%, #fdfeff 34%, #f5f9fe 100%);
  -webkit-mask-image: radial-gradient(96% 70% at 50% 32%, #000 0%, rgba(0,0,0,.55) 50%, transparent 80%);
  mask-image: radial-gradient(96% 70% at 50% 32%, #000 0%, rgba(0,0,0,.55) 50%, transparent 80%);
}

/* 光晕：两团极淡的蓝色弥散光 */
body:not(.home-asked) .hp-main::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 34% at 50% 22%, rgba(40,157,218,.16), transparent 66%),
    radial-gradient(40% 28% at 16% 12%, rgba(60,142,236,.12), transparent 68%),
    radial-gradient(48% 30% at 86% 78%, rgba(120,110,235,.1), transparent 70%);
}

/* 英雄区：字距放开、字重压低，做出落地页的安静感 */
.hp-hero { margin-bottom: 30px; }
.hp-hero-ic { margin-bottom: 20px; }
.hp-hero-ic svg, .hp-hero-ic img { filter: drop-shadow(0 6px 16px rgba(40,157,218,.32)); }
.hp-title { font-size: 30px; font-weight: 600; letter-spacing: 3.5px; margin: 0 0 12px; text-indent: 3.5px; }
.hp-sub { font-size: 14px; letter-spacing: .3px; color: var(--ink3); }

/* 输入卡：>20px 圆角 + 双层柔和投影，取代生硬的描边 */
.hp-composer {
  border: 1px solid rgba(26,95,208,.1); border-radius: 22px;
  padding: 15px 16px 12px;
  box-shadow: 0 1px 2px rgba(31,41,51,.04), 0 12px 40px rgba(26,95,208,.1);
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
}
.hp-composer:hover { border-color: rgba(26,95,208,.2); }
.hp-composer:focus-within {
  border-color: rgba(26,95,208,.45);
  box-shadow: 0 0 0 4px rgba(26,95,208,.1), 0 14px 44px rgba(26,95,208,.13);
}
.hp-cmp-top textarea { font-size: 15.5px; }
.hp-cmp-top textarea::placeholder { color: #a8b3c0; }

/* 发送钮：实心圆 + 柔光，浮起来一点（空态与生成中不浮） */
.hp-send { width: 40px; height: 40px; }
.hp-send:not(.empty):not(.busy) { box-shadow: 0 5px 16px rgba(26,95,208,.3); }
.hp-send:not(.empty):not(.busy):hover { box-shadow: 0 7px 20px rgba(26,95,208,.36); transform: translateY(-1px); }

/* 推荐卡：用 ring 替代硬边框，hover 抬升更克制 */
.hp-reco { gap: 11px; margin-top: 24px; }
.hp-reco-card {
  border: 0; border-radius: 16px; padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(26,95,208,.09), 0 2px 8px rgba(31,41,51,.04);
  background: rgba(255,255,255,.9);
}
.hp-reco-card:hover {
  box-shadow: inset 0 0 0 1px rgba(26,95,208,.34), 0 10px 26px rgba(26,95,208,.13);
  transform: translateY(-2px);
}
.hp-reco-card .ic { color: var(--brand); }
.hp-hint { color: #9aa6b4; letter-spacing: .2px; }

/* 已有对话时撤掉底纹，回到干净的阅读面（阅读体验优先于氛围） */
body.home-asked .hp-main::before,
body.home-asked .hp-main::after { display: none; }

/* 提问后输入框沉到底部并吸底，像 C 端对话产品那样随时可接着问；
   内容短时靠 margin-top:auto 压到底，内容长时 sticky 让它停在视口底部。
   最外一圈白色扩散投影用来遮住从它背后滚过的文字。 */
body.home-asked .hp-chat { padding-bottom: 22px; }
body.home-asked .hp-composer {
  position: sticky; bottom: 14px; z-index: 2; margin-top: auto;
  box-shadow: 0 1px 2px rgba(31,41,51,.04), 0 12px 40px rgba(26,95,208,.1), 0 0 0 14px var(--card);
}
body.home-asked .hp-composer:focus-within {
  box-shadow: 0 0 0 4px rgba(26,95,208,.1), 0 14px 44px rgba(26,95,208,.13), 0 0 0 14px var(--card);
}
body.home-asked .hp-composer { padding: 11px 14px 9px; }


/* 侧栏：与主区同族，去掉硬分割线，改用一层极浅底 */
.hp-side { background: #fafbfd; border-right-color: #eef1f6; }
.hp-side-h { letter-spacing: .9px; text-transform: none; }
.hp-ops:hover { background: #eef2f9; }
.hp-cat:hover, .hp-recent-i:hover { background: #eef2f9; }

@media (max-width: 900px) {
  .hp-title { font-size: 23px; letter-spacing: 2px; text-indent: 2px; }
  .hp-hero { margin-bottom: 22px; }
  .hp-composer { border-radius: 18px; }
  .hp-pill-ai .hp-pill-tx { font-size: 0; }
  .hp-pill-ai .hp-pill-tx::after { content: 'AI 分析'; font-size: 13px; }
  .hp-ai { padding: 12px 12px 14px; margin-left: -4px; margin-right: -4px; }
  .hp-ai-body { font-size: 14px; }
}

/* ==================== 页脚：技术支持署名 ====================
   文案与 logo 全部取自 brand.config.js，换客户时只改那一份配置。 */
.site-foot {
  border-top: 1px solid #edf0f5; background: #fcfdff;
  padding: 13px 20px; font-size: 12px; color: var(--ink3);
}
.site-foot-in {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; gap: 9px; flex-wrap: wrap; text-align: center;
}
/* 页脚：技术支持 + [公司 logo] + 公司名，三段横排 */
.site-foot-lb { color: var(--ink3); }
.site-foot-co { color: var(--ink2); font-weight: 600; }
.site-foot-co a { color: inherit; text-decoration: none; }
.site-foot-co a:hover { text-decoration: underline; }
body.tab-on-home .site-foot { display: none; }
@media (max-width: 640px) { .site-foot { padding: 11px 14px; } }

/* ==================== 应用外壳：左侧栏常驻 + 右侧内容区 ====================
   学 C 端 AI 产品的做法：导航永远在左边，点任何条目都只换右侧内容，不再切到顶部页签式布局。
   宽屏时外壳锁定一屏高，滚动只发生在右侧内容区（.shell-main）；窄屏退回整页滚动，侧栏收成抽屉。 */
.shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.shell-main { min-width: 0; min-height: 0; overflow: auto; position: relative; background: var(--bg); }
[data-svg] { display: inline-flex; align-items: center; flex: none; }

/* 侧栏头：横式标志 + 平台名；窄屏抽屉多一个收起按钮 */
.side-top { display: flex; align-items: center; gap: 8px; padding: 2px 6px 14px; }
.side-top .brand { flex: 1; min-width: 0; }
.side-x {
  display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: transparent; color: var(--ink2); cursor: pointer; place-items: center;
}
.side-x:hover { background: #eef2f9; }

/* 页面导航与巡检台：同一种单行条目，当前页用浅蓝底 + 主色字标出 */
.side-nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.side-i {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--ink2); padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; transition: background .14s, color .14s;
}
.side-i:hover { background: #eef2f9; color: var(--ink); }
.side-i .ic-svg { color: var(--ink3); }
.side-i.active, .hp-ops.active { background: #e6eefc; color: #1747a6; font-weight: 600; }
.side-i.active .ic-svg, .hp-ops.active .hp-ops-ic { color: var(--brand); }
.hp-ops.active .hp-ops-n { background: #d5e3fb; color: #1747a6; }

/* 侧栏底部：技术支持署名（文案与 logo 取自 brand.config.js） */
.side-credit {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid #eceef2;
  font-size: 11px; color: var(--ink3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.side-credit:empty { display: none; }
.side-credit-co { color: var(--ink2); font-weight: 600; }
.side-credit-co a { color: inherit; text-decoration: none; }
.side-credit-co a:hover { color: var(--brand); }
.side-credit-logo { height: 14px; width: auto; }

/* 诊断页顶部输入条：吸在内容区顶端，两侧栏和处置台标题按它的高度（--hdr）让位 */
.diag-top { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 18px 10px; position: sticky; top: 0; z-index: 4; }
.diag-top .ask { margin-top: 0; }
#tab-diag .cs-head { top: var(--hdr); }

/* 各页统一页头：图标块 + 小标题 / 页名 / 一句说明，右侧放本页工具 */
.pg-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.pg-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.pg-tt { min-width: 0; }
.pg-tt small { display: block; font-size: 11.5px; color: var(--ink3); letter-spacing: .6px; margin-bottom: 2px; }
.pg-tt h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .3px; }
.pg-tt p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink3); }
.pg-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pg-head .man-tools { margin: 0 0 0 auto; }
#worksApp .ws-root { max-width: none; margin: 0; padding: 0; background: transparent; }
.man-cat { scroll-margin-top: 12px; }
/* 宽屏侧栏 268px 常驻，提示条居中到右侧内容区 */
@media (min-width: 901px) { .toast { left: calc(50% + 134px); } }

/* 窄屏顶条：宽屏隐藏 */
.m-bar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; height: auto; overflow: visible; }
  .shell-main { overflow: visible; }
  .m-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30;
    height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 10px 0;
    background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #edf0f5;
  }
  .m-title { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-btn {
    flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2);
    background: #fff; display: grid; place-items: center; color: var(--ink2); cursor: pointer;
  }
  .m-btn:active { background: #eef2f9; }
  .hp-side { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .side-x { display: grid; }
  .diag-top { position: static; padding: 10px 12px; }
  .hp-stream { overflow: visible; }
  .man-cat { scroll-margin-top: 64px; }
  .pg-head { margin-bottom: 14px; }
  .pg-ic { width: 36px; height: 36px; border-radius: 11px; }
  .pg-tt h2 { font-size: 17px; }
}
@media (max-width: 560px) {
  .pg-head { flex-wrap: wrap; }
  .pg-head .man-tools { margin: 4px 0 0; width: 100%; }
  .pg-head .man-tools .btn { flex: 1; }
}
/* 诊断页自带「问题分类」栏，侧栏里同一份分类列表到这页就收起，免得左边两列重复 */
body.tab-diag-on .side-cats-h, body.tab-diag-on #homeCats { display: none; }

/* 示例问法：只占一行、横向滑动，右缘渐隐提示后面还有 */
.diag-top .chips {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 40px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.diag-top .chips::-webkit-scrollbar { display: none; }
.diag-top .chips > * { flex: 0 0 auto; white-space: nowrap; }

/* 排查清单：铺满内容区、与页头左右对齐；页头已有标题，屏幕上不再重复「网站故障排查手册」（打印仍保留） */
#manual { max-width: none; }
@media screen { #manual > h2:first-child { display: none; } #manual > h2:first-child + .ev { margin-top: 2px; } }
/* 手机上三张统计卡并成一行三格，不再竖着叠出近一屏 */
@media (max-width: 560px) {
  .ops-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ops-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; }
  .ops-kpi-ic { width: 28px; height: 28px; border-radius: 8px; }
  .ops-kpi-tx { width: 100%; }
  .ops-kpi-tx b { font-size: 18px; }
  .ops-kpi-tx span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ops-kpi-tx i { display: none; }
  /* 卡片操作行：文字按钮去掉小图标，五个按钮在 360 宽也排得下一行（纯图标的删除钮保留图标） */
  .ops-card-act .btn:not(.ic-only) .ic-svg { display: none; }
}
@media print {
  .shell, .shell-main { display: block !important; height: auto !important; overflow: visible !important; }
}

/* ==================== 专区页：侧栏图标栏 / 顶部输入条收起 / 流程图铺满 ====================
   诊断流程图、全部流程总览默认把侧栏收成 64px 的一列图标（app.js 的 ZONE），点侧栏顶部按钮可展开；
   诊断页顶部描述条默认收起，流程图工具条「改描述」再展开；「铺满」让流程图盖满整个窗口。 */
.brand-mini { display: none; }
.side-fold {
  flex: none; width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent;
  color: var(--ink3); cursor: pointer; display: grid; place-items: center;
}
.side-fold:hover { background: #eef2f9; color: var(--ink); }
@media (max-width: 900px) { .side-fold { display: none; } }

@media (min-width: 901px) {
  body.side-mini .shell { grid-template-columns: 64px minmax(0, 1fr); }
  body.side-mini .hp-side { padding: 14px 8px 12px; align-items: center; }
  body.side-mini .side-top { flex-direction: column; gap: 10px; padding: 2px 0 12px; }
  body.side-mini .side-top .brand { flex: none; }
  body.side-mini .brand-logo, body.side-mini .brand-tx { display: none; }
  body.side-mini .brand-mini { display: block; }
  body.side-mini .hp-new { width: 44px; min-height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  body.side-mini .hp-side-scroll { width: 100%; overflow-x: hidden; }
  body.side-mini .side-i, body.side-mini .hp-ops { justify-content: center; gap: 0; padding: 10px 0; font-size: 0; position: relative; }
  body.side-mini .hp-ops-tx, body.side-mini .hp-ops-n:not(.bad) { display: none; }
  /* 巡检台有异常时图标栏上留一个红点，不丢信息 */
  body.side-mini .hp-ops-n.bad { position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; background: var(--no); }
  body.side-mini .hp-side-h, body.side-mini .hp-recent, body.side-mini .hp-cats, body.side-mini .hp-side-foot { display: none; }
  body.side-mini .hp-side-scroll .hp-ops-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eceef2; }
  body.side-mini .toast { left: calc(50% + 32px); }
}

/* 诊断页顶部描述条：默认收起，点「改描述」展开 */
body.tab-diag-on:not(.ask-open) #diagTop { display: none; }
.zoom .ic-btn { gap: 4px; }
.zoom .ic-btn b { font-weight: inherit; }
.zoom .btn.cur { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* 铺满：流程图一栏固定盖住整个窗口 */
body.flow-full { overflow: hidden; }
body.flow-full #tab-diag .col-mid {
  position: fixed !important; inset: 0; top: 0; height: auto; min-height: 0; max-height: none;
  z-index: 60; border: 0; border-radius: 0; display: flex !important;
}
body.flow-full #tab-diag .canvas-wrap { border-radius: 0; }
body.flow-full #btnAsk { display: none; }