/* /matcher/css/matcher.css — 需求匹配器（2026-10-28）
   沿用 FunnyAI 站点风格：CSS 变量 + 明暗双主题 + 移动端适配。
   2026-10-28：接入站点统一暗黑主题 —— 变量改挂在 body.dark-mode 下，
   与 /common/css/dark_mode.css 同一个开关（localStorage key=funnyai_darkMode），
   不再使用模块自己的 html[data-mt-theme]。 */

html {
    --mt-page-bg: #f4f6f9;
    --mt-body-text: #333;
    --mt-text: #1f2430;
    --mt-text-sub: #6b7280;
    --mt-text-muted: #9ca3af;
    --mt-text-label: #4b5563;
    --mt-surface: #fff;
    --mt-surface-2: #f1f3f9;
    --mt-surface-2-hover: #e7ebf5;
    --mt-border: #e8ecf4;
    --mt-border-input: #e3e7f0;
    --mt-focus: #4f46e5;
    --mt-focus-ring: rgba(79,70,229,.15);
    --mt-shadow: 0 4px 14px rgba(31,41,80,.08);
    --mt-shadow-lg: 0 20px 60px rgba(15,23,42,.18);
    --mt-mask: rgba(15,23,42,.45);

    --mt-primary: #4f46e5;
    --mt-primary-hover: #4338ca;
    --mt-ok-bg: #ecfdf5;      --mt-ok-text: #047857;    --mt-ok-border: #a7f3d0;
    --mt-err-bg: #fef2f2;     --mt-err-text: #b91c1c;   --mt-err-border: #fecaca;
    --mt-warn-bg: #fef3c7;    --mt-warn-text: #b45309;  --mt-warn-border: #fde68a;
    --mt-info-bg: #eff6ff;   --mt-info-text: #1d4ed8;  --mt-info-border: #bfdbfe;
    --mt-purple-bg: #f5f3ff; --mt-purple-text: #6d28d9;--mt-purple-border: #ddd6fe;
}

body.dark-mode {
    color-scheme: dark;
    --mt-page-bg: #0f172a;
    --mt-body-text: #dbe2f0;
    --mt-text: #e7ecf6;
    --mt-text-sub: #9aa7bd;
    --mt-text-muted: #7e8ba3;
    --mt-text-label: #b6c2d9;
    --mt-surface: #182234;
    --mt-surface-2: #1f2c44;
    --mt-surface-2-hover: #263653;
    --mt-border: #2a3850;
    --mt-border-input: #2e3d59;
    --mt-focus: #818cf8;
    --mt-focus-ring: rgba(99,102,241,.28);
    --mt-shadow: 0 4px 14px rgba(0,0,0,.4);
    --mt-shadow-lg: 0 20px 60px rgba(0,0,0,.55);
    --mt-mask: rgba(2,6,16,.66);

    --mt-primary: #6366f1;
    /* hover 态要比常态更深而不是更浅：
       #818cf8（浅靛蓝）配白字只有 2.98:1，hover 时反而更难读。
       #4f46e5 配白字是 5.55:1，浅色模式用的也是这个思路。 */
    --mt-primary-hover: #4f46e5;
    --mt-ok-bg: rgba(16,185,129,.14);   --mt-ok-text: #6ee7b7;    --mt-ok-border: rgba(110,231,183,.35);
    --mt-err-bg: rgba(239,68,68,.14);   --mt-err-text: #fca5a5;    --mt-err-border: rgba(252,165,165,.35);
    --mt-warn-bg: rgba(245,158,11,.16); --mt-warn-text: #fcd34d;   --mt-warn-border: rgba(252,211,77,.3);
    --mt-info-bg: rgba(59,130,246,.15); --mt-info-text: #93c5fd;   --mt-info-border: rgba(147,197,253,.3);
    --mt-purple-bg: rgba(139,92,246,.16);--mt-purple-text: #c4b5fd;--mt-purple-border: rgba(196,181,253,.3);
}

