/* Extracted mechanically from use.html; keep rule order to preserve computed-style cascade. */

        /* 2026-10-10（反馈）：未注册版提示从顶部整条横幅改到**屏幕底部右侧**——
           目的：不抢视线（不进主视线区、不占整行、无底色），但一眼扫到底部就能注意到。
           做法：① 用 flex order 把它排到 #app 最底部（DOM 不动，登录页也一起生效）；
                ② 靠右、11px、灰字；平时半透明，鼠标移上去/键盘聚焦时恢复不透明（可点可选中的电话）；
                ③ 移动端只留电话（标签隐藏），行高更紧，避免占掉内容高度。 */
        .hd-unreg-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;   /* 文字贴行右端 */
            gap: 8px;
            flex-wrap: wrap;
            padding: 3px 12px 4px;
            background: transparent;
            border: none;
            color: var(--ui-text2,var(--text2));
            font-size: 11px;
            line-height: 1.4;
            text-align: right;
            position: relative;
            z-index: 60;
            opacity: 1;
            transition: opacity .15s ease;
            user-select: text;
        }

        .hd-unreg-bar:hover, .hd-unreg-bar:focus-within { opacity: 1; }

        .hd-unreg-bar .hd-unreg-tag {
            display: inline-block;
            padding: 0 6px;
            border-radius: 999px;
            background: transparent;
            border: 1px solid currentColor;
            color: inherit;
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
        }

        .hd-unreg-bar .hd-unreg-text {
            font-weight: 400;
            letter-spacing: .2px;
            white-space: nowrap;
        }

        @media (max-width: 640px) {
            .hd-unreg-bar {
                font-size: 10px;
                padding: 2px 8px 3px;
                gap: 4px;
                opacity: 1;
            }

            .hd-unreg-bar .hd-unreg-tag {
                display: none;   /* 手机上只留厂商名 + 电话，省一行 */
            }
        }

        /* 2026-10-02：横幅占位后主区高度自适应。
           起因：`body{height:100vh;overflow:hidden}` + `.app{height:100vh}` 都是**写死**的，
           横幅再占 33px 就把底部（侧边栏的「更多 / 退出」）顶出视口，而且 body 不滚动 ⇒ 直接看不见。
           做法：#app 做 100vh 的纵向 flex，横幅吃自然高度，主区/登录区吃剩余高度。 */
        #app {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 未注册提示排到 #app 最底部（order 比登录区/主区都大）；主区吃掉剩余高度，
           横幅只占它自然高度（约 20px），不会再顶出侧边栏的「更多 / 退出」。 */
        #app > .hd-unreg-bar {
            flex: 0 0 auto;
            order: 99;
        }

        #app > .app {
            height: auto;
            flex: 1 1 auto;
            min-height: 0; /* 让内部的侧边栏/主区自己滚，而不是把整页撑高 */
        }

        #app > .login-wrap {
            min-height: 0;
            flex: 1 1 auto;
        }
        /* Vue 挂载前隐藏原始模板，避免加载中闪现提示/异常卡片；显示中性加载占位 */
        [v-cloak] { display: none; }
        .boot-loading {
            position: fixed; inset: 0; z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            background: #f1f5f9; color: #64748b; font-size: 14px;
            font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        }
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            --bg: #f1f5f9;
            --card: #ffffff;
            --text: #0f172a;
            --text2: #64748b;
            --border: #e2e8f0;
            --radius: 14px;
            --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            overflow: hidden;
            font-size: 14px;
        }
        button { font-family: inherit; cursor: pointer; }
        input, textarea, select { font-family: inherit; }
        [role="button"][tabindex="0"]:focus-visible,
        [role="row"][tabindex="0"]:focus-visible,
        [role="tab"][tabindex="0"]:focus-visible,
        [role="group"][tabindex="0"]:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        /* ===== 登录 ===== */
        .login-wrap {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
            padding: 16px;
        }
        .login-card {
            width: 100%;
            max-width: 480px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 22px;
            padding: 34px 32px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
        }
        .login-card h1 {
            font-size: 26px;
            background: linear-gradient(90deg, #6366f1, #a855f7);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-align: center;
        }
        .login-card .sub { text-align: center; color: var(--text2); font-size: 13px; margin: 6px 0 22px; }
        .login-error {
            display: flex;
            align-items: center;
            gap: 6px;
            background:var(--ui-danger-soft,#fef2f2);
            border: 1px solid #fecaca;
            color:var(--ui-danger-readable,var(--danger));
            font-size: 13px;
            border-radius: 10px;
            padding: 8px 12px;
            margin-bottom: 12px;
        }
        .field { margin-bottom: 13px; }
        .field label { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
        .field input, .field select {
            width: 100%;
            padding: 10px 14px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            font-size: 14px;
            outline: none;
            transition: border .2s;
            background: var(--ui-field, var(--card));
        }
        .field input:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
        .advanced-toggle {
            text-align: center;
            color: var(--ui-primary-readable, var(--primary));
            font-size: 13px;
            cursor: pointer;
            padding: 8px 0;
        }
        .advanced-panel { display: none; }
        .advanced-panel.show { display: block; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 1px solid var(--border);
            background: var(--ui-field, var(--card));
            color: var(--text);
            border-radius: 10px;
            padding: 7px 14px;
            font-size: 13px;
            transition: all .18s;
            white-space: nowrap;
        }
        .btn:hover { border-color: var(--primary); color: var(--ui-primary-readable, var(--primary)); }
        .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--ui-primary-text, #fff); }
        .btn.primary:hover { background: var(--primary-dark); }
        .btn.success { background: var(--secondary); border-color: var(--secondary); color: var(--ui-success-text, #fff); }
        .btn.success:hover { filter: brightness(1.08); }
        .btn.danger { color:var(--ui-danger-readable,var(--danger)); }
        .btn.danger:hover { border-color: var(--danger); }
        .btn:disabled {
            opacity: 1; cursor: not-allowed;
            background: var(--ui-surface-alt, var(--bg));
            color: var(--ui-text2, var(--text2));
            border-color: var(--ui-border, var(--border));
        }
        .btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }

        /* ===== 主布局 ===== */
        .app {
            display: flex;
            height: 100vh;
            padding: 10px;
            gap: 10px;
            transition: width .18s ease;
        }
        .app.ai-dock-open {
            width: calc(100% - 420px);
            flex: 0 0 auto;
            box-sizing: border-box;
        }
        .sidebar {
            width: 300px;
            flex-shrink: 0;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 210px;
            container-type: inline-size;
            container-name: app-sidebar;
        }
        .splitter {
            width: 6px;
            flex-shrink: 0;
            cursor: col-resize;
            border-radius: 3px;
            transition: background .2s;
        }
        .splitter:hover, .splitter.dragging { background: rgba(99, 102, 241, 0.25); }
        .main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 侧栏 */
        .side-head {
            height: 64px;
            flex-shrink: 0;
            overflow: hidden;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            position: relative;
        }
        .side-head .t { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
        .side-head .t,
        .side-app {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .side-head > div:first-child {
            min-width: 0;
            flex: 1;
        }
        .side-app { font-size: 12px; color: var(--text2); }
        .mode-switch {
            display: flex;
            background: var(--bg);
            border-radius: 10px;
            padding: 3px;
            gap: 2px;
            flex: 0 1 auto;
            flex-direction: row;
            align-items: stretch;
            flex-wrap: nowrap;
        }
        .side-head > .mode-switch > a,
        .side-head > .mode-switch > button {
            display: inline-flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            width: auto;
            min-width: 0;
            border: 0;
            background: transparent;
            padding: 4px 6px;
            border-radius: 8px;
            font-size: 12px;
            line-height: 1.25;
            color: var(--text2);
            white-space: nowrap;
            text-align: center;
            text-decoration: none;
        }
        .mode-switch .mode-icon,
        .mode-switch .mode-label {
            display: block;
            line-height: 1.2;
            white-space: nowrap;
        }
        .mode-switch .mode-icon { font-size: 14px; }
        .side-head > .mode-switch > .on {
            background: var(--ui-field, var(--card));
            color: var(--ui-primary-readable, var(--primary));
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }
        @container app-sidebar (min-width: 430px) {
            .side-head > .mode-switch > a,
            .side-head > .mode-switch > button {
                flex: 0 0 auto;
                flex-direction: row;
                gap: 5px;
                width: auto;
                padding: 5px 9px;
            }
        }
        .search-box { padding: 10px 12px 4px; flex-shrink: 0; }
        .sidebar > .design-node-tree-shell {
            display: flex;
            flex: 1 1 auto;
            min-height: 0;
            flex-direction: column;
        }
        .search-box input {
            width: 100%;
            padding: 8px 12px;
            border: 1.5px solid var(--border);
            border-radius: 10px;
            outline: none;
            font-size: 13px;
        }
        .search-box input:focus { border-color: var(--primary); }
        .node-tree { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 6px 8px 12px; }
        .tree-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            user-select: none;
        }
        .tree-item:hover { background: #f1f5f9; }
        .tree-item.selected {
            background: #eef2ff;
            color: var(--ui-primary-readable, var(--primary));
            font-weight: 600;
            box-shadow: inset 3px 0 0 var(--primary);
        }
.grid-cell-dirty { background: #fef3c7 !important; border-color: #f59e0b !important; }
.grid-row-new > td { background: #f0fdf4; }
.grid-row-error > td { background:var(--ui-danger-soft,#fef2f2) !important; }
.grid-cell-text { padding: 2px 4px; min-height: 20px; min-width: 60px; }
.tree-item .arrow { width: 14px; font-size: 10px; color: var(--text2); }
        .tree-item .leaf { width: 16px; text-align: center; flex: none; font-size: 14px; }
        .tree-item .badge { margin-left: auto; font-size: 10px; color: var(--text2); background: var(--bg); border-radius: 10px; padding: 0 7px; }
        .side-foot {
            padding: 10px 12px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            flex-shrink: 0;
            position: relative;
        }
        .side-foot .btn.sm { padding: 4px 8px; }
        .sidebar.narrow .side-foot {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px 6px;
        }
        .sidebar.narrow .side-foot > *:not(.more-menu) { width: 100%; min-width: 0; }
        .sidebar.narrow .side-foot .btn { width: 100%; }

        /* 聊天区 */
        .chat-card {
            flex: 1;
            min-height: 0;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* 卡片最大化：覆盖整个视口，开发/使用时获得更大显示面积 */
        .chat-card.maximized {
            position: fixed;
            inset: 0;
            z-index: 99;
            border-radius: 0;
            margin: 0;
        }
        .chat-head {
            padding: 12px 18px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .chat-head h2 { font-size: 16px; }
        .chat-head .spacer { flex: 1; }
        .chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; position: relative; }
        .capture-wrap { position: relative; z-index: 102; flex: none; }
        .capture-wrap > .btn { white-space: nowrap; }
        .capture-pop-mask { position: fixed; inset: 0; z-index: 100; background: transparent; }
        .capture-menu {
            position: absolute;
            right: 0;
            top: calc(100% + 6px);
            z-index: 101;
            min-width: 176px;
            padding: 5px;
            background: var(--card, #fff);
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 10px;
            box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
        }
        .capture-menu button {
            display: block;
            width: 100%;
            padding: 7px 9px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--text, #0f172a);
            text-align: left;
            font-size: 12px;
            cursor: pointer;
        }
        .capture-menu button:hover { background: #eef2ff; }
        html.hd-capture-mode .hd-unreg-bar,
        html.hd-capture-mode [data-capture-ignore="true"],
        html.hd-capture-mode .ai-fab,
        html.hd-capture-mode .hd-pwa-install { visibility: hidden !important; }
        html.hd-capture-mode[data-capture-fallback="1"] [data-capture-sensitive],
        html.hd-capture-mode[data-capture-target="content"] .sidebar,
        html.hd-capture-mode[data-capture-target="content"] .splitter,
        html.hd-capture-mode[data-capture-target="modal"] .sidebar,
        html.hd-capture-mode[data-capture-target="modal"] .splitter,
        html.hd-capture-mode[data-capture-target="modal"] .chat-card { display: none !important; }
        html.hd-capture-mode body { background: #fff !important; }
        html.hd-capture-mode .app { padding: 0 !important; }
        html.hd-capture-mode .hd-capture-watermark {
            position: fixed; right: 24px; bottom: 24px; z-index: 2147483646;
            max-width: 70vw; padding: 8px 14px; border-radius: 8px;
            color: rgba(15, 23, 42, .55); background: rgba(255, 255, 255, .72);
            font: 600 18px/1.35 system-ui, sans-serif; letter-spacing: .04em;
            pointer-events: none; backdrop-filter: blur(2px);
        }
        .area-loading-mask {
            position: absolute;
            inset: 0;
            z-index: 50;
            background: rgba(248, 250, 252, 0.82);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: wait;
        }
        .chat-input-bar {
            padding: 12px 14px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        .chat-input-bar textarea {
            flex: 1;
            resize: none;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 14px;
            outline: none;
            max-height: 120px;
            min-height: 40px;
            line-height: 1.5;
        }
        .chat-input-bar textarea:focus { border-color: var(--primary); }
        .send-btn {
            border: none;
            background: var(--primary);
            color: var(--ui-primary-text, #fff);
            border-radius: 12px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
        }
        .send-btn:disabled { opacity: .5; cursor: not-allowed; }

        /* 消息 */
        .msg { margin-bottom: 14px; display: flex; gap: 10px; }
        .msg .avatar {
            width: 34px; height: 34px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 17px;
            flex-shrink: 0;
            background: #eef2ff;
        }
        .msg.user .avatar { background: #d1fae5; }
        .msg.system .avatar { background: #fef3c7; }
        .msg .bubble {
            background: var(--ui-field, var(--card));
            border: 1px solid var(--border);
            border-radius: 4px 14px 14px 14px;
            padding: 10px 14px;
            max-width: 78%;
            line-height: 1.65;
            overflow-wrap: anywhere;
        }
        .msg.user .bubble { background: #eef2ff; border-color: #e0e7ff; border-radius: 14px 4px 14px 14px; }
        .msg.system .bubble { background:var(--ui-warning-soft,#fffbeb); border-color: #fde68a; }
        .msg .bubble pre {
            background: #0f172a;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 10px;
            overflow-x: auto;
            font-size: 12px;
            margin: 8px 0;
        }
        .msg .bubble code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
        .msg .bubble pre code { background: none; padding: 0; }
        .msg .bubble table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
        .msg .bubble th, .msg .bubble td { border: 1px solid var(--border); padding: 4px 8px; }
        .typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
        .typing-dots span {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--text2);
            animation: blink 1.2s infinite;
        }
        .typing-dots span:nth-child(2) { animation-delay: .2s; }
        .typing-dots span:nth-child(3) { animation-delay: .4s; }
        @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

        /* 步骤条 */
        .steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
        .step-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 20px;
            background: #f1f5f9;
            color: var(--text2);
        }
        .step-chip.active { background: var(--ui-primary-soft, var(--bg)); color: var(--ui-primary-readable, var(--primary)); font-weight: 600; }
        .step-chip.done { background: #d1fae5; color: #047857; }

        /* 方案卡片 */
        .plan-card {
            border: 1px solid #c7d2fe;
            border-radius: 14px;
            padding: 14px 16px;
            margin: 8px 0;
            background: #fbfbff;
        }
        .plan-card .pc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
        .plan-card .pc-head b { font-size: 15px; }
        .risk-badge {
            font-size: 11px;
            padding: 1px 8px;
            border-radius: 12px;
            font-weight: 600;
        }
        .risk-low { background: #d1fae5; color: #047857; }
        .risk-medium { background: #fef3c7; color: #b45309; }
        .risk-high { background: #fee2e2; color:var(--ui-danger-readable,var(--danger)); }
        .plan-card .pc-list { font-size: 13px; color: #334155; line-height: 1.7; }
        .plan-card .pc-list .item { display: flex; gap: 6px; }
        .plan-card .pc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
        .plan-card.executed { border-color: #a7f3d0; background: #f0fdf4; }
        .plan-card.failed { border-color: #fecaca; background:var(--ui-danger-soft,#fef2f2); }

        /* 澄清卡片 */
        .clarify-card {
            border: 1px solid #fde68a;
            background:var(--ui-warning-soft,#fffbeb);
            border-radius: 14px;
            padding: 12px 16px;
            margin: 8px 0;
        }
        .clarify-card .q { font-size: 13px; margin: 4px 0; color:var(--ui-warning-readable,var(--warning)); }

        /* 节点详情（内嵌卡片） */
        .node-card {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--ui-field, var(--card));
            margin: 10px 0;
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        .node-card .nc-head {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border);
        }
        .node-card .nc-head .id { font-size: 11px; color: var(--text2); background: var(--bg); padding: 2px 8px; border-radius: 10px; }
        .node-card .nc-head .spacer { flex: 1; }
        /* 节点详情卡片最大化：覆盖整个视口，开发时获得更大编辑面积 */
        .node-card.maximized {
            position: fixed;
            inset: 0;
            z-index: 98;
            margin: 0;
            border-radius: 0;
            overflow-y: auto;
        }
        .node-card.maximized .nc-head { position: sticky; top: 0; z-index: 2; background: var(--ui-field, var(--card)); }
        .node-card.maximized .tabs { position: sticky; top: 45px; z-index: 1; background: var(--ui-field, var(--card)); padding-bottom: 6px; }
        .tabs { display: flex; gap: 4px; padding: 8px 12px 0; flex-wrap: wrap; }
        .tab {
            border: none;
            background: transparent;
            padding: 6px 12px;
            border-radius: 8px 8px 0 0;
            font-size: 13px;
            color: var(--text2);
            border-bottom: 2px solid transparent;
        }
        .tab.active { color: var(--ui-primary-readable, var(--primary)); border-bottom-color: var(--primary); font-weight: 600; }
        .nc-body { padding: 12px 16px; max-height: 46vh; overflow-y: auto; }
        .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
        .form-grid .fg label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 2px; }
        .form-grid .fg input, .form-grid .fg select {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            background: var(--bg);
        }
        /* 2026-10-20（Web 专属）：分步表单 / 吸底操作栏 / 布局漂移 / 校验汇总 */
        .form-wizard-bar {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 8px 10px; margin: 4px 0 10px; border: 1px solid #dbeafe;
            background: linear-gradient(135deg, #eff6ff, #f8fbff); border-radius: 10px;
        }
        .form-wizard-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .form-wizard-dot {
            min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #bfdbfe; background: var(--ui-field, var(--card)); color: #2563eb;
            font-size: 12px; cursor: pointer;
        }
        .form-wizard-dot.on { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
        .form-wizard-title { font-size: 13px; color: #1e3a8a; font-weight: 600; min-width: 120px; }
        .form-action-bar {
            position: sticky; bottom: 0; z-index: 30;
            background: var(--card); backdrop-filter: blur(8px);
            box-shadow: 0 -6px 18px rgba(15,23,42,.08);
        }
        .form-dirty-dot { color: #b45309; font-size: 12px; margin-left: 6px; white-space: nowrap; }
        .layout-drift {
            font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 8px;
            margin: 4px 0 10px; border: 1px solid #fde68a; background:var(--ui-warning-soft,#fffbeb); color:var(--ui-warning-readable,var(--warning));
        }
        .layout-drift.info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
        .form-validation-summary {
            border: 1px solid #fecaca; background:var(--ui-danger-soft,#fef2f2); color: #991b1b;
            border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; font-size: 13px;
        }
        .form-validation-summary .item {
            padding: 3px 0; cursor: pointer; border-bottom: 1px dashed #fecaca;
        }
        .form-validation-summary .item:last-child { border-bottom: none; }
        .form-validation-summary .item:hover { color:var(--ui-danger-readable,var(--danger)); text-decoration: underline; }
        /* 辅助录入（放大镜 + 选择弹层） */
        .help-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
        .help-wrap input { flex: 1; min-width: 0; }
        .flow-field-shell { display: flex; align-items: center; gap: 4px; width: 100%; }
        .flow-field-main { flex: 1; min-width: 0; }
        .flow-field-shell.flow-help-field input,
        .flow-field-shell.flow-help-field select,
        .flow-field-shell.flow-help-field textarea {
            background-color: var(--ui-help-field, #eff6ff) !important;
            color: var(--ui-help-field-text, #172033) !important;
            border-color: var(--ui-help-field-border, #93c5fd) !important;
            caret-color: var(--ui-help-field-text, #172033);
        }
        .flow-field-shell.flow-help-field input::placeholder,
        .flow-field-shell.flow-help-field textarea::placeholder {
            color: var(--ui-text2, var(--text2));
            opacity: .9;
        }
        .flow-help-action {
            width: 28px;
            height: 28px;
            min-width: 28px;
            padding: 0;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1;
        }
        .help-scan-modal {
            width: min(560px, 94vw) !important;
        }
        .help-scan-modal #scanVideo {
            max-height: 62vh !important;
            object-fit: cover;
        }
        .help-btn {
            border: 1px solid var(--border);
            background: var(--ui-field, var(--card));
            color: var(--ui-text, var(--text));
            border-radius: 8px;
            padding: 3px 7px;
            cursor: pointer;
            font-size: 13px;
            line-height: 1.3;
            flex: none;
        }
        .help-btn:hover {
            border-color: var(--primary);
            background: var(--ui-primary-soft, var(--bg));
            color: var(--ui-primary-readable, var(--primary));
        }
        .value-trace-link {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 24px; min-height: 24px; margin-left: 3px;
            border: 1px solid var(--ui-primary, var(--primary));
            background: var(--ui-primary-soft, var(--bg));
            color: var(--ui-primary-readable, var(--primary));
            cursor: pointer; padding: 0 4px; border-radius: 5px;
            font: 600 11px/18px inherit;
        }
        .value-trace-link:hover, .value-trace-link:focus-visible {
            background: var(--ui-primary-soft, var(--bg));
            color: var(--ui-primary-readable, var(--primary));
            outline: 2px solid var(--ui-primary, var(--primary));
            outline-offset: 1px;
        }
        .trace-switch { display:inline-flex; align-items:center; justify-content:center;
            min-width:30px; padding-left:6px; padding-right:6px; white-space:nowrap;
            font-size:12px; color:var(--text2); }
        .trace-kpi {
            padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
            background: var(--ui-surface-alt, var(--bg)); color: var(--ui-text, var(--text));
            display: flex; flex-direction: column; gap: 3px;
        }
        .trace-kpi span { font-size: 11px; color: var(--ui-text2, var(--text2)); }
        .trace-kpi b { font-size: 13px; word-break: break-word; }
        .help-pop {
            position: absolute;
            left: 0;
            top: calc(100% + 3px);
            z-index: 60;
            min-width: 280px;
            max-width: 560px;
            max-height: 240px;
            overflow: auto;
            background: var(--ui-field, var(--card));
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
            font-size: 12px;
        }
        .help-pop table { width: 100%; border-collapse: collapse; }
        .help-pop th, .help-pop td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
        .help-pop th { background:var(--ui-surface-alt,var(--bg)); position: sticky; top: 0; z-index: 1; }
        .help-pop tr.cur { background: #eef2ff; }
        .help-pop tbody tr:hover { background: #f5f7ff; cursor: pointer; }
        .help-pop .hp-empty { padding: 10px; color: var(--text2); text-align: center; }
        .help-pop .hp-empty.err { color:var(--ui-danger-readable,var(--danger)); }
        /* 字段历史值联想 */
        .field-hist-pop {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 2px);
            z-index: 300;
            background: var(--ui-field, var(--card));
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
            max-height: 160px;
            overflow: auto;
            font-size: 12px;
        }
        .field-hist-item {
            padding: 5px 9px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .field-hist-item:hover { background: #eef2ff; }
        /* 右键菜单（暴露隐藏能力；不覆盖输入框原生菜单） */
        .use-ctx-mask { position: fixed; inset: 0; z-index: 400; }
        .use-ctx-menu {
            position: fixed; z-index: 401; background: var(--ui-field, var(--card));
            border: 1px solid var(--border); border-radius: 10px;
            box-shadow: 0 10px 30px rgba(15,23,42,.22);
            padding: 6px; min-width: 210px; max-width: 300px;
            display: flex; flex-direction: column; gap: 2px;
            font-size: 12px;
        }
        .use-ctx-menu .ctx-title {
            font-weight: 600; color: var(--text2); padding: 3px 8px 5px;
            border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 11px;
        }
        .use-ctx-menu .ctx-sep { height: 1px; background: var(--border); margin: 3px 4px; }
        .use-ctx-menu button {
            text-align: left; padding: 6px 9px; border: none; border-radius: 6px;
            background: none; cursor: pointer; font-size: 12px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
        .use-ctx-menu button:hover { background: #eef2ff; }
        .use-ctx-menu button:disabled { opacity: .45; cursor: not-allowed; }
        .use-ctx-menu button.danger { color: #dc2626; }
        .use-ctx-menu button.danger:hover { background:var(--ui-danger-soft,#fef2f2); }
        /* 辅助录入模态中的选中行高亮 */
        .modal-box .data-table tr.cur { background: #eef2ff; }
        .modal-box .data-table tbody tr { cursor: pointer; }
        .modal-box .data-table tbody tr:hover { background: #f5f7ff; }
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table th, .data-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
        .data-table th { background:var(--ui-surface-alt,var(--bg)); font-weight: 600; }
        .para-suppressed-note {
            max-width: 260px; padding: 4px 8px; border-radius: 6px;
            background: #fff7ed; color: #9a3412; font-size: 11px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
        .chip {
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 14px;
            background: #eef2ff;
            color: #4338ca;
        }
        .rule-item { padding: 6px 10px; background: var(--bg); border-radius: 8px; margin-bottom: 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
        .rule-item .rt { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--ui-primary-soft, var(--bg)); color: var(--ui-primary-readable, var(--primary)); }

        /* 模态 */
        .modal-mask {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .modal-box {
            background: var(--ui-field, var(--card));
            border-radius: 16px;
            position: relative;
            width: min(560px, 94vw);
            max-height: 86vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 60px rgba(0,0,0,.3);
        }
        .form-loading-mask {
            position: absolute;
            inset: 0;
            z-index: 60;
            background: rgba(248, 250, 252, 0.82);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            cursor: wait;
        }
        .form-loading-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--ui-field, var(--card));
            border: 1px solid var(--border, #ddd);
            border-radius: 10px;
            padding: 12px 22px;
            font-size: 13px;
            color: #334155;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
        }
        .form-loading-spin {
            width: 16px;
            height: 16px;
            border: 2px solid #c7d2fe;
            border-top-color: #4f46e5;
            border-radius: 50%;
            animation: formSpin .8s linear infinite;
        }
        @keyframes formSpin { to { transform: rotate(360deg); } }
        .modal-box .mb-head { position: relative; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .modal-box .mb-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .form-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .form-icon-tool { min-width: 30px; padding-left: 6px; padding-right: 6px; }
        .form-mode-switch { display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background:var(--ui-surface-alt,var(--bg)); }
        .form-mode-switch button { border: 0; border-radius: 6px; padding: 4px 9px; background: transparent; color: var(--text2); font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
        .form-mode-switch button.active { background: var(--ui-field, var(--card)); color: #1d4ed8; font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
        .form-mode-switch button:hover { color: #1d4ed8; }
        .form-tools-menu { position: relative; }
        .form-tools-menu > summary { list-style: none; cursor: pointer; user-select: none; white-space: nowrap; }
        .form-tools-menu > summary::-webkit-details-marker { display: none; }
        .form-tools-menu > summary::marker { content: ''; }
        .form-tools-menu[open] > summary { border-color: #93c5fd; color: #1d4ed8; }
        .form-tools-popover {
            position: absolute; top: calc(100% + 7px); right: 0; z-index: 120;
            min-width: 190px; padding: 6px; background: var(--ui-field, var(--card));
            border: 1px solid var(--border); border-radius: 9px;
            box-shadow: 0 10px 30px rgba(15,23,42,.2);
        }
        .form-tools-popover button {
            display: flex; align-items: center; justify-content: space-between; gap: 16px;
            width: 100%; border: 0; border-radius: 6px; padding: 8px 9px;
            background: transparent; color: var(--text); font-size: 12px; text-align: left; cursor: pointer;
            white-space: nowrap;
        }
        .form-tools-popover button:hover { background: #eff6ff; color: #1d4ed8; }
        .form-tools-popover button.active { background: #eef4ff; color: #1d4ed8; font-weight: 600; }
        .form-menu-label { padding: 6px 9px 4px; color: var(--text2); font-size: 11px; font-weight: 600; }
        .form-menu-label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); }
        .form-mode-switch-block { width: 100%; box-sizing: border-box; }
        .form-mode-switch-block button { flex: 1; }
        .form-header-more { display: none; }
        .form-business-actions {
            display: flex; align-items: center; justify-content: flex-end;
            gap: 6px; flex-wrap: wrap;
            margin: 0 0 9px; padding: 0 0 8px; border-bottom: 1px solid var(--border);
        }
        /* 桌面复用页面右上角的“截图 → 当前弹窗”，避免表单头重复入口；
           手机标题栏被弹窗遮罩覆盖，因此在窄屏保留表单内可达入口。
           桌面用 visibility 保留原有头部尺寸，避免表单弹窗与截图基线整体位移。 */
        .modal-box .mobile-form-capture {
            visibility: hidden;
            pointer-events: none;
        }
        /* 2026-10-18（FB-20261018-02 P1）：只读模式必须可见 */
        .modal-box .readonly-banner { padding: 8px 18px; background: #fff7e6; border-bottom: 1px solid #f0d9a8; color: #8a5a00; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
        .modal-box .readonly-banner .readonly-reason { color: #a06a00; opacity: .9; }
        /* 2026-10-10 反馈：内容区高度在打开时被 core.js measureFormBody() 钉死（useFormBodyH），
           弹窗底部再留一段空白，避免新增的从表行正好压在下边界上看不见。 */
        .modal-box .mb-body { padding: 16px 18px 28px; overflow-y: auto; }
        .modal-box .mb-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

        /* 宽表单模态：桌面充分利用屏幕，移动端自动降级 */
        .modal-box.modal-wide { width: min(96vw, 1280px); max-height: 92vh; }
        .modal-box.modal-wide .mb-body { padding: 14px 20px 28px; }
        /* CS 坐标模式：弹窗贴身包裹内部画布（宽度由内联样式按画布计算） */
        .modal-box.modal-cs { border-radius: 12px; }
        .modal-box.modal-cs .mb-body { padding: 8px 10px 20px; }
        @media (max-width: 900px) {
            .modal-box.modal-wide { width: 98vw; max-height: 96vh; }
            .modal-box.modal-wide .fg { flex: 1 1 100% !important; min-width: 100% !important; }
            .desktop-form-tools { display: none !important; }
            .form-header-more { display: block; }
            .form-more-panel { width: min(260px, calc(100vw - 32px)); }
            .modal-box .mobile-form-capture {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                visibility: visible;
                pointer-events: auto;
            }
            html:not(.hd-capture-mode) .modal-box .mobile-form-capture {
                min-height: 40px;
            }
            /* 移动端触控优化：字段卡片化、输入控件加大、页签条 */
            .modal-box.modal-wide .mb-body { padding: 12px 12px 24px; }
            .modal-box.modal-wide .form-grid { gap: 10px; }
            .modal-box.modal-wide .form-grid .fg { padding: 2px 0; }
            .modal-box.modal-wide .form-grid .fg label { font-size: 13px; margin-bottom: 4px; }
            .modal-box.modal-wide .form-grid .fg input,
            .modal-box.modal-wide .form-grid .fg select,
            .modal-box.modal-wide .form-grid .fg textarea {
                min-height: 44px;
                font-size: 15px;
                padding: 9px 10px;
                border-radius: 10px;
            }
            .modal-box.modal-wide .help-wrap input { min-height: 44px; font-size: 15px; }
            .modal-box.modal-wide .help-btn { min-height: 36px; min-width: 36px; font-size: 15px; }
            .flow-tabs {
                display: flex;
                gap: 6px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 2px 2px 8px;
                scrollbar-width: none;
            }
            .flow-tabs::-webkit-scrollbar { display: none; }
            .flow-tab {
                flex: none;
                padding: 7px 14px;
                border-radius: 999px;
                background: #f1f5f9;
                color: #475569;
                font-size: 13px;
                border: 1px solid #e2e8f0;
                white-space: nowrap;
                cursor: pointer;
                user-select: none;
            }
            .flow-tab.on { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
            .flow-tab .cnt { font-size: 11px; opacity: .75; margin-left: 3px; }

            /* 辅助录入选择器：移动端大触控行、底部靠下显示 */
            .help-scan-modal {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100dvh;
                max-height: 100dvh !important;
                border-radius: 0;
            }
            .help-scan-modal .mb-body {
                flex: 1;
                overflow: auto;
            }
            .help-scan-modal #scanVideo {
                max-height: 62dvh !important;
            }
            .help-modal { max-height: 88vh; }
            .help-modal .mb-body { max-height: 62vh; display: flex; flex-direction: column; }
            .help-modal .data-table th, .help-modal .data-table td { padding: 11px 9px; font-size: 14px; white-space: nowrap; }
            .help-modal input { min-height: 44px; font-size: 15px; }
        }

        /* 从表网格增强：吸顶表头、统一行高、横向滚动 */
        /* 2026-10-10 反馈：从表 0 行时网格只有表头那一条（37px），点「➕ 添加行」
           新增的行落在窄缝之外（内容区高度打开时已钉死）⇒ 看不见、要关掉重开。
           这里让网格至少占住「表头 + 2 条记录」的高度（行高见下面 .detail-grid td），
           新增 1～2 行不撑高页面，行也不会掉到内容区下边界之外。 */
        .detail-grid {
            min-height: calc(34px * 3);
            max-height: min(45vh, 460px); overflow: auto; border: 1px solid var(--border); border-radius: 8px;
            background: var(--ui-card, var(--card));
            color: var(--ui-text, var(--text));
        }
        .detail-grid table { width: max-content; min-width: 100%; }
        .detail-grid thead th {
            position: sticky; top: 0; z-index: 2;
            background: var(--ui-surface-alt, var(--bg));
            color: var(--ui-text, var(--text));
        }
        .detail-grid td, .detail-grid th { height: 34px; white-space: nowrap; padding: 3px 6px; }
        .detail-grid input { height: 27px; padding: 3px 6px; box-sizing: border-box; }

        /* 浮动按钮 */
        .float-btns {
            position: fixed;
            right: 18px;
            bottom: 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 50;
        }
        .float-btn {
            width: 46px; height: 46px;
            border-radius: 50%;
            border: none;
            font-size: 20px;
            background: var(--ui-field, var(--card));
            box-shadow: 0 6px 18px rgba(15,23,42,.18);
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        .float-btn .cnt {
            position: absolute;
            top: -2px; right: -2px;
            background: var(--danger);
            color: var(--ui-danger-text, #fff);
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            padding: 0 4px;
        }

        /* 右侧面板 */
        .drawer {
            position: fixed;
            top: 10px;
            right: 10px;
            bottom: 10px;
            width: min(520px, 90vw);
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: 0 20px 50px rgba(15,23,42,.25);
            z-index: 60;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .drawer-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
        .drawer-head .spacer { flex: 1; }
        .drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
        .sdx-viewer { width: min(900px, 94vw); }
        .sdx-tree-item { font-size: 13px; padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
        .sdx-tree-item:hover { background: rgba(37,99,235,.08); }
        .sdx-sec-title { font-size: 12px; font-weight: 600; color: var(--text2); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px dashed var(--border,#ddd); }
        .mini-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 4px; }
        .mini-table th, .mini-table td { border: 1px solid var(--border,#ddd); padding: 3px 8px; text-align: left; }
        .mini-table th { background: rgba(37,99,235,.06); }
        /* 首页概览 */
        .home-view { padding: 8px 4px 20px; }

        /* 使用模式 */
        .use-toolbar {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding: 8px 0 10px;
            align-items: center;
        }
        .use-filter-input {
            padding: 7px 10px;
            border: 1.5px solid var(--border);
            border-radius: 9px;
            font-size: 13px;
            width: 140px;
            outline: none;
        }
        .use-filter-input:focus { border-color: var(--primary); }
        /* 手机业务壳：桌面保留原有标题栏/工具栏，移动端使用独立的主次操作分区。 */
        .mobile-title-actions,
        .mobile-use-toolbar { display: none; }
        .mobile-action-menu { position: relative; flex: none; }
        .mobile-action-menu:not([open]) > .mobile-action-panel { display: none !important; }
        .mobile-action-menu > summary {
            list-style: none;
            cursor: pointer;
            user-select: none;
        }
        .mobile-action-menu > summary::-webkit-details-marker { display: none; }
        .mobile-action-panel {
            position: absolute;
            right: 0;
            top: calc(100% + 5px);
            z-index: 180;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 4px;
            width: max-content;
            min-width: 210px;
            max-width: min(300px, calc(100vw - 16px));
            padding: 6px;
            background: var(--card, #fff);
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 12px;
            box-shadow: 0 14px 36px rgba(15, 23, 42, .22);
        }
        .mobile-action-panel button {
            width: 100%;
            min-height: 42px;
            justify-content: flex-start;
            text-align: left;
            white-space: normal;
        }
        .mobile-action-panel button.danger { margin-block: 4px; }
        .mobile-action-panel .mobile-action-caption {
            color: var(--text2);
            font-size: 11px;
            padding: 4px 7px 2px;
        }
            .mobile-filter-field {
                display: grid;
                gap: 4px;
                padding: 3px 2px 5px;
                color: var(--text2);
                font-size: 11px;
            }
            .mobile-filter-field select {
                min-height: 40px;
                width: 100%;
                padding: 7px 9px;
                border: 1px solid var(--border);
                border-radius: 8px;
                background: var(--ui-field, var(--card));
                color: var(--text);
                font-size: 13px;
            }
            .mobile-filter-chips {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 6px;
                width: 100%;
            }
            .mobile-filter-chip {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                min-height: 40px;
                max-width: 100%;
                padding: 6px 10px;
                border: 1px solid #bfdbfe;
                border-radius: 999px;
                background: #eff6ff;
                color: #1d4ed8;
                font-size: 12px;
                overflow-wrap: anywhere;
            }
            .mobile-filter-chip b {
                font-weight: 600;
            }
            .mobile-filter-chips .mobile-filter-clear-all {
                min-height: 40px;
                color:var(--ui-danger-readable,var(--danger));
            }
        .use-grid {
            flex: 0 0 auto;
            overflow: auto;
            min-height: 0;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--ui-field, var(--card));
        }
        .use-grid table { min-width: 100%; }
        .use-grid > .data-table {
            width: 100%;
            min-width: max-content;
        }
        .use-grid > .data-table th { white-space: nowrap; }
        .use-grid tbody tr { cursor: pointer; }
        .use-grid tbody tr:hover { background:var(--ui-surface-alt,var(--bg)); }
        .use-grid tbody tr.sel { background: #eef2ff; }
        .mobile-card-toggle, .mobile-card-edit, .mobile-card-title { display: none; }
        .use-split {
            height: 7px;
            margin: 2px 0;
            border-radius: 4px;
            cursor: row-resize;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            color: var(--text2);
            font-size: 10px;
            user-select: none;
            touch-action: none;
        }
        .use-split::after { content: '⋮⋮'; letter-spacing: 2px; }
        .use-split:hover, .use-split.dragging { background: rgba(99, 102, 241, 0.18); color: var(--ui-primary-readable, var(--primary)); }
        .use-pager {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap; /* 加了首页/末页/跳页后，窄屏（尤其手机）换行而不是溢出 */
            padding: 10px 0;
            font-size: 13px;
            color: var(--text2);
        }
        /* 跳页输入框（主表格分页器 / 日志分页器共用）：只提交回车，越界/未回车都显示回当前页
           （见 core.js usePageJumpTo / logMgrJumpTo） */
        .page-jump {
            width: 54px;
            padding: 3px 6px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
            text-align: center;
            color: inherit;
            background: var(--ui-field, var(--card));
        }
        .use-detail {
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--ui-surface-alt, var(--bg));
            color: var(--ui-text, var(--text));
            flex: 1 1 auto;
            min-height: 150px;
            overflow: auto;
        }
        .use-detail-head {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            background: var(--ui-card, var(--card));
            position: sticky;
            top: 0;
        }
        .use-detail table { margin: 0; min-width: 100%; }
        /* 2026-10-23（SC7）：真手机视口下主列表由横向宽表切为可读卡片。
           每行仍是同一个 <tr>，字段标签来自 data-label，保留现有排序、选择、
           编辑、行规则样式与键盘行为；仅改变窄屏呈现，不改桌面表格。 */
        @media (max-width: 640px) {
            .use-grid { overflow-x: hidden; border: 0; background: transparent; }
            .use-grid > .data-table {
                display: block;
                width: 100%;
                min-width: 0 !important;
                border-collapse: separate;
            }
            .use-grid > .data-table > thead,
            .use-grid > .data-table > .col-filter-row { display: none !important; }
            .use-grid > .data-table > tbody {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 10px;
                width: 100%;
            }
            .use-grid > .data-table > tbody > tr:not(.group-row):not(.grid-row-error-bar) {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: start;
                gap: 0 12px;
                width: 100%;
                padding: 10px 12px;
                box-sizing: border-box;
                overflow: hidden;
                background: var(--ui-card, var(--card));
                border: 1px solid var(--border);
                border-radius: 10px;
            }
            .use-grid > .data-table > tbody > tr.group-row,
            .use-grid > .data-table > tbody > tr.grid-row-error-bar {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }
            .use-grid > .data-table > tbody > tr > td {
                display: block;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                padding: 6px 0 !important;
                border: 0 !important;
                overflow: visible !important;
                white-space: normal !important;
                text-align: left !important;
                overflow-wrap: anywhere;
            }
            .use-grid > .data-table > tbody > tr > td[data-label]::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 3px;
                color: var(--text2);
                font-size: 10px;
                font-weight: 600;
                line-height: 1.25;
            }
            .use-grid > .data-table > tbody > tr > td:first-child[data-label="选择"] {
                grid-column: 1 / -1;
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 0 0 7px !important;
                border-bottom: 1px dashed var(--border) !important;
            }
            .use-grid > .data-table > tbody > tr > td:first-child[data-label="选择"]::before {
                content: none;
            }
            .use-grid > .data-table > tbody .mobile-card-title {
                display: block;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: var(--text);
                font-size: 12px;
                font-weight: 600;
            }
            .use-grid > .data-table > tbody > tr > td[data-mobile-more="1"] {
                display: none !important;
            }
            .use-grid > .data-table > tbody > tr.mobile-card-expanded > td[data-mobile-more="1"] {
                display: block !important;
            }
            .use-grid > .data-table > tbody .mobile-card-toggle,
            .use-grid > .data-table > tbody .mobile-card-edit {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 30px;
                padding: 3px 8px;
                font-size: 11px;
                white-space: nowrap;
            }
            .use-grid > .data-table > tbody .mobile-card-toggle,
            .use-grid > .data-table > tbody .mobile-card-edit {
                margin-left: auto;
            }
            .use-grid > .data-table > tbody .mobile-card-edit +
            .mobile-card-toggle { margin-left: 4px; }
            .use-grid > .data-table > tbody > tr > td input:not([type="checkbox"]),
            .use-grid > .data-table > tbody > tr > td select { min-width: 0 !important; }
            .use-grid > .data-table > tbody > tr > td img { max-width: 100% !important; }
            .use-grid > .data-table > tbody > tr > td span.grid-cell-text {
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
            }
        }

        /* toast */
        .toast {
            position: fixed;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            background: #0f172a;
            color: #fff;
            padding: 9px 18px;
            border-radius: 12px;
            font-size: 13px;
            z-index: 200;
            box-shadow: 0 8px 24px rgba(0,0,0,.25);
        }
        .toast.success { background: #047857; }
        .toast.error { background: #b91c1c; }

        /* 持久错误对话框 */
        .err-dlg-mask {
            position: fixed; inset: 0; background: rgba(15,23,42,.55);
            display: flex; align-items: center; justify-content: center;
            z-index: 300; padding: 20px;
        }
        .err-dlg {
            background: var(--ui-card, var(--card));
            color: var(--ui-text, var(--text));
            border-radius: 14px; max-width: 640px; width: 100%;
            max-height: 82vh; display: flex; flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden;
        }
        .err-dlg-head {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 16px; background: #b91c1c; color: #fff; font-weight: 600;
        }
        .err-dlg-close { margin-left: auto; background: none; border: none; color: #fff;
            font-size: 16px; cursor: pointer; }
        .err-dlg-body { padding: 14px 16px; overflow: auto; font-size: 13px; }
        .err-dlg-msg {
            margin: 0; white-space: pre-wrap; word-break: break-all;
            background: var(--ui-surface-alt,var(--bg));
            border: 1px solid var(--ui-border,var(--border));
            border-radius: 8px;
            padding: 10px 12px; color: var(--ui-text,var(--text));
            user-select: text; font-family: inherit;
        }
        .err-dlg-explain { margin-top: 12px; }
        .err-dlg-explain-title {
            font-weight: 600;
            color: var(--ui-primary-readable,var(--primary));
            margin-bottom: 6px;
        }
        .err-dlg-rule {
            background: var(--ui-primary-soft,var(--bg));
            border-radius: 6px; padding: 6px 10px;
            margin: 4px 0;
            color: var(--ui-primary-readable,var(--primary));
            white-space: pre-wrap; word-break: break-all;
        }
        .err-dlg-foot {
            display: flex; gap: 8px; justify-content: flex-end;
            padding: 10px 16px;
            border-top: 1px solid var(--ui-border,var(--border));
        }

        /* AI 业务助手：可折叠右侧工作坞 */
        .ai-fab {
            position: fixed; right: 0; top: calc(50% - 50px); width: 46px; height: 100px;
            border-radius: 16px 0 0 16px; background: linear-gradient(135deg, #1e1b4b, #4f46e5);
            color: #fff; display: flex; flex-direction: column; gap: 3px;
            align-items: center; justify-content: center;
            box-shadow: 0 8px 24px rgba(79,70,229,.4); cursor: pointer; z-index: 90;
            border: none; transition: transform .15s;
        }
        .ai-fab:hover { transform: translateX(-3px); }
        .ai-fab-icon { font-size: 23px; line-height: 1; }
        .ai-fab-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .9; }
        .ai-fab-live {
            position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
            border-radius: 50%; background: #34d399; border: 2px solid #312e81;
            box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: aiPulse 1.8s infinite;
        }
        .ai-fab.has-task { background: linear-gradient(135deg, #064e3b, #0f766e); }
        @keyframes aiPulse {
            70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
            100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
        }
        .ai-panel {
            position: fixed; right: 10px; top: 10px; bottom: 10px; width: 400px;
            max-width: calc(100vw - 20px); height: auto; max-height: none;
            background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: 0 20px 60px rgba(15,23,42,.22); display: flex; flex-direction: column;
            z-index: 95; overflow: hidden;
        }
        .ai-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
            background: linear-gradient(135deg, #1e1b4b, #312e81); color: #fff; }
        .ai-head b { font-size: 14px; }
        .ai-sub { font-size: 11px; color: #c7d2fe; flex: 1; }
        .ai-task-live {
            flex: none; border-radius: 999px; padding: 2px 7px;
            background: rgba(52,211,153,.18); color: #a7f3d0; font-size: 10px; font-weight: 600;
        }
        .ai-clear { background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 11px; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
        .ai-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
        .ai-sources { padding: 6px 14px; font-size: 11px; color: #a5b4fc; background: rgba(255,255,255,.05); }
        .ai-src-title { color: #c7d2fe; }
        .ai-src-item { display: inline-block; background: rgba(255,255,255,.12); border-radius: 10px; padding: 1px 8px; margin: 0 4px 2px 0; }
        .ai-body { flex: 1; overflow-y: auto; padding: 12px; }
        .ai-empty { color: var(--text2); font-size: 13px; line-height: 1.9; padding: 8px; }
        .ai-msg { margin-bottom: 10px; display: flex; position: relative; }
        .ai-msg.user { justify-content: flex-end; }
        .ai-msg.ai { justify-content: flex-start; }
        .ai-bubble { max-width: 88%; padding: 9px 12px; border-radius: 12px;
            font-size: 13px; line-height: 1.7; word-break: break-word; }
        .ai-msg.user .ai-bubble { background: var(--primary); color: var(--ui-primary-text, #fff); border-top-right-radius: 3px; }
        .ai-msg.ai .ai-bubble { background: #f1f5f9; border-top-left-radius: 3px; }
        .ai-bubble p { margin: 0 0 6px; }
        .ai-bubble ul, .ai-bubble ol { margin: 0 0 6px 18px; }
        .ai-bubble table { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
        .ai-bubble th, .ai-bubble td { border: 1px solid var(--border); padding: 4px 8px; }
        .ai-bubble code { background: #e2e8f0; padding: 0 4px; border-radius: 4px; font-size: 12px; }
        .ai-bubble pre { background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 8px;
            overflow-x: auto; font-size: 12px; }
        .ai-msg-actions { position: absolute; top: -9px; right: 4px; display: flex; gap: 4px;
            background: var(--ui-field, var(--card)); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, .12); opacity: 0; transition: opacity .15s; z-index: 5; }
        .ai-msg.ai:hover .ai-msg-actions, .ai-msg.user:hover .ai-msg-actions { opacity: 1; }
        .ai-msg-act { background: #f1f5f9; border: none; border-radius: 999px; padding: 2px 7px;
            font-size: 12px; cursor: pointer; line-height: 1.4; }
        .ai-msg-act:hover { background: #e2e8f0; }
        .ai-code-wrap { position: relative; margin: 6px 0; }
        .ai-code-copy { position: absolute; top: 6px; right: 6px; background: rgba(15, 23, 42, .7); color: #fff;
            border: none; border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; z-index: 2; }
        .ai-code-copy:hover { background: rgba(15, 23, 42, .9); }
        .ai-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
        .ai-foot input { flex: 1; padding: 8px 10px; border: 1px solid var(--border);
            border-radius: 8px; font-size: 13px; outline: none; }
        .ai-foot input:focus { border-color: var(--primary); }
        .ai-session-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px;
            border-bottom: 1px solid var(--border); background:var(--ui-surface-alt,var(--bg)); }
        .ai-session-bar select { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--border);
            border-radius: 6px; font-size: 12px; color: var(--text); background: var(--ui-field, var(--card)); }
        .ai-session-bar button { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
        .ai-session-bar button:hover { background: #e0e7ff; }
        .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .ai-chip { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; border-radius: 999px;
            padding: 4px 10px; font-size: 12px; cursor: pointer; }
        .ai-chip:hover { background: #e0e7ff; }
        .ai-intent-card { margin-top: 10px; border: 1px solid #c7d2fe; border-radius: 12px;
            padding: 10px 12px; background:var(--ui-surface-alt,var(--bg)); font-size: 12px; }
        .ai-intent-card.st-done { border-color: #a7f3d0; background: #ecfdf5; }
        .ai-intent-card.st-failed, .ai-intent-card.st-cancelled { border-color: #fecaca; background:var(--ui-danger-soft,#fef2f2); }
        .ai-intent-title { font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
        .ai-intent-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eef2ff;
            color: #4f46e5; font-weight: 600; }
        .st-done .ai-intent-badge { background: #d1fae5; color: #047857; }
        .st-failed .ai-intent-badge, .st-cancelled .ai-intent-badge { background: #fee2e2; color: #dc2626; }
        .ai-intent-step { padding: 2px 0; color: var(--text2, #555); line-height: 1.5; }
        .ai-intent-running { color: var(--warn, #d97706); margin-top: 4px; }
        .ai-intent-err { color: var(--danger, #dc2626); margin-top: 4px; white-space: pre-wrap; }
        .ai-intent-result { color: var(--secondary, #047857); margin-top: 4px; font-weight: 600; }
        .ai-intent-foot { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
        .ai-mode-tabs { display: flex; gap: 6px; padding: 8px 12px; background: #eef2ff;
            border-bottom: 1px solid var(--border); }
        .ai-mode-tab { flex: 1; min-height: 34px; border: 1px solid #c7d2fe; border-radius: 8px;
            background: var(--ui-field, var(--card)); color: #4338ca; font-size: 12px; cursor: pointer; }
        .ai-mode-tab.active { background: #4338ca; border-color: #4338ca; color: #fff; }
        .harness-body { flex: 1; overflow-y: auto; padding: 12px; font-size: 12px; }
        .harness-card { border: 1px solid var(--border); border-radius: 11px; padding: 10px;
            margin-bottom: 9px; background: var(--ui-field, var(--card)); }
        .harness-title { display: flex; align-items: center; gap: 7px; font-weight: 700;
            margin-bottom: 7px; color: #1e293b; }
        .harness-status { margin-left: auto; border-radius: 999px; padding: 2px 8px;
            font-size: 11px; background: #eef2ff; color: #4338ca; }
        .harness-muted { color: var(--text2); line-height: 1.65; }
        .harness-row { border-top: 1px dashed var(--border); padding: 7px 0; }
        .harness-row:first-of-type { border-top: 0; }
        .harness-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--text2);
            font-size: 11px; }
        .harness-code { font-family: Consolas, monospace; overflow-wrap: anywhere; }
        .harness-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
        .harness-actions button { min-height: 34px; }
        .harness-error { border: 1px solid #fecaca; background:var(--ui-danger-soft,#fef2f2); color:var(--ui-danger-readable,var(--danger));
            border-radius: 9px; padding: 8px 10px; margin-bottom: 9px; white-space: pre-wrap; }
        .harness-warning { border: 1px solid #fde68a; background:var(--ui-warning-soft,#fffbeb); color:var(--ui-warning-readable,var(--warning));
            border-radius: 9px; padding: 8px 10px; margin-bottom: 9px; line-height: 1.6; }
        .harness-goal { width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box;
            border: 1px solid var(--border); border-radius: 9px; padding: 9px; font: inherit; }
        .harness-events { max-height: 150px; overflow-y: auto; }
        .harness-event { display: grid; grid-template-columns: 38px 1fr; gap: 7px;
            padding: 4px 0; border-top: 1px solid #f1f5f9; color: var(--text2); }
        .harness-binding { margin-top: 6px; padding: 7px; background:var(--ui-surface-alt,var(--bg));
            border-radius: 7px; font-size: 10.5px; overflow-wrap: anywhere; }
        .harness-observation { margin-top: 6px; padding: 6px 8px; border-radius: 7px;
            background: #f1f5f9; color: #334155; font-size: 11px; }
        .harness-run-list { display: grid; gap: 6px; }
        .harness-run-item {
            width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
            padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px;
            background: var(--ui-field, var(--card)); color: var(--text); cursor: pointer;
        }
        .harness-run-item:hover { border-color: #a5b4fc; background: #f8faff; }
        .harness-run-item.active { border-color: #818cf8; background: #eef2ff; }
        .harness-run-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
        .harness-run-main b {
            font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .harness-run-open {
            flex: none; font-size: 11px; color: #4338ca; font-weight: 600;
        }
        @media (max-width: 1280px) and (min-width: 1081px) {
            .app.ai-dock-open { width: calc(100% - 380px); }
            .ai-panel { width: 360px; }
        }
        @media (max-width: 1080px) and (min-width: 901px) {
            .app.ai-dock-open { width: auto; flex: 1 1 auto; }
            .ai-panel { width: min(390px, calc(100vw - 24px)); }
        }
        @media (max-width: 820px) {
            .harness-body { padding: 9px; }
            .harness-actions button { flex: 1 1 42%; }
            .harness-card { padding: 9px; }
        }
        @media (max-width: 900px) {
            .app.ai-dock-open { width: auto; flex: 1 1 auto; }
            .ai-panel {
                right: 0; top: 0; bottom: 0; width: 100vw; max-width: 100vw;
                border-radius: 0; z-index: 220;
            }
            .ai-fab { top: auto; bottom: 14px; height: 84px; }
        }
        .remind-badge {
            display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
            background: var(--danger); color: #fff; border-radius: 8px;
            font-size: 10px; text-align: center; padding: 0 4px; margin-left: 3px;
        }
        .remind-item { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
        .remind-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
        .remind-hint { color: var(--text); font-size: 12.5px; margin-bottom: 5px; }
        .remind-meta { color: var(--text2); font-size: 11px; display: flex; align-items: center; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        @media (max-width: 820px) {
            .app { flex-direction: column; }
            .sidebar { width: 100% !important; min-width: 0; max-height: 34vh; }
            .splitter { display: none; }
            .msg .bubble { max-width: 92%; }
        }
        /* 移动端双屏导航（使用模式）：树屏/业务屏各自整屏，互不堆叠 */
        @media (max-width: 900px) {
            .app.mob { flex-direction: column; }
            .app.mobTree .sidebar { max-height: none; flex: 1 1 auto; min-height: 0; }
            .app.mobWork .main { flex: 1 1 auto; min-height: 0; }
            /* 手机端树屏 = 全屏主菜单：放大字号与触控目标 */
            .tree-item { min-height: 40px; font-size: 15px; padding: 9px 10px; }
            .tree-item .arrow { width: 16px; font-size: 12px; }
            .tree-item .leaf { width: 18px; font-size: 15px; }
            .tree-item .badge { font-size: 11px; padding: 1px 8px; }
            .search-box input { font-size: 15px; padding: 10px 12px; }
        }

        /* 390px 业务页首屏：标题只承担定位与四项主入口；高频动作留在工具栏，
           打印、数据/图表、截图、最大化等低频能力收进一次点开的菜单。 */
        @media (max-width: 900px) {
            .chat-head {
                position: relative;
                z-index: 45;
                min-height: 56px;
                padding: 6px 8px;
                gap: 6px;
                flex-wrap: nowrap;
            }
            .chat-head h2 {
                flex: 1 1 auto;
                min-width: 0;
                margin: 0;
                overflow: hidden;
                font-size: 14px;
                line-height: 1.2;
            }
            .chat-head h2 .use-title-main {
                display: -webkit-box;
                white-space: normal !important;
                overflow: hidden !important;
                text-overflow: clip !important;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow-wrap: anywhere;
            }
            .chat-head h2 .use-node-path,
            .chat-head .use-total-count,
            .chat-head .mobile-head-desktop { display: none !important; }
            .chat-head > .mobile-title-action,
            .mobile-title-actions > .mobile-title-action,
            .mobile-title-actions > .mobile-action-menu > summary {
                min-width: 40px;
                min-height: 42px;
                padding: 4px 7px;
                font-size: 12px;
                border-radius: 9px;
                white-space: nowrap;
            }
            .mobile-title-actions {
                display: flex;
                align-items: center;
                gap: 4px;
                flex: none;
            }
            .mobile-title-actions .mobile-title-short { padding-inline: 6px; }
            .chat-body { padding: 0 8px 8px !important; }
            .mobile-use-toolbar {
                display: flex;
                align-items: center;
                gap: 4px;
                flex-wrap: wrap;
                padding: 0 0 7px;
            }
            .mobile-use-toolbar > .btn,
            .mobile-use-toolbar > .mobile-action-menu > summary {
                min-height: 40px;
                padding: 4px 7px;
                font-size: 11.5px;
                border-radius: 9px;
                white-space: nowrap;
            }
            .mobile-use-toolbar .mobile-toolbar-more { margin-left: auto; }
            .use-toolbar-desktop { display: none !important; }
            .mobile-page-view-toggle { display: none !important; }
            .use-quick-status { display: none !important; }
            .use-detail.mobile-detail-collapsed {
                flex: 0 0 auto;
                min-height: 0;
                overflow: visible;
                border-color: #dbe3ef;
                background: var(--ui-field, var(--card));
            }
            .mobile-detail-summary {
                display: grid;
                gap: 8px;
                padding: 10px 12px;
            }
            .mobile-detail-summary-head {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                min-width: 0;
            }
            .mobile-detail-summary-owner {
                min-width: 0;
                flex: 1;
                font-weight: 600;
                font-size: 13px;
                overflow-wrap: anywhere;
            }
            .mobile-detail-summary-count {
                flex: none;
                color: var(--text2);
                font-size: 12px;
            }
            .mobile-detail-summary-values {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 6px;
            }
            .mobile-detail-summary-value {
                min-width: 0;
                padding: 6px 8px;
                border-radius: 8px;
                background:var(--ui-surface-alt,var(--bg));
            }
            .mobile-detail-summary-value span {
                display: block;
                color: var(--text2);
                font-size: 10px;
            }
            .mobile-detail-summary-value b {
                display: block;
                margin-top: 2px;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .mobile-detail-summary .btn {
                min-height: 44px;
                width: 100%;
            }
            .use-detail.mobile-detail-open {
                position: fixed;
                inset: 0;
                z-index: 120;
                width: 100vw;
                height: 100dvh;
                max-width: 100vw;
                min-height: 0;
                margin: 0;
                border: 0;
                border-radius: 0;
                background: var(--ui-field, var(--card));
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
            .use-detail.mobile-detail-open .use-detail-head {
                z-index: 3;
                flex-wrap: wrap;
                padding: 8px 10px;
                box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
            }
            .use-detail.mobile-detail-open .use-detail-head .btn {
                min-height: 40px;
            }
            .use-detail.mobile-detail-open .use-detail-head input {
                min-height: 40px;
            }
            .home-view { padding: 0 0 16px !important; }
            .home-view .welcome {
                align-items: flex-start;
                gap: 8px;
            }
            .home-view .welcome > div:first-child { min-width: 0; }
            .home-view .welcome h2 { font-size: 19px; }
            .home-view .welcome .act {
                flex: 1 1 100%;
                justify-content: space-between;
                gap: 8px;
            }
            .home-view .home-tabs {
                flex: 1 1 auto;
                min-width: 0;
            }
            .home-view .home-tabs button {
                min-width: 76px;
                min-height: 40px;
                padding: 8px 12px;
                font-size: 13px;
            }
            .home-view .welcome .act > .btn,
            .home-view .welcome .act .home-refresh .btn {
                min-height: 40px;
            }
            .home-view .welcome .act .home-refresh { gap: 4px; }
            .home-view .welcome .act .home-refresh-time { display: none; }
            .home-view .ai-command { margin-top: 12px; padding-left: 11px; }
            .home-view .ai-command input { font-size: 14px; padding: 8px 2px; }
            .home-view .stat-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                margin-top: 12px;
            }
            .home-view .stat {
                min-width: 0;
                padding: 12px;
            }
            .home-view .stat .num { font-size: 24px; }
            .home-view > .card {
                padding: 12px;
                min-width: 0;
            }
            .home-view .dash-grid { gap: 10px; margin-top: 12px; }
            .home-view .dash-block { padding: 12px; }
            .home-view .dash-chart { height: 220px; }
            .portal-view { margin-top: 12px; }
            .portal-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding: 1px 1px 10px;
                gap: 7px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .portal-tabs::-webkit-scrollbar { display: none; }
            .portal-tab {
                flex: none;
                min-height: 40px;
                padding: 8px 14px;
            }
            .portal-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px;
                margin-top: 10px;
            }
            .portal-card {
                min-width: 0;
                min-height: 120px;
                padding: 12px 8px;
            }
            .portal-card .pc-nm { font-size: 14px; }
            .portal-card .pc-sub { font-size: 11px; }
            .form-action-bar {
                padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
                gap: 7px;
                flex-wrap: nowrap;
            }
            .mobile-form-actions {
                display: flex;
                align-items: center;
                gap: 7px;
                width: 100%;
                min-width: 0;
            }
            .mobile-form-actions > .btn,
            .mobile-form-actions > .mobile-action-menu > summary {
                min-height: 44px;
                border-radius: 10px;
                font-size: 13px;
            }
            .mobile-form-actions .mobile-form-save {
                flex: 1 1 auto;
                min-width: 110px;
                font-weight: 600;
            }
            .mobile-form-actions .mobile-form-cancel {
                flex: 0 0 auto;
                min-width: 74px;
            }
            .mobile-form-actions .mobile-form-more {
                flex: 0 0 auto;
                margin-left: auto;
            }
            .mobile-form-actions .form-dirty-dot {
                margin-left: 0;
                flex: none;
            }
            .form-action-bar .mobile-action-panel {
                top: auto;
                bottom: calc(100% + 6px);
                max-height: 62vh;
                overflow: auto;
            }
            .mobile-use-pager {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                width: 100%;
                min-width: 0;
            }
            .mobile-use-pager > .btn,
            .mobile-use-pager > .mobile-action-menu > summary {
                min-height: 40px;
                min-width: 42px;
                padding: 4px 7px;
                font-size: 12px;
            }
            .mobile-pager-state {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 3px;
                min-width: 0;
                flex: 1;
                font-size: 12px;
                white-space: nowrap;
            }
            .mobile-pager-state .page-jump {
                width: 46px;
                min-height: 40px;
                padding: 5px 3px;
                font-size: 13px;
            }
            .mobile-pager-state .mobile-pager-total {
                display: block;
                color: var(--text2);
                font-size: 10px;
            }
            .mobile-use-pager .mobile-action-panel {
                top: auto;
                bottom: calc(100% + 6px);
            }
            .mobile-use-pager .mobile-action-panel select {
                min-height: 40px;
                padding: 6px 8px;
                border: 1px solid var(--border);
                border-radius: 8px;
                background: var(--ui-field, var(--card));
            }
            .mobile-param-form {
                width: 100vw !important;
                max-width: 100vw !important;
                max-height: 100dvh !important;
            }
            .mobile-param-body {
                display: grid !important;
                gap: 10px !important;
                max-height: 64dvh !important;
                padding: 10px !important;
            }
            .mobile-param-row {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) !important;
                gap: 5px !important;
                align-items: stretch !important;
            }
            .mobile-param-row > label {
                width: auto !important;
                flex: none !important;
                font-size: 13px !important;
                font-weight: 600;
            }
            .mobile-param-row [data-mobile-param-control] {
                width: 100% !important;
                min-width: 0 !important;
                min-height: 44px;
                padding: 9px 10px !important;
                box-sizing: border-box;
                font-size: 15px !important;
            }
            .mobile-param-actions {
                position: sticky;
                bottom: 0;
                z-index: 3;
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
                padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
                background: rgba(255, 255, 255, .98) !important;
                box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
            }
            .mobile-param-actions .btn {
                flex: 1 1 120px;
                min-height: 44px;
                font-size: 14px;
            }
            .mobile-log-modal {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100dvh !important;
                max-height: none !important;
                border-radius: 0 !important;
            }
            .mobile-log-filters {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px !important;
                padding: 8px 10px !important;
            }
            .mobile-log-filters [data-mobile-log-filter],
            .mobile-log-filters [data-mobile-gps-filter] {
                width: 100% !important;
                max-width: none !important;
                min-height: 44px;
                padding: 8px 9px !important;
                box-sizing: border-box;
                font-size: 13px !important;
            }
            .mobile-log-filters .btn {
                width: 100%;
                min-height: 44px;
            }
            .mobile-log-body { padding: 8px 10px !important; }
            .modal-box table.mobile-log-table {
                display: block;
                width: 100% !important;
                min-width: 0 !important;
                border: 0;
            }
            .mobile-log-table > thead { display: none; }
            .mobile-log-table > tbody {
                display: grid;
                gap: 8px;
                width: 100%;
            }
            .mobile-log-table > tbody > tr.mobile-log-card {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0 10px;
                width: 100%;
                box-sizing: border-box;
                padding: 10px;
                border: 1px solid var(--border);
                border-radius: 10px;
                background: var(--ui-field, var(--card));
            }
            .mobile-log-table > tbody > tr.mobile-log-card > td {
                display: block;
                width: auto !important;
                max-width: none !important;
                padding: 6px 0 !important;
                border: 0 !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                overflow-wrap: anywhere;
                font-size: 12px;
            }
            .mobile-log-table > tbody > tr.mobile-log-card > td::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 2px;
                color: var(--text2);
                font-size: 10px;
                font-weight: 600;
            }
            .mobile-log-table > tbody > tr.mobile-log-card > td[data-label="明细"],
            .mobile-log-table > tbody > tr.mobile-log-card > td[data-label="条目"],
            .mobile-log-table > tbody > tr.mobile-log-card > td:last-child {
                grid-column: 1 / -1;
            }
            .mobile-log-table > tbody > tr.mobile-log-card > td:last-child .btn {
                width: 100%;
                min-height: 40px;
            }
            .mobile-log-modal .mb-foot .btn { min-height: 40px; }
            .use-chart-settings {
                border: 1px solid var(--border);
                border-radius: 10px;
                background: var(--ui-field, var(--card));
                margin-bottom: 8px;
            }
            .use-chart-settings > summary {
                display: flex;
                align-items: center;
                min-height: 44px;
                padding: 7px 10px;
                color: #334155;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                list-style: none;
            }
            .use-chart-settings > summary::-webkit-details-marker { display: none; }
            .use-chart-settings[open] > summary {
                border-bottom: 1px solid var(--border);
            }
            .use-chart-settings:not([open]) > .use-chart-settings-body {
                display: none !important;
            }
            .use-chart-settings-body {
                padding: 8px !important;
                font-size: 13px !important;
            }
            .use-chart-settings-body select {
                flex: 1 1 100% !important;
                width: 100%;
                max-width: none !important;
                min-height: 40px;
                padding: 8px 9px !important;
                font-size: 13px;
            }
            .use-chart-settings-body label {
                min-height: 40px;
                padding: 7px 9px;
                border-radius: 8px;
                background:var(--ui-surface-alt,var(--bg));
            }
            .use-chart-settings-body input[type="checkbox"] {
                width: 20px;
                height: 20px;
            }
            .use-chart-settings-body .btn { min-height: 40px; }
            .use-quick-filter {
                display: flex !important;
                align-items: center;
                flex-wrap: wrap;
                gap: 5px;
                padding: 0 0 8px !important;
            }
            .use-quick-filter .use-quick-input {
                flex: 1 1 100% !important;
                width: 100%;
                max-width: none !important;
                min-height: 40px;
                padding: 8px 11px !important;
                box-sizing: border-box;
                font-size: 14px !important;
            }
            .use-quick-filter .btn { min-height: 40px; }
            .use-quick-filter [data-all-search-field],
            .use-quick-filter [data-search-all],
            .use-quick-filter [data-search-all-unconfigured],
            .use-quick-filter [data-search-all-status] {
                display: none !important;
            }
            .use-grid > .data-table > tbody .mobile-card-toggle,
            .use-grid > .data-table > tbody .mobile-card-edit {
                min-height: 40px;
                min-width: 44px;
                padding: 6px 10px;
                font-size: 12px;
            }
        }

/* 桌面表单页签条（填充式分段控件） */
            .use-tabs {
                display: inline-flex;
                gap: 6px;
                background: #f1f5f9;
                border: 1px solid #dbe3ef;
                border-radius: 12px;
                padding: 4px;
                margin: 6px 0 16px;
                max-width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
            }
            .use-tabs::-webkit-scrollbar { display: none; }
            .use-tab {
                padding: 9px 26px;
                font-size: 14px;
                font-weight: 500;
                color: #475569;
                border-radius: 9px;
                cursor: pointer;
                white-space: nowrap;
                user-select: none;
            }
            .use-tab:hover { color: #4f46e5; background: #e8edfc; }
            .use-tab.on {
                background: linear-gradient(135deg, #4f46e5, #6366f1);
                color: #fff;
                font-weight: 600;
                box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
            }

        /* ===== 移动端兼容（版本/用户/日志/改密等抽屉与弹窗） ===== */
        /* 用户管理弹窗：右栏（节点权限）与两处列表 —— 让它们可收缩、可滚动。
           2026-10-16：手机上 .um-body 变纵向后，右栏没有 min-height:0 会被内容撑高，
           整块溢出弹窗（而弹窗本身没有滚动条）⇒「看不到下面的行、也滑不动」。 */
        /* 这三处的 flex/overflow 从行内样式挪到类里（行内会压过样式表，手机端就改不动了） */
        .um-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
        .um-perm { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px 12px; -webkit-overflow-scrolling: touch; }
        .um-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; -webkit-overflow-scrolling: touch; }
        @media (max-width: 900px) {
            .drawer { top: 0; right: 0; bottom: 0; left: 0; width: 100vw; max-width: 100vw; border-radius: 0; }
            .drawer-head, .drawer-body { padding: 10px 12px; }
            .modal-box { width: 96vw !important; max-height: 96vh; }
            .modal-box .mb-head, .modal-box .mb-foot { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
            .modal-box .mb-body { padding: 10px 10px 24px; }
            /* 用户管理：左右分栏改上下 */
            /* 手机上让**外层**能上下滚（右栏不做内部硬撑），用户列表与权限列表各自限高可滚 */
            .um-body {
                flex-direction: column !important;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            .um-side {
                width: 100% !important;
                flex: 0 0 auto;
                height: 38%;            /* 定高：里面那份 .um-list 才能自己滚 */
                max-height: 38%;
                border-right: none !important;
                border-bottom: 1px solid var(--border);
            }
            .um-main { flex: 0 0 auto; }
            /* 权限区不自己滚：交给外层 .um-body 一条滚动到底（手机上更好用） */
            .um-perm { flex: 0 0 auto; overflow: visible; max-height: none; }
            /* 日志等宽表：容器横向滚动 */
            .modal-box .data-table-wrap, .modal-box table.data-table { min-width: 520px; }
        }


        /* ===== 登录页（成品交付视觉） ===== */
        .login-wrap {
            background:
                radial-gradient(1000px 500px at 85% -10%, rgba(79,70,229,.22), transparent 60%),
                radial-gradient(800px 500px at -10% 110%, rgba(37,99,235,.18), transparent 60%),
                linear-gradient(135deg, #eef2ff, #f8fafc 45%, #e0e7ff);
        }
        .login-card {
            display: flex; width: min(920px, 100%); min-height: 540px;
            max-width: none; padding: 0; border-radius: 22px; overflow: hidden;
            box-shadow: 0 24px 70px rgba(30,41,59,.18);
        }
        .login-brand {
            flex: 1.1; padding: 46px 44px; color: #fff; position: relative;
            background:
                radial-gradient(600px 300px at 100% 0%, rgba(255,255,255,.16), transparent 60%),
                linear-gradient(160deg, #4f46e5, #2563eb 70%, #1d4ed8);
            display: flex; flex-direction: column;
        }
        .login-brand .brand-mark {
            width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18);
            display: flex; align-items: center; justify-content: center;
            font-size: 26px; font-weight: 800; margin-bottom: 26px;
            border: 1px solid rgba(255,255,255,.28);
        }
        .login-brand h1 { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .5px; }
        .login-brand .slogan { margin-top: 10px; font-size: 14px; opacity: .86; line-height: 1.7; }
        .login-brand ul { margin-top: 34px; list-style: none; display: grid; gap: 14px; }
        .login-brand li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; opacity: .92; line-height: 1.5; }
        .login-brand li .tick {
            width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2);
            display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; margin-top: 1px;
        }
        .login-brand .brand-foot { margin-top: auto; font-size: 11px; opacity: .6; }
        .login-form { flex: 1; padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; }
        .login-form h2 { font-size: 22px; font-weight: 700; }
        .login-form .sub { color: var(--text2); font-size: 13px; margin-top: 8px; }
        .login-form label { display: block; font-size: 12px; color: var(--text2); margin: 18px 0 6px; }
        .login-form input {
            width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border);
            border-radius: 10px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
        }
        .login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
        .login-btn {
            width: 100%; height: 46px; margin-top: 26px; border: none; border-radius: 10px;
            background: var(--primary); color: var(--ui-primary-text, #fff);
            font-size: 15px; font-weight: 600; transition: transform .1s, box-shadow .15s;
            box-shadow: 0 8px 20px rgba(79,70,229,.28); cursor: pointer;
        }
        .login-btn:hover { box-shadow: 0 10px 26px rgba(79,70,229,.36); transform: translateY(-1px); }
        .login-theme-link {
            align-self: center; margin-top: 9px; padding: 3px 8px; border: 0;
            background: transparent; color: var(--text2); font-size: 12px; cursor: pointer;
        }
        .login-theme-link:hover { color: var(--ui-primary-readable, var(--primary)); }
        .login-error { color:var(--ui-danger-readable,var(--danger)); font-size: 12px; margin-top: 12px; background:var(--ui-danger-soft,#fef2f2); border: 1px solid #fecaca; border-radius: 8px; padding: 7px 10px; }
        .sys-switch {
            margin-top: 20px; text-align: center; font-size: 12px; color: var(--text2);
            display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
        }
        .sys-switch a { color: var(--ui-primary-readable, var(--primary)); text-decoration: none; }
        .sys-switch a:hover { text-decoration: underline; }
        .sys-switch .cur { color: var(--text); font-weight: 600; }
        .sys-switch .sep { color: var(--ui-text2, var(--text2)); }
        @media (max-width: 860px) {
            .login-brand { display: none; }
            .login-card { min-height: auto; }
            .login-form { padding: 40px 32px; }
        }

        /* ===== 工作台首页（成品交付视觉） ===== */
        .welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .welcome h2 { font-size: 21px; font-weight: 700; }
        .welcome .date { color: var(--text2); font-size: 13px; margin-top: 6px; }

        .welcome .act { display: flex; gap: 8px; }
        .home-refresh { display: flex; align-items: center; gap: 7px; }
        .home-refresh-time {
            color: var(--text2); font-size: 11px; white-space: nowrap;
        }
        .ai-command {
            display: flex; align-items: center; gap: 8px; margin-top: 18px;
            padding: 6px 6px 6px 14px; border: 1px solid #c7d2fe; border-radius: 14px;
            background: linear-gradient(135deg, rgba(238,242,255,.95), rgba(245,243,255,.9));
            box-shadow: 0 7px 22px rgba(79,70,229,.08);
        }
        .ai-command:focus-within {
            border-color: var(--primary);
            box-shadow: 0 8px 26px rgba(79,70,229,.16);
        }
        .ai-command-icon { flex: none; font-size: 17px; }
        .ai-command input {
            flex: 1; min-width: 0; border: none; outline: none; background: transparent;
            color: var(--text); font-size: 14px; padding: 9px 2px;
        }
        .ai-command input::placeholder { color: var(--text2); }
        .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
        .stat {
            background: var(--card); border-radius: var(--radius); padding: 18px 18px 16px;
            box-shadow: var(--shadow); border: 1px solid rgba(226,232,240,.6);
        }
        .stat .label { font-size: 12px; color: var(--text2); display: flex; justify-content: space-between; align-items: center; }
        .stat .label .ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
        .stat .num { font-size: 26px; font-weight: 700; margin-top: 8px; }
        .stat .delta { font-size: 11px; color: var(--ui-success-readable, #047857); margin-top: 6px; }
        .stat .delta.down { color: var(--ui-danger-readable, #dc2626); }
        .quick-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
        .quick {
            background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px;
            text-align: center; cursor: pointer; transition: all .12s;
        }
        .quick:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(79,70,229,.12); }
        .quick .ic { width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
        .quick .nm { font-size: 12px; }
        /* ===== 门户视图（分类页签 + 图标卡片，对齐 CS「导航门户」的观感） ===== */
        .home-tabs { display: inline-flex; background: #eef2f7; border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; }
        .home-tabs button {
            border: none; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: 8px;
            font-size: 13px; color: var(--text2); font-weight: 500; transition: all .12s;
        }
        .home-tabs button.active { background: var(--ui-card, #fff); color: var(--ui-primary-readable, var(--primary)); font-weight: 700; box-shadow: 0 1px 4px rgba(15,23,42,.10); }
        .portal-view { margin-top: 16px; }
        .portal-view .portal-tab.active { background: var(--portal-accent, var(--primary)); border-color: var(--portal-accent, var(--primary)); }
        .portal-view .portal-card:hover { border-color: var(--portal-accent, var(--primary)); }
        .portal-view .portal-card .pc-ic { color: var(--portal-accent, #4338ca); }
        .portal-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
        .portal-tab {
            display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
            background: var(--card); cursor: pointer; padding: 8px 16px; border-radius: 999px;
            font-size: 13px; color: var(--text); transition: all .12s;
        }
        .portal-tab:hover { border-color: var(--primary); transform: translateY(-1px); }
        .portal-tab.active { background: var(--primary); border-color: var(--primary); color: var(--ui-primary-text, #fff); font-weight: 600; }
        .portal-tab .ic { font-size: 15px; }
        .portal-tab .cnt { font-size: 11px; opacity: .7; }
        .portal-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); margin: 12px 0 0; flex-wrap: wrap; }
        .portal-crumbs a { color: var(--ui-primary-readable, var(--primary)); cursor: pointer; text-decoration: none; }
        .portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 12px; }
        .portal-card {
            background: var(--card); border: 1px solid var(--border); border-radius: 14px;
            padding: 18px 10px 14px; text-align: center; cursor: pointer; transition: all .14s;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 8px; min-height: 118px;
        }
        .portal-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(79,70,229,.14); }
        .portal-card .pc-ic {
            width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
            font-size: 22px; background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4338ca;
        }
        .portal-card .pc-nm { font-size: 13px; font-weight: 600; line-height: 1.35; word-break: break-all; }
        .portal-card .pc-sub { font-size: 11px; color: var(--text2); }
        .portal-hint { text-align: center; color: var(--text2); font-size: 13px; padding: 44px 16px; }
        @media (max-width: 640px) {
            .portal-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
            .portal-card { min-height: 104px; padding: 14px 6px 12px; }
        }
        .grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-top: 14px; }
        .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(226,232,240,.6); padding: 18px; }
        .card h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .card h3 .more { margin-left: auto; font-size: 12px; color: var(--text2); font-weight: 400; }
        /* ===== 自定义仪表盘（应用级组合布局） ===== */
        .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 18px; }
        .dash-block {
            background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
            border: 1px solid rgba(226,232,240,.6); padding: 14px; min-width: 0;
        }
        .dash-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .dash-chart-title { font-size: 13px; }
        .dash-chart { height: 240px; }
        .dash-block-err {
            color:var(--ui-danger-readable,var(--danger)); background:var(--ui-danger-soft,#fef2f2); border: 1px solid #fecaca;
            border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-top: 8px;
        }
        .dash-kpi { display: flex; flex-direction: column; justify-content: center; min-height: 150px; text-align: center; }
        .dash-kpi-label { font-size: 13px; color: var(--text2); }
        .dash-kpi-num { font-size: 34px; font-weight: 700; margin: 6px 0 2px; }
        .dash-kpi-sub { font-size: 11px; color: var(--text2); }
        .dash-block.span-3 { grid-column: span 3; }
        .dash-block.span-4 { grid-column: span 4; }
        .dash-block.span-6 { grid-column: span 6; }
        .dash-block.span-8 { grid-column: span 8; }
        .dash-block.span-12 { grid-column: span 12; }
        @media (max-width: 900px) {
            .dash-grid { grid-template-columns: 1fr; }
            .dash-block.span-3, .dash-block.span-4, .dash-block.span-6,
            .dash-block.span-8, .dash-block.span-12 { grid-column: span 1; }
        }
        .chart-ph {
            height: 220px; border-radius: 10px;
            background:
                repeating-linear-gradient(0deg, transparent 0 38px, #eef2f7 38px 39px),
                repeating-linear-gradient(90deg, transparent 0 48px, #eef2f7 48px 49px),
                linear-gradient(180deg, #f8fafc, #f1f5f9);
            display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 13px;
        }
        .todo-list { display: grid; gap: 9px; }
        .todo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--ui-surface-alt, var(--bg)); color: var(--ui-text, var(--text)); border: 1px solid var(--border); font-size: 13px; }
        .todo .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
        .todo .t { flex: 1; }
        .todo .t .name { font-weight: 600; }
        .todo .t .time { color: var(--text2); font-size: 11px; margin-top: 2px; }
        .todo .tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; flex: none; }
        @media (max-width: 1080px) {
            .stat-row { grid-template-columns: repeat(2, 1fr); }
            .grid-2 { grid-template-columns: 1fr; }
            .quick-row { grid-template-columns: repeat(3, 1fr); }
        }

        /* 双语标注：译名小字灰显，两行模式下换行 */
        .bl-annot { display:inline-block; white-space:normal; font-size:0.82em; color:#6b7280; margin-left:2px; vertical-align:top; }
        .bl-annot.bl-block { display:block; margin-left:0; margin-top:1px; line-height:1.2; }
        .bl-below { position:absolute; left:0; top:calc(100% - 4px); white-space:nowrap; width:max-content; max-width:none; font-size:0.82em; color:#6b7280; line-height:1.3; z-index:1; }
        .flow-label { white-space: pre-line; }
        /* REF-20261020-01 F6：流式分组卡片（CS 的 TPanel/TGroupBox 走 container 卡片）。 */
        .flow-sec-card {
            background: var(--ui-field, var(--card)); border: 1px solid var(--border); border-radius: 10px;
            padding: 10px 12px; margin-bottom: 10px;
            box-shadow: 0 1px 2px rgba(15,23,42,.05);
        }
        /* F6：Web 流式嵌套分组（panel）——子卡片缩进、虚线边框；CS 不读此布局。 */
        .flow-sec-card.flow-nested-card {
            border-style: dashed; border-color: #bfdbfe; background: #f8fbff;
            padding: 8px 10px; margin-bottom: 8px;
        }
        .flow-nested-card .flow-sec-head {
            margin: 4px 0 6px !important; padding: 5px 10px !important;
            background: linear-gradient(135deg,#dbeafe,#eff6ff) !important;
        }
        /* 2026-10-20（REF-20261020-01 F7）：<768px 流式布局强制单列；>=768 保持 12 栅格。 */
        @media (max-width: 767px) {
            .form-grid > .fg { flex: 1 1 100% !important; min-width: 0 !important; }
        }
        /* ===== 移动端打磨：竖屏单列 / 触摸目标 / 全屏弹窗 / 审批操作条 ===== */
        html { touch-action: manipulation; }
        @media (max-width: 640px) {
            .form-grid > .fg { flex: 1 1 100% !important; min-width: 0 !important; }
            .fg input, .fg select, .fg textarea { min-height: 38px; font-size: 14px; }
            .modal-box { width: 100vw !important; max-width: 100vw !important; }
            .wf-actions button { flex: 1; min-height: 44px; font-size: 14px; }
        }
        @media (max-width: 900px) {
            .mb-body .btn:not(.help-btn) { min-height: 34px; }
        }
        /* A4：数据加载骨架屏 */
        .skeleton-row {
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
            background-size: 400% 100%;
            animation: sk-shimmer 1.4s ease infinite;
        }
        @keyframes sk-shimmer {
            0% { background-position: 100% 0; }
            100% { background-position: 0 0; }
        }
        /* 表单直接签名：竖屏保留大画布，可选全屏横屏；旋转时由 core.js 重绘已有笔画。 */
        .signature-panel {
            width: min(780px, 94vw);
            max-width: 780px;
            max-height: 92dvh;
            overflow: hidden;
        }
        .signature-panel .mb-head { flex-wrap: wrap; }
        .signature-panel-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 9px;
            padding: 12px 14px max(12px, env(safe-area-inset-bottom));
        }
        .signature-tip {
            margin: 0;
            font-size: 12px;
            line-height: 1.55;
            color: var(--text2);
        }
        .signature-canvas {
            display: block;
            width: 100%;
            height: clamp(190px, 32dvh, 320px);
            min-height: 190px;
            border: 1px dashed #94a3b8;
            border-radius: 8px;
            background: var(--ui-field, var(--card));
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            cursor: crosshair;
        }
        .signature-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        .signature-panel:fullscreen,
        .signature-panel:-webkit-full-screen {
            width: 100vw;
            max-width: none;
            height: 100dvh;
            max-height: 100dvh;
            border-radius: 0;
        }
        @media (max-width: 900px) {
            .signature-panel {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
            }
            .signature-panel-body {
                padding: 10px 12px max(10px, env(safe-area-inset-bottom));
            }
            .signature-canvas {
                flex: 1 1 auto;
                height: auto;
                min-height: 280px;
            }
        }
        @media (orientation: landscape) and (max-height: 560px) {
            .signature-panel {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
            }
            .signature-panel-body {
                gap: 6px;
                padding: 6px 10px max(6px, env(safe-area-inset-bottom));
            }
            .signature-tip { display: none; }
            .signature-canvas {
                flex: 1 1 auto;
                height: auto;
                min-height: 180px;
            }
            .signature-actions { margin-top: 0; }
        }