.blinking-cursor {
            display: inline-block;
            width: 8px;
            height: 1.2em;
            background-color: #3b82f6; /* 蓝色光标 */
            animation: blink 1s step-end infinite;
            margin-left: 2px;
        }
        @keyframes blink {
            from, to { background-color: transparent }
            50% { background-color: #3b82f6; }
        }
        .dark .blinking-cursor {
            background-color: #60a5fa; /* 深色模式下的蓝色光标 */
        }
        
       
        :root {
            --toast-bg: #333;
            --toast-color: #fff;
        }

        body {
            font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        .custom-input,
        .custom-select {
            background-color: #f9fafb;
            border: 1px solid #d1d5db;
            color: #111827;
        }

        .dark .custom-input,
        .dark .custom-select {
            background-color: #374151;
            border: 1px solid #4b5563;
            color: #f9fafb;
        }

        .modal,
        .page {
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        /* Keep long dialogs usable on small/mobile viewports. The title and
           actions stay visible while only the dialog body scrolls. */
        .viewport-modal-panel {
            max-height: calc(100vh - 32px);
            max-height: calc(100dvh - 32px);
            min-height: 0;
            overflow: hidden;
        }

        .viewport-modal-header,
        .viewport-modal-footer {
            flex: 0 0 auto;
        }

        .viewport-modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .viewport-modal-close {
            width: 44px;
            height: 44px;
            min-width: 44px;
            display: grid;
            place-items: center;
            border-radius: 0.5rem;
        }

        /* The recycle bin must always present an obvious, reachable exit. */
        #recycle-bin-modal {
            z-index: 90;
        }

        #recycle-bin-modal .viewport-modal-header {
            position: relative;
            z-index: 2;
            background: #fff;
        }

        #recycle-bin-modal .recycle-bin-close-icon {
            border: 1px solid #d1d5db;
            background: #f3f4f6;
            font-weight: 700;
            cursor: pointer;
        }

        #recycle-bin-modal .recycle-bin-close-icon:hover {
            background: #e5e7eb;
        }

        #recycle-bin-modal .recycle-bin-close-icon:focus-visible,
        #recycle-bin-modal #recycle-bin-done-btn:focus-visible {
            outline: 3px solid rgba(59, 130, 246, 0.35);
            outline-offset: 2px;
        }

        #recycle-bin-modal .recycle-bin-modal-footer {
            position: relative;
            z-index: 2;
            background: #fff;
        }

        .dark #recycle-bin-modal .viewport-modal-header,
        .dark #recycle-bin-modal .recycle-bin-modal-footer {
            background: #1f2937;
        }

        .dark #recycle-bin-modal .recycle-bin-close-icon {
            border-color: #4b5563;
            background: #374151;
        }

        .dark #recycle-bin-modal .recycle-bin-close-icon:hover {
            background: #4b5563;
        }

        .viewport-modal-body thead {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .history-list-modal-shell {
            height: 100vh;
            height: 100dvh;
            min-height: 0;
        }

        @media (max-width: 767px) {
            .viewport-modal {
                padding: 8px !important;
            }

            .viewport-modal-panel {
                max-height: calc(100vh - 16px);
                max-height: calc(100dvh - 16px);
            }

            .viewport-modal-header {
                min-height: 54px;
                padding: 8px 12px !important;
            }

            .viewport-modal-footer {
                padding: 8px 12px !important;
            }

            /* The order editor is a full-height mobile sheet. This keeps its
               title and actions visible while the form alone scrolls. */
            #add-order-modal {
                padding: 0 !important;
                align-items: stretch !important;
            }

            #add-order-modal > .viewport-modal-panel {
                width: 100%;
                max-width: none;
                height: 100vh;
                height: 100dvh;
                max-height: 100vh;
                max-height: 100dvh;
                border: 0;
                border-radius: 0 !important;
            }

            #add-order-modal .viewport-modal-header {
                min-height: 58px;
                padding: 12px 16px !important;
                display: flex;
                align-items: center;
            }

            #add-order-modal .viewport-modal-header h3 {
                font-size: 18px;
                line-height: 1.35;
            }

            #add-order-form-modal {
                padding: 14px 16px !important;
                overscroll-behavior-y: contain;
            }

            #add-order-form-modal.space-y-5 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 12px;
            }

            #add-order-form-modal .grid {
                gap: 12px;
            }

            #add-order-form-modal label {
                margin-bottom: 5px;
                font-size: 13px;
                line-height: 1.3;
            }

            #add-order-form-modal input {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                padding: 9px 11px !important;
                font-size: 16px;
                line-height: 1.25;
            }

            #add-order-modal .viewport-modal-footer {
                min-height: 64px;
                padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
                border-top: 1px solid #e5e7eb;
                gap: 8px;
                background: #fff;
            }

            #add-order-modal .viewport-modal-footer button {
                min-width: 0;
                min-height: 44px;
                padding: 8px 12px !important;
                flex: 1 1 0;
                font-size: 15px;
                white-space: nowrap;
            }
        }

        .order-item:hover {
            background-color: #f9fafb;
        }

        .dark .order-item:hover {
            background-color: #1f2937;
        }

        .horizontal-scrollbar::-webkit-scrollbar {
            height: 8px;
        }

        .horizontal-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .dark .horizontal-scrollbar::-webkit-scrollbar-track {
            background: #2d3748;
        }

        .horizontal-scrollbar::-webkit-scrollbar-thumb {
            background: #c5c5c5;
            border-radius: 10px;
        }

        .dark .horizontal-scrollbar::-webkit-scrollbar-thumb {
            background: #4a5568;
        }

        .sortable-header {
            cursor: pointer;
            user-select: none;
        }

        .sortable-header:hover {
            background-color: #f9fafb;
        }

        .dark .sortable-header:hover {
            background-color: #1f2937;
        }

        #toast-container {
            position: fixed;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px));
            left: 50%;
            transform: translateX(-50%);
            width: max-content;
            max-width: min(520px, calc(100% - 32px));
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: var(--toast-bg);
            color: var(--toast-color);
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            box-sizing: border-box;
            max-width: 100%;
            overflow-wrap: anywhere;
            line-height: 1.5;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease;
            font-size: 14px;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        .toast-message { min-width: 0; }

        .toast-close {
            flex: 0 0 36px;
            width: 36px;
            height: 36px;
            margin: -6px -10px -6px 0;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: inherit;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            pointer-events: auto;
        }

        .toast-close:hover { background: rgba(255, 255, 255, 0.15); }
        .toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

        @media (max-width: 640px) {
            #toast-container {
                bottom: calc(16px + env(safe-area-inset-bottom, 0px));
                max-width: calc(100% - 24px);
                gap: 8px;
            }

            .toast { padding: 10px 14px; }
            .toast-close { flex-basis: 44px; width: 44px; height: 44px; margin: -8px -8px -8px 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .toast { transition: none; transform: none; }
        }

        .process-admin-item {
            cursor: move;
            transition: background-color 0.2s;
        }

        .process-admin-item.dragging {
            opacity: 0.5;
            background-color: #e0e7ff;
        }

        .dark .process-admin-item.dragging {
            background-color: #312e81;
        }

        .process-card {
            position: relative;
        }

        .drag-handle {
            position: absolute;
            top: 12px;
            left: 12px;
            cursor: move;
            color: #9ca3af;
            z-index: 10;
        }

        .dark .drag-handle {
            color: #6b7280;
        }

        .process-card.card-dragging {
            opacity: 0.4;
            background: #d1d5db;
        }

        .dark .process-card.card-dragging {
            background: #4b5563;
        }

        #connection-status {
            position: fixed;
            bottom: 10px;
            left: 10px;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            z-index: 10000;
            transition: background-color 0.3s, color 0.3s;
        }
        /* --- 新增：加粗且明显的水平滚动条样式 --- */
        .thick-scrollbar::-webkit-scrollbar {
            height: 16px; /* 增加高度，让它更容易被点中 */
        }
        .thick-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 8px;
        }
        .thick-scrollbar::-webkit-scrollbar-thumb {
            background-color: #9ca3af; /* 明显的灰色 */
            border-radius: 8px;
            border: 3px solid #f1f1f1; /*以此制造一点间距感 */
        }
        .thick-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: #6b7280; /* 悬停时变深 */
        }
        
        /* 顶部伪滚动条容器 */
        #fake-top-scroll-container {
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            margin-bottom: 5px; /* 与下方内容隔开一点 */
        }
        #fake-top-scroll-content {
            height: 1px; /* 内容只需1像素高，用来撑开宽度 */
        }

        .status-connected {
            background-color: #10b981;
            color: white;
        }

        .status-disconnected {
            background-color: #ef4444;
            color: white;
        }

        .status-connecting {
            background-color: #f59e0b;
            color: white;
        }
        #ai-analysis-content .prose {
            font-size: 1.15rem; /* 整体基础字号加大 */
            line-height: 1.7;  /* 增加行高，更易读 */
        }
        #ai-analysis-content .prose h1,
        #ai-analysis-content .prose h2,
        #ai-analysis-content .prose h3 {
            font-size: 1.5rem !important; /* 将所有标题（包括风险点）都放大并统一字号 */
            margin-bottom: 0.75em !important;
        }
        #ai-analysis-content .prose ul li {
            font-size: 1.2rem; /* 放大风险点的具体描述 */
            margin-top: 0.5em;
        }
        /* =============================================================== */
        /* == 新增：针对手机端优化AI弹窗字体的响应式代码 == */
        /* =============================================================== */
        @media (max-width: 768px) {
            #ai-analysis-content .prose {
                font-size: 1rem; /* 在手机上，将基础字号恢复为正常大小 */
            }
            #ai-analysis-content .prose h1,
            #ai-analysis-content .prose h2,
            #ai-analysis-content .prose h3 {
                font-size: 1.1rem !important; /* 手机上的标题也相应缩小 */
            }
            #ai-analysis-content .prose ul li {
                font-size: 1rem; /* 手机上的列表项文字也恢复正常 */
            }
        }
        /* 针对日期输入的紧凑优化 */
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-calendar-picker-indicator {
            /* 稍微缩小日历图标，或者调整间距 */
            transform: scale(0.8); 
            margin-left: -5px;
            cursor: pointer;
        }
        .custom-input {
            /* 确保输入框文字在手机上不被截断 */
            min-width: 0; 
        }
                /* === 新增：在移动端尝试隐藏日期输入框的年份 === */