body.dark-mode { background-color: var(--mt-page-bg); color: var(--mt-body-text); }
/* dark_mode.css 只把 .main-column 设成 transparent，页面底色由 body 提供；
   这里补一条让 body 背景跟随匹配器自己的色板（与 --mt-page-bg 一致）。 */
body.dark-mode .main-column { background-color: var(--mt-page-bg); }

.mt { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- 头部 ---------- */
.mt-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mt-header h1 { margin: 0 0 6px; font-size: 25px; color: var(--mt-text); display: flex; align-items: center; gap: 8px; }
.mt-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mt-nav a {
    display: inline-block; padding: 7px 14px; border-radius: 9px; font-size: 14px;
    background: var(--mt-surface); border: 1px solid var(--mt-border); color: var(--mt-text-label);
    text-decoration: none; transition: all .15s;
}
.mt-nav a:hover { background: var(--mt-surface-2); color: var(--mt-text); }
.mt-nav a.mt-nav--active { background: var(--mt-primary); border-color: var(--mt-primary); color: #fff; }

/* ---------- 按钮 ---------- */
.mt-btn {
    border: none; border-radius: 10px; padding: 9px 18px; font-size: 14px; cursor: pointer;
    transition: all .15s; font-family: inherit; background: var(--mt-surface-2);
    color: var(--mt-text-label); border: 1px solid var(--mt-border-input);
}
.mt-btn:hover { background: var(--mt-surface-2-hover); }
.mt-btn--primary { background: var(--mt-primary); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(79,70,229,.28); }
.mt-btn--primary:hover { background: var(--mt-primary-hover); }
.mt-btn--ghost { background: transparent; }
.mt-btn--sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.mt-btn--danger { color: var(--mt-err-text); border-color: var(--mt-err-border); background: var(--mt-err-bg); }
.mt-btn:disabled { opacity: .55; cursor: not-allowed; }
.mt-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 卡片 ---------- */
.mt-card {
    background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 14px;
    padding: 18px; margin-bottom: 16px; box-shadow: var(--mt-shadow);
}
.mt-card h2 { margin: 0 0 12px; font-size: 17px; color: var(--mt-text); }
.mt-card h3 { margin: 0 0 10px; font-size: 15px; color: var(--mt-text); }

/* ---------- 统计 ---------- */
.mt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mt-stat { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 13px; padding: 15px; }
.mt-stat__num { font-size: 26px; font-weight: 700; color: var(--mt-primary); line-height: 1.2; }
.mt-stat__label { font-size: 13px; color: var(--mt-text-sub); margin-top: 4px; }

/* ---------- 提示条 ---------- */
.mt-alert { padding: 11px 15px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.mt-alert--ok   { background: var(--mt-ok-bg);   color: var(--mt-ok-text);   border-color: var(--mt-ok-border); }
.mt-alert--err  { background: var(--mt-err-bg);  color: var(--mt-err-text);  border-color: var(--mt-err-border); }
.mt-alert--warn { background: var(--mt-warn-bg); color: var(--mt-warn-text); border-color: var(--mt-warn-border); }
.mt-alert--info { background: var(--mt-info-bg); color: var(--mt-info-text); border-color: var(--mt-info-border); }

/* ---------- 空状态 ---------- */
.mt-empty { text-align: center; padding: 42px 20px; color: var(--mt-text-sub); }
.mt-empty__icon { font-size: 42px; margin-bottom: 12px; }
.mt-empty__title { font-size: 17px; color: var(--mt-text); margin-bottom: 8px; font-weight: 600; }
.mt-empty__desc { font-size: 14px; max-width: 560px; margin: 0 auto 18px; line-height: 1.7; }

/* ---------- 聊天 ---------- */
.mt-chat { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.mt-chat__side { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 14px; padding: 14px; }
.mt-chat__main { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 14px; padding: 18px; min-height: 480px; display: flex; flex-direction: column; }
.mt-conv-item { display: block; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; color: var(--mt-text-label); cursor: pointer; text-decoration: none; margin-bottom: 4px; }
.mt-conv-item:hover { background: var(--mt-surface-2); }
.mt-conv-item--on { background: var(--mt-primary); color: #fff; }
.mt-conv-item__time { display: block; font-size: 11.5px; opacity: .7; margin-top: 2px; }

.mt-msgs { flex: 1; overflow-y: auto; max-height: 58vh; padding-right: 6px; margin-bottom: 14px; }
.mt-msg { display: flex; gap: 11px; margin-bottom: 18px; }
.mt-msg__avatar { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--mt-surface-2); }
.mt-msg--user .mt-msg__avatar { background: var(--mt-primary); color: #fff; }
.mt-msg__body { flex: 1; min-width: 0; }
.mt-msg__text { white-space: pre-wrap; word-break: break-word; line-height: 1.75; color: var(--mt-text); font-size: 14.5px; }
.mt-msg__meta { font-size: 11.5px; color: var(--mt-text-muted); margin-top: 5px; }

.mt-cands { margin-top: 10px; border: 1px dashed var(--mt-border-input); border-radius: 11px; padding: 11px; background: var(--mt-surface-2); }
.mt-cands__title { font-size: 12.5px; color: var(--mt-text-label); font-weight: 600; margin-bottom: 8px; }
.mt-cand { border: 1px solid var(--mt-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--mt-surface); }
.mt-cand__row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mt-cand__name { font-size: 13.5px; color: var(--mt-text); font-weight: 600; }
.mt-cand__val { font-size: 13.5px; color: var(--mt-primary); }
.mt-cand__ev { font-size: 12.5px; color: var(--mt-text-sub); margin-top: 6px; line-height: 1.6; }
.mt-cand__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

.mt-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; border: 1px solid; white-space: nowrap; }
.mt-tag--pending  { background: var(--mt-warn-bg);  color: var(--mt-warn-text);  border-color: var(--mt-warn-border); }
.mt-tag--confirmed { background: var(--mt-ok-bg);   color: var(--mt-ok-text);    border-color: var(--mt-ok-border); }
.mt-tag--verified { background: var(--mt-info-bg);  color: var(--mt-info-text);  border-color: var(--mt-info-border); }
.mt-tag--disputed { background: var(--mt-err-bg);   color: var(--mt-err-text);   border-color: var(--mt-err-border); }
.mt-tag--rejected { background: var(--mt-surface-2);color: var(--mt-text-muted); border-color: var(--mt-border); }
.mt-tag--conflict { background: var(--mt-purple-bg);color: var(--mt-purple-text);border-color: var(--mt-purple-border); }
.mt-tag--test     { background: var(--mt-warn-bg);  color: var(--mt-warn-text);  border-color: var(--mt-warn-border); }
.mt-tag--plain    { background: var(--mt-surface-2);color: var(--mt-text-label); border-color: var(--mt-border-input); }

.mt-compose { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--mt-border); padding-top: 14px; }
.mt-compose__input {
    flex: 1; border: 1px solid var(--mt-border-input); border-radius: 11px; padding: 11px 13px;
    font-size: 14.5px; font-family: inherit; resize: vertical; min-height: 46px; max-height: 180px;
    background: var(--mt-surface); color: var(--mt-text); outline: none;
}
.mt-compose__input:focus { border-color: var(--mt-focus); box-shadow: 0 0 0 3px var(--mt-focus-ring); }

/* ---------- 表格 / 列表 ---------- */
.mt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mt-table th, .mt-table td { padding: 10px 11px; border-bottom: 1px solid var(--mt-border); text-align: left; vertical-align: top; }
.mt-table th { color: var(--mt-text-sub); font-weight: 600; font-size: 12.5px; background: var(--mt-surface-2); }
.mt-table tbody tr:hover { background: var(--mt-surface-2); }
.mt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mt-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.mt-filters select, .mt-filters input {
    border: 1px solid var(--mt-border-input); border-radius: 9px; padding: 7px 11px; font-size: 13.5px;
    background: var(--mt-surface); color: var(--mt-text); font-family: inherit; outline: none;
}
.mt-filters input:focus, .mt-filters select:focus { border-color: var(--mt-focus); box-shadow: 0 0 0 3px var(--mt-focus-ring); }
.mt-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.mt-chip { padding: 5px 12px; border-radius: 20px; font-size: 13px; background: var(--mt-surface-2); border: 1px solid var(--mt-border-input); color: var(--mt-text-label); cursor: pointer; }
.mt-chip--on { background: var(--mt-primary); color: #fff; border-color: var(--mt-primary); }

/* ---------- 维度管理 ---------- */
.mt-dim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 13px; }
.mt-dim { border: 1px solid var(--mt-border); border-radius: 12px; padding: 14px; background: var(--mt-surface); }
.mt-dim__name { font-size: 15px; font-weight: 600; color: var(--mt-text); margin-bottom: 3px; }
.mt-dim__key { font-size: 12px; color: var(--mt-text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.mt-dim__desc { font-size: 12.5px; color: var(--mt-text-sub); margin-top: 7px; line-height: 1.6; }
.mt-dim__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.mt-dim__foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--mt-border); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-dim__usage { font-size: 12px; color: var(--mt-text-muted); }

/* ---------- 维度分类目录（2026-10-28，参考 funnyai/list_class.php 的 class-tree） ---------- */
/* 左栏固定宽 + 吸顶；右栏自适应 */
.mt-cat-layout { display: flex; gap: 12px; align-items: flex-start; }
.mt-cat {
    width: 250px; flex-shrink: 0;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: 10px 8px;
    max-height: 72vh; overflow-y: auto;
    /* 吸顶：position:sticky 需要祖先链上没有「滚动容器」。
       站点 .app-wrapper 有 overflow-x:hidden，会让 overflow-y 计算成 auto，
       使它变成滚动容器 → sticky 相对它定位而它自身不滚 → 吸顶失效。
       overflow-x:clip 不会创建滚动容器，可以解除这个限制
       （clip 是现代浏览器语法，老浏览器自动回退到 hidden，行为同原来）。 */
    position: sticky; top: 12px;
    align-self: flex-start;
}
.mt-cat-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
    .mt-cat-layout { flex-direction: column; }
    .mt-cat { width: 100%; position: static; max-height: 320px; }
}
/* 只对本模块解除 app-wrapper 的滚动容器限制（不改站点全局样式）
   body.mt-page 由 matcher_theme_bootstrap() 设置 */
body.mt-page .app-wrapper { overflow-x: clip; }

.mt-cat__title { font-size: 12.5px; font-weight: 700; color: var(--mt-text-sub); margin: 0 0 6px; padding: 2px 6px 6px; }
.mt-cat__root {
    display: block; padding: 5px 8px; margin-bottom: 4px;
    border-radius: 6px; text-decoration: none;
    color: var(--mt-text-label); font-size: 13px; font-weight: 600;
}
.mt-cat__root:hover { background: var(--mt-surface-2); color: var(--mt-text); }
.mt-cat__root.active { background: var(--mt-focus-ring); color: var(--mt-focus); }

.mt-cat__toolbar { display: flex; align-items: center; gap: 4px; margin: 6px 0 8px; padding: 0 4px; font-size: 12px; }
.mt-cat__tool {
    background: none; border: 0; cursor: pointer; color: var(--mt-focus);
    font-size: 12px; padding: 2px 6px; border-radius: 4px; transition: background .15s;
    font-family: inherit;
}
.mt-cat__tool:hover { background: var(--mt-focus-ring); }
.mt-cat__tool-sep { color: var(--mt-text-muted); font-size: 12px; }

/* 层级缩进：嵌套 ul + 虚线导引（每层 8px + 8px margin） */
.mt-cat__children {
    list-style: none; padding: 0 0 0 8px; margin: 0 0 0 8px;
    border-left: 1px dashed var(--mt-border);
}
.mt-cat__children > li { list-style: none; margin: 0; padding: 0; }

.mt-cat__row { display: flex; align-items: center; gap: 2px; border-radius: 6px; padding: 1px 2px; }
.mt-cat__row:hover { background: var(--mt-surface-2); }
.mt-cat__toggle {
    width: 18px; height: 20px; flex-shrink: 0;
    border: none; background: transparent; color: var(--mt-text-muted);
    font-size: 11px; cursor: pointer; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 3px; font-family: inherit;
}
.mt-cat__toggle:hover { background: var(--mt-surface-2-hover); color: var(--mt-text); }
.mt-cat__toggle--closed { color: var(--mt-text-muted); }
.mt-cat__toggle--leaf { color: var(--mt-text-muted); cursor: default; font-weight: 700; }
.mt-cat__toggle--leaf:hover { background: transparent; }

.mt-cat__node {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 3px 6px; border-radius: 6px;
    text-decoration: none; color: var(--mt-text-label); font-size: 13px;
}
.mt-cat__node:hover { background: var(--mt-focus-ring); color: var(--mt-focus); }
.mt-cat__node.active { background: var(--mt-focus-ring); color: var(--mt-focus); font-weight: 600; }
.mt-cat__icon { font-size: 12px; opacity: .85; flex-shrink: 0; }
.mt-cat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cat__count {
    flex-shrink: 0; font-size: 11px; color: var(--mt-text-muted);
    background: var(--mt-surface-2); padding: 1px 6px;
    border-radius: 10px; min-width: 20px; text-align: center;
}
.mt-cat__node.active .mt-cat__count { background: var(--mt-focus-ring); color: var(--mt-focus); }

/* 右侧面包屑 + 标题行 */
.mt-cat__breadcrumb { font-size: 13px; color: var(--mt-text-muted); margin: 2px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mt-cat__crumb { color: var(--mt-text-muted); text-decoration: none; }
.mt-cat__crumb:hover { color: var(--mt-focus); text-decoration: underline; }
.mt-cat__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-cat__head h2 { margin: 0; font-size: 17px; color: var(--mt-text); }

/* ---------- 匹配结果 ---------- */
.mt-score-ring { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; font-weight: 700; font-size: 16px; border: 3px solid; }
.mt-score-ring--high { color: var(--mt-ok-text); border-color: var(--mt-ok-border); background: var(--mt-ok-bg); }
.mt-score-ring--mid  { color: var(--mt-warn-text); border-color: var(--mt-warn-border); background: var(--mt-warn-bg); }
.mt-score-ring--low  { color: var(--mt-err-text); border-color: var(--mt-err-border); background: var(--mt-err-bg); }

.mt-detail-row { border: 1px solid var(--mt-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.mt-detail-row__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-detail-row__name { font-size: 13.5px; font-weight: 600; color: var(--mt-text); }
.mt-detail-row__scores { display: flex; gap: 12px; font-size: 12.5px; color: var(--mt-text-sub); flex-wrap: wrap; }
.mt-detail-row__reason { font-size: 12.5px; color: var(--mt-text-sub); margin-top: 6px; line-height: 1.6; }
.mt-detail-row--missing { opacity: .72; border-style: dashed; }

.mt-explain { white-space: pre-wrap; font-size: 13.5px; line-height: 1.85; color: var(--mt-text); background: var(--mt-surface-2); padding: 13px; border-radius: 10px; }

/* ---------- 弹窗 ---------- */
.mt-modal-mask { position: fixed; inset: 0; background: var(--mt-mask); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.mt-modal-mask.mt-modal-mask--on { display: flex; }
.mt-modal { background: var(--mt-surface); border-radius: 15px; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; box-shadow: var(--mt-shadow-lg); border: 1px solid var(--mt-border); }
.mt-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--mt-border); position: sticky; top: 0; background: var(--mt-surface); z-index: 1; }
.mt-modal__header h2 { margin: 0; font-size: 16.5px; color: var(--mt-text); }
.mt-modal__close { border: none; background: transparent; font-size: 19px; cursor: pointer; color: var(--mt-text-muted); padding: 4px 8px; border-radius: 7px; }
.mt-modal__close:hover { background: var(--mt-surface-2); }
.mt-modal__form { padding: 18px 20px; overflow-x: hidden; }
/* 表单控件统一 box-sizing，避免 padding 撑破容器造成横向滚动条 */
.mt-modal__form input, .mt-modal__form select, .mt-modal__form textarea { box-sizing: border-box; max-width: 100%; }
.mt-modal__foot { padding: 14px 20px; border-top: 1px solid var(--mt-border); display: flex; justify-content: flex-end; gap: 9px; }

.mt-field { margin-bottom: 13px; }
.mt-field label { display: block; font-size: 13px; color: var(--mt-text-label); margin-bottom: 5px; font-weight: 500; }
.mt-field label em { color: var(--mt-err-text); font-style: normal; }
.mt-field input, .mt-field select, .mt-field textarea {
    width: 100%; box-sizing: border-box; max-width: 100%;
    border: 1px solid var(--mt-border-input); border-radius: 9px; padding: 9px 12px;
    font-size: 13.5px; font-family: inherit; background: var(--mt-surface); color: var(--mt-text); outline: none;
}
.mt-field input:focus, .mt-field select:focus, .mt-field textarea:focus { border-color: var(--mt-focus); box-shadow: 0 0 0 3px var(--mt-focus-ring); }
.mt-field textarea { resize: vertical; min-height: 74px; }
.mt-field__hint { font-size: 12px; color: var(--mt-text-muted); margin-top: 4px; line-height: 1.55; }
.mt-field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mt-text-label); cursor: pointer; }

/* ---------- 加载态 ---------- */
.mt-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mt-text-sub); }
.mt-spinner { width: 15px; height: 15px; border: 2px solid var(--mt-border-input); border-top-color: var(--mt-primary); border-radius: 50%; animation: mt-spin .8s linear infinite; }
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* ---------- 匹配对象录入 ---------- */
.mt-target { border: 1px solid var(--mt-border); border-radius: 11px; padding: 13px; margin-bottom: 11px; background: var(--mt-surface); }
.mt-target__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.mt-target__name { font-size: 14.5px; font-weight: 600; color: var(--mt-text); }
.mt-target__dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .mt { padding: 14px 11px 50px; }
    .mt-header h1 { font-size: 21px; }
    .mt-chat { grid-template-columns: 1fr; }
    .mt-chat__side { max-height: 190px; overflow-y: auto; }
    .mt-msgs { max-height: 52vh; }
    .mt-field--half { grid-template-columns: 1fr; }
    .mt-nav a { padding: 6px 11px; font-size: 13px; }
    .mt-target__dims { grid-template-columns: 1fr; }
    .mt-stat__num { font-size: 22px; }
    .mt-modal { max-height: 92vh; }
}

