/* 控制台样式。一套控件走到底：
 *   按钮 = button / a.btn（不用带下划线的文字链接跳转）
 *   筛选 = .seg 分段切换
 *   状态 = .pill 胶囊（.tag 是它的别名）
 *   列表 = .card.tbl 里的表格
 */
:root {
  --ink: #14141c; --body: #2a2a38; --fg2: #6b6b7b; --fg3: #9a9aab; --line: #e2e2ea; --soft: #f4f4f8; --canvas: #f3f3f7;
  --brand: #4240b5; --brand-ink: #33319a; --tint: #eeedfb;
  --ok: #0f7a52; --ok-bg: #e4f4ec; --warn: #9a5b00; --warn-bg: #fdf0dd;
  --bad: #b3261e; --bad-bg: #fbe9e7; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 8px; --ch: 34px;
}
* { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; font: 14px/1.55 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--body); background: var(--canvas); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); }
b { color: var(--ink); }

/* ---------------------------------------------------------------- 侧栏 */
.side { width: 224px; flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column;
        position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.brand-logo { width: 132px; max-width: 100%; height: auto; display: block; }
.brand-name { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-weight: 400; color: var(--fg2); margin-left: 6px; }
#nav { padding: 12px 10px; flex: 1; }
nav a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: var(--r); color: var(--body); margin-bottom: 2px; }
nav a:hover { background: var(--soft); color: var(--ink); }
nav a.on { background: var(--tint); color: var(--brand); font-weight: 600; }
nav .n { font-size: 12px; font-weight: 600; background: var(--bad-bg); color: var(--bad); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.nav-top { margin-bottom: 8px; }
.nav-group { margin-bottom: 8px; }
.nav-label { font-size: 11px; color: var(--fg3); padding: 8px 12px 4px; letter-spacing: .08em; }
.foot { padding: 10px 22px 14px; font-size: 11px; color: var(--fg3); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- 页面骨架 */
main { flex: 1; min-width: 0; }
main > header { padding: 16px 28px 0; border-bottom: 1px solid var(--line); background: var(--canvas); }
.crumbs { font-size: 12.5px; color: var(--fg3); min-height: 0; }
.crumbs:not(:empty) { margin-bottom: 4px; }
.crumbs a { color: var(--fg2); } .crumbs a:hover { color: var(--brand); }
.crumbs .sep { margin: 0 7px; color: var(--fg3); }
header h1 { margin: 0 0 14px; font-size: 20px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.tabs { display: flex; gap: 22px; margin-top: -2px; }
.tabs a { padding: 0 2px 10px; color: var(--fg2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tabs i { font-style: normal; font-size: 11.5px; font-weight: 600; background: var(--bad-bg); color: var(--bad); border-radius: 999px; padding: 0 6px; line-height: 17px; }

/* 问号说明：点一下才出来 */
.help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none;
        border-radius: 50%; border: 1px solid var(--fg3); color: var(--fg2); font-size: 11px; font-weight: 600; line-height: 1;
        cursor: pointer; user-select: none; vertical-align: middle; outline: none; }
.help:hover, .help:focus { border-color: var(--brand); color: var(--brand); }
.help-tip { display: none; position: absolute; left: -8px; top: 24px; z-index: 30; width: max-content; max-width: 320px; padding: 10px 12px;
        background: var(--ink); color: #fff; border-radius: 10px; font-size: 12.5px; font-weight: 400; line-height: 1.6; text-align: left;
        white-space: normal; box-shadow: 0 6px 20px rgba(20,20,40,.2); cursor: default; }
.help:focus .help-tip { display: block; }
.help.right .help-tip { left: auto; right: -8px; }
.help.alert { border-color: var(--bad); color: var(--bad); font-weight: 600; }
.help.alert .help-tip { white-space: pre-wrap; word-break: break-word; }
.st-cell .help:hover .help-tip { display: block; }
.st-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover, th.sortable.on { color: var(--brand); }
th.sortable i { font-style: normal; margin-left: 3px; opacity: .45; } th.sortable.on i { opacity: 1; }
#view { padding: 20px 28px 40px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-title b { font-size: 14px; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted, .hint { color: var(--fg2); font-size: 12px; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.flex1 { flex: 1; }
.empty { color: var(--fg2); text-align: center; padding: 44px 20px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid.quota { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- 控件：输入、按钮 */
input, select, textarea { height: var(--ch); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; color: var(--ink); background: #fff; outline: none; }
textarea { height: auto; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
input[readonly] { background: var(--soft); color: var(--body); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
         background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b7b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
button, .btn, .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ch); padding: 0 14px;
        white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--body); border-radius: var(--r);
        cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; transition: border-color .12s, background .12s, color .12s; }
button:hover, .btn:hover, .btn-link:hover { border-color: var(--brand); color: var(--brand); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
button.danger, .btn.danger { color: var(--bad); }
button.danger:hover, .btn.danger:hover { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
button.alert, .btn.alert { background: var(--bad-bg); border-color: transparent; color: var(--bad); font-weight: 600; }
button.alert:hover, .btn.alert:hover { border-color: var(--bad); color: var(--bad); }
button.sm, .btn.sm, .btn-link { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.ops { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ops.nowrap { flex-wrap: nowrap; }

/* 「更多」菜单：次要操作收进去 */
details.menu { position: relative; }
details.menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; height: 28px; width: 30px;
        border: 1px solid var(--line); border-radius: 7px; cursor: pointer; color: var(--fg2); background: #fff; user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { border-color: var(--brand); color: var(--brand); }
.menu-list { position: absolute; right: 0; top: 32px; z-index: 20; min-width: 132px; padding: 4px; background: #fff;
        border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(20,20,40,.12); display: flex; flex-direction: column; }
.menu-list button, .menu-list a { justify-content: flex-start; height: 30px; padding: 0 10px; border: none; border-radius: 6px;
        font-size: 13px; font-weight: 400; color: var(--body); background: none; display: flex; align-items: center; }
.menu-list button:hover, .menu-list a:hover { background: var(--soft); color: var(--ink); }
.menu-list .danger { color: var(--bad); } .menu-list .danger:hover { background: var(--bad-bg); color: var(--bad); }

/* ---------------------------------------------------------------- 筛选：工具条、分段切换、选项胶囊 */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input.search { width: 240px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.seg > button, .seg > a { height: 26px; padding: 0 12px; border: none; border-radius: 7px; background: none; color: var(--fg2);
        font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.seg > button:hover, .seg > a:hover { color: var(--ink); background: var(--soft); }
.seg > .on, .seg > .on:hover { background: var(--tint); color: var(--brand); font-weight: 600; }
.seg i { font-style: normal; font-size: 11.5px; font-weight: 500; opacity: .75; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 28px; cursor: pointer; font-size: 12.5px; font-weight: 400; padding: 0 12px; border: 1px solid var(--line);
        border-radius: 999px; background: #fff; color: var(--body); display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on, .chip.on:hover { background: var(--tint); border-color: var(--tint); color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- 状态胶囊（.tag 同款） */
.pill, .tag { display: inline-flex; align-items: center; height: 22px; font-size: 12px; font-weight: 500; padding: 0 9px;
        border-radius: 999px; background: var(--soft); color: var(--fg2); white-space: nowrap; }
.pill.ok, .pill.done, .pill.st-done, .pill.resolved, .tag.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn, .pill.stopped, .pill.paused, .pill.blocked, .pill.st-paused, .pill.st-warn { background: var(--warn-bg); color: var(--warn); }
.pill.fail, .pill.failed, .pill.open, .pill.st-bad, .tag.bad { background: var(--bad-bg); color: var(--bad); }
.pill.running, .pill.platform, .pill.st-running { background: var(--tint); color: var(--brand); }
.pill.st-idle, .pill.dropped { background: var(--soft); color: var(--fg2); }
.pill.ai { height: 18px; padding: 0 6px; font-size: 11px; background: #e9f1ff; color: #13386c; vertical-align: 1px; }

/* ---------------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--fg2); font-weight: 500; font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
tr:last-child > td { border-bottom: none; }
tr.click { cursor: pointer; } tr.click:hover td { background: #fafafd; }
.card.tbl { padding: 0; }      /* 不能 overflow:hidden —— 行里的「更多」菜单要能探出去 */
.card.tbl > table:first-child tr:first-child > th:first-child { border-top-left-radius: 12px; }
.card.tbl > table:first-child tr:first-child > th:last-child { border-top-right-radius: 12px; }
.card.tbl > table:last-child tr:last-child > td:first-child { border-bottom-left-radius: 12px; }
.card.tbl > table:last-child tr:last-child > td:last-child { border-bottom-right-radius: 12px; }
.card.tbl > table th { padding: 11px 16px; background: #fafafc; }
.card.tbl > table td { padding: 13px 16px; }
.card.tbl > .card-title { padding: 14px 16px 12px; margin: 0; border-bottom: 1px solid var(--line); }
.card.tbl > .empty { padding: 32px 16px; }
.card.tbl > .muted { padding: 10px 16px; border-top: 1px solid var(--soft); }
.t-title { color: var(--ink); font-weight: 600; }
a.t-title:hover { color: var(--brand); }
.cell-sub { color: var(--fg2); font-size: 12px; margin-top: 2px; }
.clip { max-width: min(420px, 30vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.kv th { width: 132px; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--soft); vertical-align: top; }
table.kv td { border-bottom: 1px solid var(--soft); }
table.kv tr:last-child > th { border-bottom: none; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.kpi { background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.kpi b { display: block; font-size: 20px; color: var(--ink); line-height: 1.3; }
.kpi span { font-size: 12px; color: var(--fg2); }
.kpi b span { font-weight: 400; }
.kpis.flat .kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.kpis.flat { margin: 0 0 14px; gap: 14px; }
.blockbox, .warn { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }
.blockbox b { display: block; margin-bottom: 3px; color: inherit; }
.notice { display: flex; align-items: center; gap: 12px; background: var(--bad-bg); color: var(--bad); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; }
.notice b { color: inherit; }
.notice.calm { background: var(--tint); color: var(--brand); }
pre { background: var(--soft); border-radius: 8px; padding: 10px; overflow: auto; max-height: 420px; font: 12px/1.5 var(--mono); margin: 6px 0 0; }
.thumbs { display: flex; gap: 4px; flex-wrap: wrap; } .thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--soft); }
.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg2); }
.f > span { display: flex; gap: 6px; align-items: baseline; }
.f i { font-style: normal; font-size: 11px; opacity: .75; }
.f input, .f select, .f textarea { width: 100%; }
.task-bar { border-left: 3px solid var(--brand); }

/* ---------------------------------------------------------------- 抓取任务：进度 */
.prog { width: 140px; height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; margin-bottom: 4px; }
.prog i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.prog.held i { background: #d9a13b; }
.rank { font-size: 14px; font-weight: 700; color: var(--brand); }
.avatar { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 600; color: #fff; background: hsl(var(--h, 220), 52%, 52%); vertical-align: middle; }

/* ---------------------------------------------------------------- 任务流：表头与图例 */
.flow-left { min-width: 0; }
.flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.flow-head b { color: var(--ink); }
.legend { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 11.5px; color: var(--fg2); }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.lg-done { background: #2fa46a; } .lg-run { background: var(--brand); } .lg-wait { background: #c9cdd8; }

/* ---------------------------------------------------------------- 首页：对话式创建抓取任务 */
.chat { display: flex; flex-direction: column; height: calc(100vh - 148px); min-height: 420px;
        background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--soft); }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.chat-body { flex: 1; overflow: auto; padding: 16px; }
.chat-scroll { display: flex; flex-direction: column; }
.bubble { max-width: 78%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px;
          background: var(--soft); color: var(--body); white-space: pre-wrap; }
.bubble.me { margin-left: auto; background: var(--tint); color: var(--brand); }
.chat-note { margin-top: 6px; font-size: 11.5px; color: var(--fg2); }
.chat-acts { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; }
.chat-quick { padding: 0 16px 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.chat-bar { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--soft); }
.chat-input { flex: 1; }

/* ---------------------------------------------------------------- 抓取配置：任务流 + 节点配置 */
.flow { display: grid; grid-template-columns: 700px minmax(340px, 1fr); gap: 12px; align-items: start; }
.flow-canvas { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.edge-label { font-size: 10.5px; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.flow-labels { pointer-events: none; z-index: 2; }
.fnode { position: absolute; width: 176px; height: 96px; padding: 9px 11px; cursor: pointer;
         background: #fff; border: 1px solid var(--line); border-radius: 10px;
         display: flex; flex-direction: column; gap: 5px; }
.fnode:hover { border-color: var(--accent); }
.fnode.on { border: 2px solid var(--accent); box-shadow: 0 2px 10px rgba(20,20,40,.08); }
.fnode-head { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink); }
.fnode-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.fnode-head b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnode-head .st { font-size: 10px; padding: 0 5px; border-radius: 999px; background: var(--soft); color: var(--fg2);
                  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.fnode-head .st.ok { background: var(--ok-bg); color: var(--ok); }
.fnode-head .st.off { background: var(--bad-bg); color: var(--bad); }
.fnode-sub { font-size: 11px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; }
.flow-insp { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.crawl-steps { margin: 4px 0; padding-left: 20px; color: var(--body); font-size: 12.5px; }
.crawl-steps li { margin-bottom: 5px; }
.crawl-steps li::marker { color: var(--brand); font-weight: 700; }
.insp-head { margin-bottom: 10px; }
.insp-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.weak { color: var(--fg2); font-size: 11px; letter-spacing: .08em; }
.verdict { background: var(--tint); color: var(--brand); border-radius: 8px; padding: 9px 11px;
           font-size: 12.5px; margin-bottom: 12px; }
.verdict b { display: block; margin-bottom: 3px; }
.fld { font-size: 12px; margin-bottom: 8px; }
.fld th, .fld td { padding: 5px 6px; }
.fld input, .fld select { width: 100%; padding: 4px 6px; font-size: 12px; }
.sec { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.run { border-left: 3px solid var(--brand); }
.regions { margin-top: 12px; border-top: 1px solid var(--soft); padding-top: 10px; }
.region { background: var(--soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }

/* ---------------------------------------------------------------- 抓取插件 */
.plug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.plug .card { margin-bottom: 0; }
.steps { margin: 8px 0 0; padding-left: 18px; }
.steps li { margin-bottom: 8px; }
.hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.hero-main { flex: 1; min-width: 0; }
.hero-title { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.hero-desc { color: var(--fg2); font-size: 13px; margin-top: 4px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg3); flex: none; }
.dot.on { background: #2fa46a; box-shadow: 0 0 0 4px var(--ok-bg); }
.dot.off { background: #d9a13b; box-shadow: 0 0 0 4px var(--warn-bg); }
.install { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.install .card { margin: 0; }
details.fold .install { margin-bottom: 0; }
details.fold .install .card { background: #fafafc; }
.install .no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
        background: var(--tint); color: var(--brand); font-weight: 700; font-size: 12.5px; margin-right: 8px; }
.install .step-title { font-weight: 600; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; }
.install p { margin: 0 0 8px; color: var(--fg2); font-size: 13px; }
.code { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 8px; padding: 6px 6px 6px 10px;
        font: 12px/1.5 var(--mono); color: var(--ink); margin-top: 6px; }
.code span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.fold > summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "›"; color: var(--fg2); font-size: 16px; transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary .muted { font-weight: 400; }

@media (max-width: 1380px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow-left { overflow-x: auto; } }
@media (max-width: 1120px) {
  .plug, .install { grid-template-columns: minmax(0, 1fr); }
  .grid, .grid.quota { grid-template-columns: minmax(0, 1fr); }
}

/* 区域标记弹层 */
.modal { position: fixed; inset: 0; background: rgba(20,20,40,.35); display: flex; align-items: center;
         justify-content: center; z-index: 50; }
.modal-box { background: #fff; border-radius: 14px; padding: 18px 20px; width: min(620px, 92vw);
             max-height: 80vh; overflow: auto; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(20,20,40,.18); }
.toast.err { background: var(--bad); }

/* ---- 抓取结果：帖子卡片流（像小红书发现页） */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 14px; }
.note-card { display: block; color: inherit; text-decoration: none; position: relative; }
.note-card .cover { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--soft); }
.note-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.note-card:hover .cover img { transform: scale(1.03); }
.nocover { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fg2); font-size: 12px; }
.note-card .rk { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 0 7px; border-radius: 999px; }
.note-card .vd { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-style: normal; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.note-card .tag-brief { position: absolute; left: 8px; bottom: 8px; background: var(--warn-bg); color: var(--warn); font-size: 11px; padding: 0 7px; border-radius: 999px; }
.nc-title { margin: 8px 4px 6px; font-weight: 600; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 4px; font-size: 12px; color: var(--fg2); }
.nc-author { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-author img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.nc-like { flex: none; }
.nc-qc { margin: 4px 4px 0; }

/* ---- 单篇帖子（像小红书帖子页：左媒体、右内容） */
.note { display: flex; height: min(76vh, 760px); min-height: 480px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.note-media { position: relative; flex: 1.25; min-width: 0; background: #f5f5f7; display: flex; align-items: center; justify-content: center; }
.note-media .slide { display: none; max-width: 100%; max-height: 100%; object-fit: contain; }
.note-media .slide.on { display: block; }
.note-media video { width: 100%; height: 100%; background: #000; }
.note-media .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none; background: rgba(255,255,255,.85); font-size: 20px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.note-media .prev { left: 12px; } .note-media .next { right: 12px; }
.note-media .count { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 1px 9px; border-radius: 999px; }
.note-side { flex: 1; min-width: 320px; max-width: 460px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.note-author { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--soft); }
.note-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--soft); }
.note-author b { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-author a { font-size: 12px; }
.note-body { flex: 1; overflow: auto; padding: 14px 18px; }
.note-body h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.note-desc { white-space: pre-wrap; word-break: break-word; line-height: 1.7; color: var(--ink); }
.topic { color: #13386c; }
.note-tags { margin-top: 8px; }
.note-date { margin: 10px 0 14px; }
.note-cmts { border-top: 1px solid var(--soft); padding-top: 12px; }
.cmt-head { font-size: 13px; color: var(--fg2); margin-bottom: 8px; }
.note-stats { display: flex; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 13px; }
pre.tall { max-height: 560px; }
.flex1 { flex: 1; }
@media (max-width: 900px) { .note { flex-direction: column; height: auto; } .note-media { min-height: 360px; } .note-side { max-width: none; border-left: none; border-top: 1px solid var(--line); } .note-body { max-height: 420px; } }

/* ---- 帖子下方的数据区：默认折叠，点开才看 */
.data-card { padding: 0; overflow: hidden; }
.data-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
details.data { border-top: 1px solid var(--line); }
details.data > summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; list-style: none; color: var(--ink); font-weight: 600; }
details.data > summary::-webkit-details-marker { display: none; }
details.data > summary::before { content: "›"; color: var(--fg2); font-size: 16px; width: 10px; transition: transform .15s; }
details.data[open] > summary::before { transform: rotate(90deg); }
details.data > summary:hover { background: var(--soft); }
details.data > summary .muted { font-weight: 400; }
details.data > summary button { margin-left: auto; font-weight: 400; }
details.data > pre { margin: 0 16px 14px; }

/* ---- 抓取结果：列表模式（表格） */
.rec-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rec-thumb { width: 40px; height: 52px; flex: none; border-radius: 6px; overflow: hidden; background: var(--soft); position: relative; }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-thumb .vd { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
        font-style: normal; font-size: 7px; display: flex; align-items: center; justify-content: center; }
.rec-author { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rec-author img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---- 干预：工单详情弹层 */
.iv-list { margin: 10px 0 0; padding: 0; list-style: none; }
.iv-list li { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--soft); font-size: 13px; }
.iv-list li:last-child { border-bottom: none; }
.iv-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.iv-acts button { height: auto; padding: 9px 12px; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; white-space: normal; }
.iv-acts button span { font-size: 12px; font-weight: 400; color: var(--fg2); }
.iv-acts button.primary span { color: rgba(255,255,255,.8); }
textarea.patch { width: 100%; min-height: 84px; font: 12px/1.5 var(--mono); margin-top: 8px; }

/* ---- 批量操作：勾选 + 批量删除 */
.chk { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
th.c-chk, td.c-chk { width: 36px; padding-right: 0 !important; }
.pick-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--body); cursor: pointer; user-select: none; }
.note-card .pick { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92);
        display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.note-card:hover .pick, .note-card.picked .pick, .feed.picking .pick { opacity: 1; }
.note-card.picked .cover { outline: 2px solid var(--brand); outline-offset: 2px; }
tr.picked > td { background: #f7f7fe; }

/* ---- 翻页条 */
.pager { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.pager button { height: 30px; min-width: 30px; padding: 0 10px; font-size: 13px; }
.pager button.on, .pager button.on:hover { background: var(--tint); border-color: var(--tint); color: var(--brand); font-weight: 600; }
.pager select { height: 30px; font-size: 13px; margin-right: 6px; }
.pager .gap { color: var(--fg3); padding: 0 2px; }

/* ---- 右侧抽屉（帖子预览） */
.drawer-mask { position: fixed; inset: 0; z-index: 40; background: rgba(20,20,40,.35); display: flex; justify-content: flex-end; }
.drawer { width: min(1040px, 94vw); height: 100%; background: #fff; display: flex; flex-direction: column;
          box-shadow: -8px 0 30px rgba(20,20,40,.16); animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-body { flex: 1; min-height: 0; display: flex; }
.lp-list { flex: 1; min-width: 0; overflow: auto; padding: 16px 18px 32px; background: #f5f5f7; }
.lp { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.lp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: -16px; background: #fff; z-index: 1; }
.lp-shot { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.lp-frame { position: relative; overflow: hidden; }
.lp-frame iframe { display: block; border: 0; transform-origin: 0 0; background: #fff; pointer-events: none; }
.lp-none { padding: 28px 16px; line-height: 1.8; }
.drawer .note { flex: 1; height: auto; min-height: 0; margin: 0; border: none; border-radius: 0; }
.drawer .x { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; color: var(--fg2); }
.qc-box { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; }
.qc-box.fail { background: var(--bad-bg); color: var(--bad); }
.qc-box ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- 评论：和小红书一样分楼层（一级评论 + 楼里的回复） */
.cmt { display: flex; gap: 10px; padding: 10px 0; }
.cmt-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); }
/* 文字头像：没有头像图（或图取不到）时用昵称首字垫的色块，大小跟着所在位置走 */
.av-txt { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
          width: 32px; height: 32px; color: #fff; font-size: 13px; font-weight: 600; background: hsl(var(--h, 220), 45%, 62%); }
.nc-author .av-txt, .rec-author .av-txt { width: 18px; height: 18px; font-size: 10px; }
.note-author .av-txt { width: 36px; height: 36px; font-size: 15px; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-name { font-size: 13px; color: var(--fg2); }
.cmt-text { color: var(--ink); white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.cmt-text .at { color: #13386c; }
.cmt-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--fg3); margin-top: 4px; }
.cmt-meta .like { margin-left: auto; color: var(--fg2); }
.cmt-replies { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--soft); }
.cmt-replies .cmt { padding: 8px 0; }
.cmt-replies .cmt-av { width: 24px; height: 24px; font-size: 11px; }
.cmt-more { height: auto; padding: 4px 0; border: none; background: none; color: #13386c; font-size: 13px; font-weight: 500; }
.cmt-more:hover { color: var(--brand); }
.cmt-replies .folded { display: none; }
.cmt-replies.open .folded { display: flex; }
.cmt-replies.open .cmt-more { display: none; }

/* ---- 节点配置：表单 */
.insp-title { display: flex; align-items: center; gap: 8px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form .f > span { font-size: 13px; color: var(--body); align-items: center; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-foot .muted { white-space: nowrap; }
.form-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--soft); }
.stat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-card { cursor: pointer; }

/* ---- 内容类型各自的版式（view-kinds.js）：AI 回答、公众号文章不套帖子那一套 ---- */
.q-cover { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 14px;
  background: linear-gradient(150deg, hsl(var(--h) 62% 93%), hsl(calc(var(--h) + 40) 58% 86%)); color: hsl(var(--h) 45% 24%); }
.q-cover .q-mark { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.7); }
.q-cover .q-text { font-size: 17px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.note-media .q-cover { width: 100%; padding: 12%; } .note-media .q-text { font-size: 26px; }
.rec-thumb .q-cover { padding: 4px; gap: 0; } .rec-thumb .q-mark { display: none; } .rec-thumb .q-text { font-size: 9px; line-height: 1.2; }
.doc { flex: 1; min-width: 0; overflow: auto; padding: 24px max(24px, calc((100% - 720px) / 2)) 40px; background: #fff; }
.doc .qc-box { margin-bottom: 16px; }
.ans-tag { flex: none; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--soft); color: var(--fg2); }
.ans-tag.ai { background: #e9f1ff; color: #13386c; }
.ans-q { display: flex; align-items: flex-start; gap: 10px; }
.ans-q h2 { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink); }
.ans-a { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fafbfc; }
.ans-by { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.md { color: var(--ink); line-height: 1.8; font-size: 15px; }
.md p { margin: 0 0 10px; } .md h4 { margin: 16px 0 8px; font-size: 16px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; } .md li { margin: 4px 0; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.md code { background: var(--soft); padding: 0 4px; border-radius: 4px; }
.md pre { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--soft); font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.md-table { border-collapse: collapse; margin: 0 0 12px; font-size: 14px; display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; }
.md-table th { background: var(--soft); font-weight: 600; }
/* AI 回答正文的两种看法：原样（快照里裁出来的那一块）/ 文字 */
.ans-tabs { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; font-size: 12px; }
.ans-shot, .ans-styled { border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.ans-shot[hidden], .ans-text[hidden] { display: none; }
.ans-styled iframe { pointer-events: auto; }   /* 文本一栏是真的文字：可以选中复制 */
.ans-noshot { margin-top: 10px; font-size: 12px; }
/* 抓取结果顶上的进行状态：在抓 = 转圈 + 流动的进度条；要人处理 = 换成一闪一闪的提醒 */
.live { display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; background: var(--tint); color: var(--brand); }
.live b { color: inherit; } .live .live-msg { flex: 1; min-width: 0; } .live .live-sub { display: block; font-size: 12px; opacity: .8; margin-top: 1px; white-space: pre-wrap; word-break: break-word; }
.live .spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: live-spin .8s linear infinite; }
.live.run::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 35%; border-radius: 3px; background: currentColor; opacity: .55; animation: live-slide 1.6s ease-in-out infinite; }
.live.wait .spin { animation-duration: 2.4s; opacity: .6; }
.live.alert { background: var(--warn-bg); color: var(--warn); animation: live-glow 1.6s ease-in-out infinite; }
.live.bad { background: var(--bad-bg); color: var(--bad); }
.live .bang { flex: none; width: 20px; height: 20px; border-radius: 50%; background: currentColor; display: grid; place-items: center; animation: live-pulse 1.2s ease-in-out infinite; }
.live .bang::before { content: "!"; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; }
.live.bad .bang { animation: none; }
@keyframes live-spin { to { transform: rotate(360deg); } }
@keyframes live-slide { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes live-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; } 50% { transform: scale(1.12); box-shadow: 0 0 0 6px transparent; } }
@keyframes live-glow { 0%, 100% { box-shadow: inset 0 0 0 1px transparent; } 50% { box-shadow: inset 0 0 0 1.5px currentColor; } }
@media (prefers-reduced-motion: reduce) { .live, .live *, .live::after { animation: none !important; } }
.md-img { display: inline-block; margin: 6px 6px 6px 0; vertical-align: top; } .md-img img { max-width: 260px; max-height: 220px; border-radius: 10px; display: block; }
.ans-video { height: 200px; border-radius: 10px; background: #000; }
/* AI 回答引用的网页：两列小卡片 */
.web-src { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.ws { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; min-width: 0; }
.ws:hover { border-color: var(--brand); }
.ws-no { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--soft); color: var(--fg2); font-size: 12px; display: grid; place-items: center; }
.ws-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-title { font-size: 13.5px; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws:hover .ws-title { color: var(--brand); }
.ws-tags { font-size: 12px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-site { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg2); min-width: 0; white-space: nowrap; }
.ws-site i { font-style: normal; opacity: .7; overflow: hidden; text-overflow: ellipsis; }
.ws-site .ws-ico { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; flex: none; }
/* 字卡封面底下的抓取日期 */
.q-cover .q-date { align-self: flex-start; margin-top: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.7); }
.rec-thumb .q-date { display: none; }
/* 抓取 API：渠道按分类分两行 */
.ch-row { margin-bottom: 8px; } .ch-group { flex: none; width: 64px; font-size: 12px; color: var(--fg2); }
.ans-src { margin-top: 22px; }
.src-feed { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
.wx-title { margin: 0 0 14px; font-size: 22px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.wx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: rgba(0,0,0,.4); margin-bottom: 22px; }
.wx-orig { font-size: 12px; padding: 0 5px; border-radius: 3px; background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); }
.wx-acc { display: inline-flex; align-items: center; gap: 6px; color: #576b95; }
.wx-acc img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.wx-body { font-size: 17px; line-height: 1.75; color: rgba(0,0,0,.9); letter-spacing: .034em; text-align: justify; word-break: break-word; }
.wx-body p { margin: 0 0 16px; } .wx-body p.li { padding-left: 1em; text-indent: -1em; } .wx-body p.li::before { content: "· "; }
.wx-body h3 { margin: 26px 0 14px; font-size: 18px; font-weight: 600; }
.wx-body blockquote { margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--line); color: rgba(0,0,0,.55); }
.wx-body figure { margin: 0 0 16px; text-align: center; } .wx-body figure img { max-width: 100%; height: auto; border-radius: 2px; }
.wx-digest { color: rgba(0,0,0,.6); } .wx-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.ans-imgs { display: flex; gap: 8px; overflow-x: auto; margin: 4px 0 14px; padding-bottom: 4px; }
.ans-img { position: relative; flex: none; width: 132px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--soft); }
.ans-img[data-note] { cursor: pointer; }
.ans-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ans-img span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (max-width: 1100px) { .opts { grid-template-columns: 1fr; } }

/* 「抽不出内容」的工单：把当时抓回来的页面给人看 */
.modal-box.wide { width: min(1040px, 94vw); max-height: 92vh; overflow: auto; }
.iv-page { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.iv-page-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; }
.iv-page-tip { padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); } .iv-page-tip b { color: var(--ink); }
.iv-frame { height: 46vh; overflow: auto; background: #fff; } .iv-frame iframe { display: block; border: 0; background: #fff; }
.iv-page > .muted { padding: 16px; }

/* ---------------------------------------------------------------- 登录页 / 账号 */
body.anon > .side, body.anon > main { display: none; }
.login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: min(380px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 28px 22px;
             display: flex; flex-direction: column; gap: 12px; }
.login-box h2 { margin: 6px 0 0; font-size: 18px; color: var(--ink); }
.login-box p { margin: 0 0 4px; }
.login-box > button { margin-top: 4px; }
.login-err { min-height: 20px; color: var(--bad); font-size: 13px; }
.login-alt { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--soft); font-size: 12.5px; color: var(--fg2); }
.login-alt summary { cursor: pointer; }
.login-alt .row { margin-top: 10px; }
.foot-user { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-family: inherit; font-size: 12.5px; color: var(--body); }
.foot-user .clip { max-width: 130px; }
.foot-user i { font-style: normal; color: var(--fg3); }
tr.hl > td { background: var(--tint); }

/* 抓取账号管理 */
.acc-sub { font-size: 12px; margin-top: 2px; }
.acc-why { max-width: 280px; white-space: normal; }
.acc-fill { border-style: dashed; color: var(--fg2); }
.acc-bad { color: var(--bad); font-weight: 600; }
.acc-soon { color: var(--warn); font-weight: 600; }
tr.acc-need > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }