:root { --bg:#f7f8fa; --panel:#fff; --border:#e3e5ea; --text:#1f2329; --muted:#6b7280; --blue:#185FA5; --blue-bg:#E6F1FB; --green:#0F6E56; --green-bg:#E1F5EE; --amber:#854F0B; --amber-bg:#FAEEDA; --red:#A32D2D; --red-bg:#FCEBEB; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; height:100vh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:24px; padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--border); }
.logo { font-weight:600; font-size:15px; }
.beta { font-size:11px; color:var(--muted); font-weight:400; margin-left:6px; }
nav { display:flex; gap:4px; flex:1; }
nav button { border:none; background:none; padding:8px 14px; cursor:pointer; border-radius:8px; color:var(--muted); font-size:14px; }
nav button.active { background:var(--blue-bg); color:var(--blue); }
.agent-status { font-size:12px; padding:4px 10px; border-radius:12px; background:var(--bg); color:var(--muted); }
.agent-status.online { background:var(--green-bg); color:var(--green); }
.agent-status.offline { background:var(--red-bg); color:var(--red); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.engine-badge { font-size:11px; padding:4px 10px; border-radius:12px; background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.engine-badge.llm { background:var(--blue-bg); color:var(--blue); border-color:transparent; }
.engine-badge.rules { background:var(--amber-bg); color:var(--amber); border-color:transparent; }
.tag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; background:var(--bg); color:var(--muted); vertical-align:middle; }
.tag-tcp { background:var(--blue-bg); color:var(--blue); }
.tag-arp { background:#EEE9FB; color:#5B3AA8; }
.tag-onvif { background:var(--green-bg); color:var(--green); }
.tag-ssdp { background:#EAF3DE; color:#3B6D11; }
.chip-hint { margin-top:3px; font-size:11px; color:var(--amber); }
.vendor-line { font-size:12px; color:var(--text); margin-bottom:3px; }
.vendor-line b { font-weight:500; }
.vendor-line .src { font-size:10px; color:var(--muted); background:var(--bg); border-radius:8px; padding:1px 6px; margin-left:4px; }
.tag-rules { background:var(--amber-bg); color:var(--amber); font-size:11px; }
.tag-llm { background:var(--blue-bg); color:var(--blue); font-size:11px; }
.evidence { font-size:12px; background:var(--amber-bg); color:var(--amber); padding:6px 10px; border-radius:6px; margin-bottom:8px; }
.scan-opts { display:flex; align-items:center; gap:10px; margin:8px 0 12px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.scan-opts label.inline { display:flex; align-items:center; gap:6px; color:var(--text); }
main { flex:1; overflow:hidden; display:flex; }
.tab { display:none; flex:1; overflow:hidden; }
.tab.active { display:flex; }
.sidebar { width:300px; border-right:1px solid var(--border); background:var(--panel); padding:14px; overflow-y:auto; flex-shrink:0; }
.panel-title { font-weight:600; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.mini { font-size:12px; padding:3px 10px; border:1px solid var(--border); background:var(--panel); border-radius:6px; cursor:pointer; }
.primary { background:var(--blue); color:#fff; border:none; padding:9px 14px; border-radius:8px; cursor:pointer; width:100%; }
.primary:hover { opacity:.92; }
.danger { background:var(--red); color:#fff; border:none; }
.device-list, .file-list { display:flex; flex-direction:column; gap:6px; }
.kb-group { margin-top:8px; padding:4px 2px; font-size:12px; font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); }
.kb-group:first-child { margin-top:0; }
.device-item, .file-item { padding:8px 10px; border:1px solid var(--border); border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.device-item:hover, .file-item:hover, .device-item.sel, .file-item.sel { background:var(--blue-bg); }
.device-item .host { font-size:12px; color:var(--muted); }
.device-item .del { color:var(--red); font-size:12px; cursor:pointer; }
.start-form { display:flex; flex-direction:column; gap:8px; }
.start-form select, .start-form textarea { padding:8px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:13px; }
.start-form textarea { height:80px; resize:vertical; }
.chat-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.session-header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--border); font-weight:600; }
.hidden { display:none !important; }
.chat-box { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.empty-hint { color:var(--muted); text-align:center; margin-top:80px; line-height:2; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px; max-width:860px; }
.card.user { align-self:flex-end; background:var(--blue-bg); }
.card.profile { font-size:12px; background:var(--green-bg); border-color:var(--green); }
.card.profile b { color:var(--green); }
.card.analysis h4 { margin-bottom:8px; color:var(--blue); }
.analysis-meta { font-size:12px; color:var(--muted); margin-bottom:8px; }
.analysis-meta .conf { color:var(--amber); font-weight:600; }
.hypotheses { margin:8px 0 8px 18px; font-size:13px; color:var(--text); }
.refs { font-size:12px; color:var(--muted); margin-top:8px; }
.refs code { background:var(--bg); padding:1px 5px; border-radius:4px; margin-right:6px; }
.cmd-item { display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-top:8px; background:var(--bg); }
.cmd-item code { flex:1; font-family:Consolas,monospace; font-size:13px; word-break:break-all; }
.cmd-item .lv { font-size:11px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.lv.auto { background:var(--green-bg); color:var(--green); }
.lv.confirm { background:var(--amber-bg); color:var(--amber); }
.lv.blocked { background:var(--red-bg); color:var(--red); }
.cmd-item button { font-size:12px; padding:4px 12px; border:none; border-radius:6px; cursor:pointer; white-space:nowrap; }
.cmd-item button.run-auto { background:var(--green); color:#fff; }
.cmd-item button.run-confirm { background:var(--amber); color:#fff; }
.cmd-item.runnable { border-color:var(--green); }
.cmd-item.done { opacity:.55; }
.output-card { background:#0f172a; color:#d7e0ee; border-radius:12px; padding:12px 14px; font-family:Consolas,monospace; font-size:12px; max-width:860px; white-space:pre-wrap; word-break:break-all; max-height:320px; overflow-y:auto; }
.output-card .cap { color:#7dd3a8; margin-bottom:6px; font-family:inherit; }
.msg-ok { color:var(--green); } .msg-err { color:var(--red); }
.content-area { flex:1; padding:20px; overflow-y:auto; background:var(--panel); }
.content-area.narrow { max-width:680px; }
.content-area pre { white-space:pre-wrap; word-break:break-all; font-family:Consolas,monospace; font-size:12px; line-height:1.7; }
.content-area h2 { font-size:15px; margin-bottom:14px; }
.content-area label { display:block; font-size:13px; color:var(--muted); margin-bottom:12px; }
.content-area label input, .content-area label select { display:block; width:100%; margin-top:4px; padding:8px; border:1px solid var(--border); border-radius:8px; font-size:13px; }
.hint { font-size:13px; color:var(--muted); margin:8px 0; line-height:1.7; }
.code-block { background:#0f172a; color:#d7e0ee; padding:12px; border-radius:8px; font-size:12px; white-space:pre-wrap; word-break:break-all; }
.msg { margin-top:10px; font-size:13px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1f2329; color:#fff; padding:10px 20px; border-radius:10px; font-size:13px; z-index:99; }
.toast.err { background:var(--red); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-box { background:var(--panel); border-radius:14px; padding:24px; width:420px; max-height:90vh; overflow-y:auto; }
.modal-box h3 { font-size:15px; margin-bottom:16px; }
.modal-box label { display:block; font-size:13px; color:var(--muted); margin-bottom:10px; }
.modal-box label input, .modal-box label select { display:block; width:100%; margin-top:4px; padding:8px; border:1px solid var(--border); border-radius:8px; font-size:13px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.modal-actions button { padding:8px 18px; border-radius:8px; border:1px solid var(--border); background:var(--panel); cursor:pointer; }
.modal-actions .primary { width:auto; }
.modal-box.wide { width:680px; }
.scan-meta { font-size:12px; color:var(--muted); font-weight:400; }
.scan-list { max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.scan-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; }
.scan-row.vendor { background:var(--green-bg); border-color:var(--green); }
.scan-row .ip { font-family:Consolas,monospace; font-weight:600; width:118px; }
.scan-row .info { flex:1; font-size:12px; color:var(--muted); }
.scan-row .info b { color:var(--text); font-size:13px; display:block; }
.scan-row button { font-size:12px; padding:5px 12px; border-radius:6px; border:1px solid var(--border); background:var(--panel); cursor:pointer; white-space:nowrap; }
.scan-row button.add { background:var(--blue); color:#fff; border:none; }

/* ---------- 自主排查：步骤流与关键操作确认卡 ---------- */
.session-actions { display:flex; gap:8px; align-items:center; }
.auto-opt { font-size:12px; color:var(--text); display:flex; align-items:center; gap:6px; }
.auto-opt input { width:auto; }
.thought { font-size:13px; line-height:1.8; color:var(--text); }
.thought .tag { margin-right:6px; }

.risk-card { border-left:4px solid var(--amber); background:#FFFCF6; }
.risk-card.sev-high { border-left-color:var(--red); background:#FFF8F8; }
.risk-card.sev-low { border-left-color:var(--green); background:#F8FDFB; }
.risk-card.resolved { opacity:.62; border-left-color:var(--green); }
.risk-card.skipped { opacity:.55; border-left-color:var(--muted); }

.risk-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; }
.risk-dot { width:9px; height:9px; border-radius:50%; background:var(--amber); flex-shrink:0; }
.sev-high .risk-dot { background:var(--red); }
.sev-low .risk-dot { background:var(--green); }
.risk-card .sev { font-size:10px; padding:2px 8px; border-radius:10px; background:var(--amber-bg); color:var(--amber); }
.risk-card .sev-high { background:var(--red-bg); color:var(--red); }
.risk-card .sev-medium { background:var(--amber-bg); color:var(--amber); }
.risk-card .sev-low { background:var(--green-bg); color:var(--green); }
.risk-kind { font-size:10px; color:var(--muted); font-family:Consolas,monospace; }
.risk-cmd { background:#0f172a; color:#ffd9a0; padding:9px 12px; border-radius:8px; font-family:Consolas,monospace; font-size:12.5px; word-break:break-all; margin-bottom:10px; }
.risk-row { display:flex; gap:10px; font-size:12.5px; line-height:1.75; margin-bottom:6px; }
.risk-row .k { width:104px; flex-shrink:0; color:var(--muted); }
.risk-row .v { flex:1; color:var(--text); }
.preflight { margin:2px 0 0 16px; font-size:11.5px; }
.preflight code { background:var(--bg); padding:1px 5px; border-radius:4px; font-family:Consolas,monospace; word-break:break-all; }
.risk-actions { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); }
.risk-actions .spacer { flex:1; }
.risk-actions label.inline { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.risk-actions button { font-size:12.5px; padding:6px 16px; border-radius:7px; cursor:pointer; border:1px solid var(--border); background:var(--panel); }
.risk-actions .btn-approve { background:var(--amber); color:#fff; border:none; }
.risk-actions .btn-approve.sev-high { background:var(--red); }
.risk-actions .btn-approve.sev-low { background:var(--green); }
.risk-actions .btn-approve:disabled, .risk-actions .btn-reject:disabled { opacity:.5; cursor:default; }

/* ---------- 登录页 ---------- */
body.auth-body {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#f2f5fa 0%,#f7f8fa 45%,#eef3fb 100%);
  height:100vh; padding:20px;
}
.auth-card {
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:32px 28px 22px; box-shadow:0 10px 40px rgba(24,95,165,.08);
}
.auth-brand { text-align:center; margin-bottom:26px; }
.auth-logo { font-size:17px; font-weight:600; letter-spacing:.5px; }
.auth-sub { font-size:12px; color:var(--muted); margin-top:6px; }
.auth-card label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.auth-card label input {
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid var(--border); border-radius:9px; font-size:14px; background:var(--bg);
}
.auth-card label input:focus { outline:none; border-color:var(--blue); background:#fff; }
.auth-submit { width:100%; padding:11px; font-size:14px; letter-spacing:2px; margin-top:4px; }
.auth-msg { font-size:12.5px; color:var(--green); min-height:18px; margin-top:12px; text-align:center; }
.auth-msg.err { color:var(--red); }
.auth-foot { font-size:11.5px; color:var(--muted); text-align:center; margin-top:18px; padding-top:14px; border-top:1px dashed var(--border); line-height:1.7; }

/* ---------- 顶部用户区 ---------- */
.user-chip { display:flex; align-items:center; gap:8px; padding-left:10px; border-left:1px solid var(--border); }
.user-name { font-size:12.5px; font-weight:600; }
.tenant-tag { font-size:10.5px; padding:2px 8px; border-radius:10px; background:var(--blue-bg); color:var(--blue); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-select { font-size:12px; padding:5px 8px; border:1px solid var(--border); border-radius:7px; background:var(--panel); max-width:180px; }
header .mini { padding:5px 10px; font-size:12px; }

/* ---------- 客户与连接器 ---------- */
.client-new { display:flex; gap:8px; margin:14px 0 18px; flex-wrap:wrap; }
.client-new input, .client-new select { padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--panel); min-width:150px; }
.client-new button.primary { width:auto; }

.token-result { margin-bottom:18px; }
.token-box { background:var(--green-bg); border:1px solid #bfe4d6; border-radius:10px; padding:14px 16px; }
.token-title { font-size:12.5px; color:var(--green); font-weight:600; margin-bottom:8px; }
.token-box code { display:block; background:#0f172a; color:#c8f0dd; padding:10px 12px; border-radius:7px; font-family:Consolas,monospace; font-size:12.5px; word-break:break-all; margin-bottom:8px; }
.token-hint { font-size:11.5px; color:var(--muted); margin-bottom:8px; }

.tenant-table { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tt-head, .tt-row { display:grid; grid-template-columns:1.4fr .6fr .5fr 1.5fr 2fr; gap:10px; padding:10px 14px; align-items:center; font-size:12.5px; }
.tt-head { background:var(--bg); color:var(--muted); font-size:11.5px; font-weight:600; }
.tt-row { border-top:1px solid var(--border); background:var(--panel); }
.tt-row.archived { opacity:.55; }
.tt-sub { font-size:11px; color:var(--muted); margin-top:3px; }
.tt-tokens code { display:inline-block; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:11px; margin:0 6px 3px 0; font-family:Consolas,monospace; }
.tt-ops { display:flex; gap:6px; flex-wrap:wrap; }
.tt-ops .mini { padding:4px 9px; font-size:11.5px; }
.tt-row .ok { color:var(--green); font-weight:600; }
.tt-row .off { color:var(--muted); }