/* ---------- 暗黑模式补漏（站点通用层未覆盖到的部分） ---------- */
/* 1) 视口最右侧滚动条：由 <html> 渲染，body.dark-mode ::-webkit-scrollbar 管不到，
      会在暗色页面右侧留一条浅色白边。
      ① html[data-mt-color-scheme] 由 matcher.js 的 MT.syncRootColorScheme 跟随 body 类同步
      ② 下面的 scrollbar-color / ::-webkit-scrollbar 是 CSS 兜底 */
html[data-mt-color-scheme="dark"] {
    color-scheme: dark;
    scrollbar-color: #263653 #0f172a;
}
html[data-mt-color-scheme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-mt-color-scheme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-mt-color-scheme="dark"] ::-webkit-scrollbar-thumb { background: #263653; border-radius: 5px; }
html[data-mt-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d4f6d; }
/* 浅色态显式声明，避免从 dark 切回来时残留 color-scheme: dark */
html[data-mt-color-scheme="light"] { color-scheme: light; }

body.dark-mode,
body.dark-mode .app-wrapper,
body.dark-mode .main-column,
body.dark-mode .mt {
    scrollbar-color: var(--mt-surface-2-hover) var(--mt-page-bg);
}
body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark-mode ::-webkit-scrollbar-track { background: var(--mt-page-bg); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--mt-surface-2-hover); border-radius: 5px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3d4f6d; }