/* Unified account management */
.account-help { margin: 0 0 14px; font-size: 13px; color: #64748b; }
.account-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0; }
.account-filters label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.account-filters select { padding: 8px; border-radius: 8px; max-width: 230px; }
.account-filters button, .account-filters a { font-size: 13px; }
.account-node-summary { min-width: 170px; max-width: 300px; overflow-wrap: anywhere; }
.account-section-title { font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; }
#account-nodes-modal { z-index: 10050; padding: 16px; position: fixed; inset: 0; background: rgb(15 23 42 / 48%); }
.account-nodes-panel { padding: 24px; width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; gap: 16px; }
.account-node-options { min-height: 0; overflow: auto; display: grid; gap: 8px; }
.account-node-options label { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dbe3ed; border-radius: 8px; cursor: pointer; }
.account-node-options input { flex: 0 0 auto; width: 18px; height: 18px; }
.account-node-options .account-focused-node { border-color: #3b82f6; }
.account-node-actions { display: flex; justify-content: flex-end; gap: 12px; }
.account-node-actions button { padding: 9px 18px; }
#account-nodes-error { color: #dc2626; font-size: 13px; }
.account-nodes-open { overflow: hidden; }
@media (max-width: 600px) { .account-filters label { width: 100%; } .account-filters select { flex: 1; max-width: 100%; min-width: 0; } }
@media (max-width: 767px) {
    #tab-content-employees table, #employees-list { display: block; width: 100%; }
    #tab-content-employees thead { display: none; }
    #employees-list tr { display: block; padding: 14px; border-bottom: 1px solid #e2e8f0; }
    #employees-list td { display: flex; gap: 12px; padding: 7px 0; min-width: 0; max-width: none; overflow-wrap: anywhere; }
    #employees-list td::before { content: attr(data-label); flex: 0 0 92px; font-weight: 500; color: #64748b; }
    #employees-list td:last-child { flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 12px; text-align: left; }
    #employees-list td:last-child::before { display: none; }
    #employees-list td:last-child button { margin: 0; white-space: nowrap; min-height: 32px; }
}