/* 2) 移动端顶栏：common_layout.css 写死白底 + 白按钮，暗色下是刺眼白条 */
body.dark-mode .mobile-header {
    background: var(--mt-surface);
    border-bottom-color: var(--mt-border);
    color: var(--mt-text);
}
body.dark-mode .btn-toggle-sidebar {
    background: var(--mt-surface-2);
    border-color: var(--mt-border-input);
    color: var(--mt-text-label);
}

/* 3) 表格横向滚动条（.mt-table-wrap overflow-x:auto）*/
body.dark-mode .mt-table-wrap { scrollbar-color: var(--mt-surface-2-hover) var(--mt-surface); }
body.dark-mode .mt-table-wrap::-webkit-scrollbar-track { background: var(--mt-surface); }
body.dark-mode .mt-table-wrap::-webkit-scrollbar-thumb { background: var(--mt-surface-2-hover); border-radius: 5px; }

/* 4) 输入框占位符：默认灰色在深色底上偏暗、几乎看不清 */
body.dark-mode .mt-filters input::placeholder,
body.dark-mode .mt-field input::placeholder,
body.dark-mode .mt-field textarea::placeholder,
body.dark-mode .mt-compose__input::placeholder {
    color: var(--mt-text-muted);
    opacity: 1;
}

/* 5) 站点通用表格样式（table.css）会把 th/td 写死成浅色，这里覆盖回匹配器色板 */
body.dark-mode .mt-table th {
    background: var(--mt-surface-2);
    color: var(--mt-text-sub);
    border-bottom-color: var(--mt-border);
}
body.dark-mode .mt-table td {
    background: transparent;
    color: var(--mt-text);
    border-bottom-color: var(--mt-border);
}
body.dark-mode .mt-table tbody tr:hover td { background: var(--mt-surface-2); }

/* 6) 选中态（文本框/下拉框在暗色下要跟随，否则弹出的是白色系统面板） */
body.dark-mode .mt-filters select,
body.dark-mode .mt-field select,
body.dark-mode .mt-filters input,
body.dark-mode .mt-field input,
body.dark-mode .mt-field textarea {
    color-scheme: dark;
}

/* 7) 站点通用 a 标签在暗色下会被 dark_mode.css 染成蓝色，
      匹配器内部链接（导航/按钮）要回到自己的色板 */
body.dark-mode .mt a { color: var(--mt-text-label); }
body.dark-mode .mt a:hover { color: var(--mt-text); }
body.dark-mode .mt-nav a.mt-nav--active { color: #fff; }

/* 7.1) 上一条规则的副作用：`.mt a` 特异性 (0,2,1) 高于 `.mt-btn--primary` (0,1,0)，
       把主按钮的文字也改成了 --mt-text-label —— 白字变浅灰字，
       对比度从 4.6:1 掉到 1.73:1（不可读）。
       这里把主按钮 / 危险按钮 / 激活态导航的文字颜色显式拉回来。 */
body.dark-mode .mt a.mt-btn--primary,
body.dark-mode .mt a.mt-btn--primary:hover { color: #fff; }
body.dark-mode .mt a.mt-btn--danger { color: var(--mt-err-text); }
body.dark-mode .mt a.mt-btn--danger:hover { color: var(--mt-err-text); }

/* 8) 主题切换按钮同时带 .mt-btn（匹配器样式）和 .dm-toggle（站点样式）。
      dark_mode.css 的 `body.dark-mode .dm-toggle` 特异性更高（0,2,0 > 0,1,0），
      会把按钮改成站点的方角实心样式 —— 这里显式拉回匹配器的按钮外观。 */
.mt-btn.dm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--mt-border-input);
    background: var(--mt-surface-2);
    color: var(--mt-text-label);
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    backdrop-filter: none;
    position: static;
}
.mt-btn.dm-toggle:hover {
    background: var(--mt-surface-2-hover);
    border-color: var(--mt-border-input);
    color: var(--mt-text);
    transform: none;
}
.mt-btn.dm-toggle .dm-toggle__icon { font-size: 15px; line-height: 1; }
body.dark-mode .mt-btn.dm-toggle {
    background: var(--mt-surface-2);
    border-color: var(--mt-border-input);
    color: var(--mt-text-label);
}
body.dark-mode .mt-btn.dm-toggle:hover {
    background: var(--mt-surface-2-hover);
    color: var(--mt-text);
}