@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
            --brand-purple: #6C5CE7;
            --accent: #6C5CE7;
            --bg-dark: #0D0D0D;
            --bg-card: #141414;
            --border-color: #2A2A2A;
            --text-main: #E8E8E8;
            --text-muted: #8B8B8B;
        }

html {
    background-color: var(--bg-dark);
}

body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            overflow: hidden;
            height: 100vh;
        }

body.workbench-loading {
            visibility: hidden;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #444;
        }

        /* 项目下拉菜单：使用透明轨道，避免系统默认的白色滚动条底色。 */
        #project-list {
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
        }
        #project-list::-webkit-scrollbar {
            width: 6px;
        }
        #project-list::-webkit-scrollbar-track,
        #project-list::-webkit-scrollbar-track-piece,
        #project-list::-webkit-scrollbar-corner {
            background: transparent;
        }
        #project-list::-webkit-scrollbar-thumb {
            background: #3A3A3A;
            border-radius: 999px;
        }
        #project-list::-webkit-scrollbar-thumb:hover {
            background: #5A5A5A;
        }
        .template-library-scrollbar {
            color-scheme: dark;
            /* 不预留系统滚动条沟槽：内置浏览器会把 stable 沟槽绘制成白色宽轨道。 */
            scrollbar-gutter: auto;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
            background-color: #151515;
        }
        .template-library-scrollbar::-webkit-scrollbar {
            background: transparent;
            width: 6px;
            height: 6px;
        }
        .template-library-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .template-library-scrollbar::-webkit-scrollbar-track-piece {
            background: transparent;
        }
        .template-library-scrollbar::-webkit-scrollbar-thumb {
            background: #3A3A3A;
            border-radius: 999px;
        }
        .template-library-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #5A5A5A !important;
            box-shadow: none !important;
        }
        .template-library-scrollbar::-webkit-scrollbar-corner {
            background: transparent;
        }

        .resizer-h {
            cursor: row-resize;
            height: 4px;
            background: transparent;
            transition: background 0.2s;
            position: relative;
            z-index: 5;
        }
        .resizer-h:hover {
            background: var(--brand-purple);
        }

        .resizer-v {
            cursor: col-resize;
            width: 3px;
            flex: 0 0 3px;
            background: transparent;
            transition: background 0.2s;
            touch-action: none;
            position: relative;
            z-index: 5;
        }
        .resizer-v:hover {
            background: transparent;
        }
        .resizer-v.is-resizing {
            background: transparent;
        }
        .resizer-v::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 3px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--border-color);
        }
        .resizer-v:hover::after,
        .resizer-v.is-resizing::after {
            background: var(--brand-purple);
        }
        .resizer-v::before {
            content: "";
            position: absolute;
            inset: 0 -7px;
        }

        .repo-kind-switcher {
            width: 100%;
            margin: 6px 0;
            padding: 2px;
            border-radius: 8px;
            background: #1a1a1a;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2px;
        }

        .repo-kind-switcher__button {
            height: 28px;
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 12px;
            transition: color 0.16s ease, background 0.16s ease;
        }

        .repo-kind-switcher__button:hover:not(:disabled) {
            color: #fff;
        }

        .repo-kind-switcher__button.active {
            color: #fff;
            background: #2a2a2a;
        }

        .repo-kind-switcher__button:disabled {
            cursor: not-allowed;
        }

        .repo-search-icon {
            color: rgba(139, 139, 139, 0.58);
        }

        .repo-search-input {
            height: 32px;
            border-color: transparent !important;
            color: var(--text-main);
        }

        .repo-search-input:focus {
            border-color: transparent !important;
            outline: none;
            box-shadow: none;
        }

        .repo-search-input::placeholder {
            color: rgba(139, 139, 139, 0.58);
            opacity: 1;
        }

        .repo-warehouse-strip {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .repo-warehouse-nav {
            position: relative;
            min-width: 0;
            flex: 1 1 auto;
            border-radius: 6px;
        }

        .repo-warehouse-nav::before,
        .repo-warehouse-nav::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 4px;
            z-index: 1;
            width: 32px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.16s ease;
        }

        .repo-warehouse-nav::before {
            left: 0;
            background: linear-gradient(90deg, #0d0d0d 28%, rgba(13, 13, 13, 0));
        }

        .repo-warehouse-nav::after {
            right: 0;
            background: linear-gradient(270deg, #0d0d0d 28%, rgba(13, 13, 13, 0));
        }

        .repo-warehouse-nav.has-overflow:not(.at-start)::before,
        .repo-warehouse-nav.has-overflow:not(.at-end)::after {
            opacity: 1;
        }

        .repo-warehouse-row {
            min-width: 0;
            min-height: 40px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 2px 4px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
        }

        .repo-warehouse-row::-webkit-scrollbar {
            display: none;
        }

        .repo-warehouse-arrow {
            position: absolute;
            top: 4px;
            z-index: 2;
            width: 22px;
            height: 30px;
            border: 0;
            outline: none;
            color: #fff;
            opacity: 0;
            pointer-events: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.16s ease, color 0.16s ease;
        }

        .repo-warehouse-arrow--left {
            left: 0;
        }

        .repo-warehouse-arrow--right {
            right: 0;
        }

        .repo-warehouse-nav.has-overflow.is-hovering .repo-warehouse-arrow,
        .repo-warehouse-nav.has-overflow:hover .repo-warehouse-arrow,
        .repo-warehouse-nav.has-overflow:focus-within .repo-warehouse-arrow {
            opacity: 0.78;
            pointer-events: auto;
        }

        .repo-warehouse-nav.has-overflow.is-hovering .repo-warehouse-arrow:hover,
        .repo-warehouse-nav.has-overflow:hover .repo-warehouse-arrow:hover,
        .repo-warehouse-nav.has-overflow:focus-within .repo-warehouse-arrow:hover {
            color: var(--brand-purple);
            opacity: 1;
        }

        .repo-warehouse-arrow:disabled {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .repo-warehouse-tab {
            position: relative;
            height: 32px;
            max-width: 150px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            scroll-snap-align: start;
            border-radius: 6px;
            color: var(--text-muted);
            transition: color 0.16s ease, background 0.16s ease;
        }

        .repo-warehouse-tab:hover {
            color: #fff;
        }

        .repo-warehouse-tab.active {
            color: var(--brand-purple);
        }

        #repo-tree-area {
            border-right: 0 !important;
        }

        .repo-warehouse-tab.active::after {
            content: "";
            position: absolute;
            left: 2px;
            bottom: 0;
            width: 18px;
            height: 1px;
            border-radius: 999px;
            background: var(--brand-purple);
        }

        .repo-warehouse-tab__select {
            min-width: 0;
            height: 100%;
            padding: 0 2px;
            outline: none;
            color: inherit;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            white-space: nowrap;
        }

        .repo-warehouse-tab__name {
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .repo-warehouse-tab__menu {
            position: absolute;
            top: 4px;
            right: -10px;
            z-index: 1;
            width: 12px;
            height: 24px;
            outline: none;
            color: inherit;
            opacity: 0;
            pointer-events: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: opacity 0.16s ease;
        }

        .repo-warehouse-tab:hover .repo-warehouse-tab__menu,
        .repo-warehouse-tab:focus-within .repo-warehouse-tab__menu {
            opacity: 1;
            pointer-events: auto;
        }

        .repo-create-trigger {
            height: 36px;
            flex: 0 0 auto;
            padding: 0 2px 4px;
            outline: none;
            border: 0;
            border-radius: 4px;
            color: var(--brand-purple);
            background: transparent;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            line-height: 1;
            white-space: nowrap;
            transition: color 0.16s ease, opacity 0.16s ease;
        }

        .repo-create-trigger iconify-icon {
            width: 14px;
            height: 14px;
            font-size: 14px;
        }

        .repo-create-trigger:hover {
            color: #fff;
        }

        .repo-create-trigger:focus-visible,
        .repo-create-trigger[aria-expanded="true"] {
            color: #fff;
        }

        .repo-action-popover {
            position: fixed;
            z-index: 100;
            min-width: 148px;
            padding: 6px;
            border: 1px solid #303030;
            border-radius: 9px;
            background: #191919;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
        }

        .repo-action-popover__item {
            width: 100%;
            min-height: 34px;
            padding: 7px 9px;
            border-radius: 6px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 12px;
            text-align: left;
            transition: color 0.16s ease, background 0.16s ease;
        }

        .repo-action-popover__item:hover {
            color: #fff;
            background: #252525;
        }

        .repo-action-popover__item.danger {
            color: #f87171;
        }

        .repo-action-popover__divider {
            height: 1px;
            margin: 5px 4px;
            background: #2a2a2a;
        }

        .custom-tree-row {
            min-height: 30px;
        }

        .custom-tree-surface {
            position: relative;
            min-width: 0;
            min-height: 30px;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 6px;
            border-radius: 6px;
            transition: background 0.16s ease;
        }

        .custom-tree-row:hover .custom-tree-surface {
            background: #1F1F1F;
        }

        .custom-tree-row.active .custom-tree-surface {
            background: rgba(108, 92, 231, 0.15);
        }

        .custom-tree-row--drop-after .custom-tree-surface::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -4px;
            height: 2px;
            border-radius: 999px;
            background: var(--brand-purple);
            box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
        }

        .custom-tree-row--drop-inside .custom-tree-surface {
            background: rgba(108, 92, 231, 0.12);
            outline: 1px dashed rgba(108, 92, 231, 0.55);
            outline-offset: -1px;
        }

        .custom-tree-row .custom-tree-actions {
            opacity: 0;
            transition: opacity 0.16s ease;
        }

        .custom-tree-row:hover .custom-tree-actions,
        .custom-tree-row:focus-within .custom-tree-actions {
            opacity: 1;
        }

        .custom-tree-action {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            color: var(--text-muted);
        }

        .custom-tree-action:hover {
            color: #fff;
            background: #303030;
        }

        .custom-tree-action.danger:hover {
            color: #f87171;
        }

        .custom-tree-sortable-ghost {
            opacity: 1;
            min-height: 8px;
            background: transparent !important;
            pointer-events: none;
        }

        .custom-tree-sortable-ghost > .custom-tree-row {
            min-height: 8px;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }

        .custom-tree-sortable-ghost .custom-tree-surface {
            min-height: 2px;
            height: 2px;
            padding: 0;
            border-radius: 999px;
            background: var(--brand-purple) !important;
            box-shadow: 0 0 8px rgba(108, 92, 231, 0.45);
            outline: none;
        }

        .custom-tree-sortable-ghost .custom-tree-surface > * {
            display: none;
        }

        .custom-tree-sortable-chosen > .custom-tree-row .custom-tree-surface {
            background: transparent;
            outline: none;
        }

        .custom-tree-sortable-drag .custom-tree-surface,
        .custom-tree-sortable-fallback .custom-tree-surface {
            background: rgba(31, 31, 31, 0.96);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
        }

        .repository-form-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.66);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .repository-form-dialog {
            width: min(520px, 100%);
            max-height: min(720px, calc(100vh - 40px));
            overflow: hidden;
            border: 1px solid #333;
            border-radius: 16px;
            background: #181818;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
            /* 与项目维度区保持一致：透明轨道，只展示细滑块。 */
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
        }

        /* 标准弹窗分为固定标题、可滚动内容、固定操作区，避免表单内容穿过标题或按钮。 */
        .repository-form-dialog:not(.p-5) {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .repository-form-dialog__header,
        .repository-form-dialog__footer {
            position: relative;
            z-index: 2;
            flex: 0 0 auto;
            background: #181818;
        }

        .repository-form-dialog__body {
            min-height: 0;
            overflow-y: auto;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
        }

        .repository-form-dialog__body::-webkit-scrollbar,
        .ai-config-builtin-menu::-webkit-scrollbar {
            width: 6px;
        }

        .repository-form-dialog__body::-webkit-scrollbar-track,
        .repository-form-dialog__body::-webkit-scrollbar-track-piece,
        .repository-form-dialog__body::-webkit-scrollbar-corner,
        .ai-config-builtin-menu::-webkit-scrollbar-track,
        .ai-config-builtin-menu::-webkit-scrollbar-track-piece,
        .ai-config-builtin-menu::-webkit-scrollbar-corner {
            background: transparent;
        }

        .repository-form-dialog__body::-webkit-scrollbar-thumb,
        .ai-config-builtin-menu::-webkit-scrollbar-thumb {
            background: #3A3A3A;
            border-radius: 999px;
        }

        .repository-form-dialog__body::-webkit-scrollbar-thumb:hover,
        .ai-config-builtin-menu::-webkit-scrollbar-thumb:hover {
            background: #5A5A5A;
        }

        /* 所有新建/编辑弹窗的关闭按钮使用固定点击区，确保图标始终居中。 */
        .repository-form-dialog [data-close] {
            width: 36px;
            height: 36px;
            min-width: 36px;
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 36px;
            padding: 0;
            line-height: 0;
        }

        .repository-form-dialog [data-close] iconify-icon {
            display: block;
            font-size: 19px;
            line-height: 1;
        }

        .repository-form-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .repository-form-field label {
            color: var(--text-muted);
            font-size: 12px;
        }

        .repository-form-control {
            width: 100%;
            border: 1px solid #303030;
            border-radius: 9px;
            background: #101010;
            color: #fff;
            font-size: 13px;
            line-height: 1.5;
            padding: 9px 11px;
            outline: none;
            transition: border-color 0.16s ease;
        }

        .repository-form-control:focus {
            border-color: var(--brand-purple);
        }

        /* 智能文件夹筛选条件复用 AI 配置的自定义下拉菜单。 */
        .repository-form-select.ai-config-builtin-selector {
            width: 100%;
            margin: 0;
        }

        .repository-form-select .ai-config-builtin-select-trigger {
            height: 39px;
            padding: 0 12px;
            border-color: #303030;
            border-radius: 9px;
            background: #101010;
            font-size: 13px;
        }

        .repository-form-select .ai-config-builtin-menu {
            z-index: 20;
            max-height: 188px;
            overflow-y: auto;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
        }

        /* 下拉菜单脱离内容滚动区成为浮层，始终向下覆盖展示，不受弹窗边界限制。 */
        .repository-form-overlay .ai-config-builtin-menu.repository-floating-select-menu {
            position: absolute;
            right: auto;
            bottom: auto;
            z-index: 60;
            box-sizing: border-box;
            overflow-y: auto;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: #3A3A3A transparent;
        }

        .project-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }
        .project-label {
            color: #9CA3AF;
            font-size: 13px;
        }
        .project-dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.15s;
            user-select: none;
        }
        .project-dropdown-trigger:hover {
            background-color: rgba(255,255,255,0.08);
        }
        .project-dropdown-trigger:active {
            background-color: rgba(255,255,255,0.12);
        }
        .current-project-name {
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 600;
        }
        .dropdown-arrow {
            transition: transform 0.2s;
        }
        .dropdown-arrow.open {
            transform: rotate(180deg);
        }
        .project-selector-wrapper {
            position: relative;
        }

        /* 空状态样式 */
        .empty-state .tag-capsule,
        .empty-state .dim-add-tag-btn,
        .empty-state .dim-add-dim-btn,
        .empty-state .dim-label-text,
        .empty-state .drag-handle,
        .empty-state #save-combination-btn,
        .empty-state #ai-brainstorm-btn {
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
        }

        body.demo-empty-state main {
            filter: grayscale(1) brightness(0.62);
            opacity: 0.66;
            pointer-events: none;
            user-select: none;
        }

        body.demo-empty-state aside {
            opacity: 0.58;
            pointer-events: none;
            user-select: none;
        }

        body.demo-empty-state aside,
        body.demo-empty-state aside * {
            color: var(--text-muted) !important;
            filter: none !important;
        }

        body.demo-empty-state aside * {
            cursor: not-allowed;
        }

        .empty-state-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 12px;
            color: var(--text-muted);
            text-align: center;
            user-select: none;
        }

        .empty-state-card--compact {
            width: 100%;
            min-height: 100%;
            padding: 8px 10px;
        }

        /* 仓库为空时，图标与说明在各自容器中垂直居中。 */
        #file-tree > .empty-state-card,
        #cn-content > .empty-state-card,
        #en-content > .empty-state-card {
            box-sizing: border-box;
            min-height: 100%;
        }

        /* 当前组合为空时，仅在列表可用区域内居中，不影响顶部操作与底部按钮。 */
        #combinations-list.combinations-list--empty {
            align-items: center;
            justify-content: center;
        }

        #combinations-list.combinations-list--empty > .empty-state-card {
            box-sizing: border-box;
            min-height: 100%;
        }

        #file-tree > .custom-tree-root {
            min-height: 100%;
        }

        #file-tree > .custom-tree-root > .empty-state-card {
            flex: 1 1 auto;
            min-height: 0;
        }

        .empty-state-card__icon {
            font-size: 28px;
            line-height: 1;
            color: var(--text-muted);
            opacity: 0.42;
        }

        .empty-state-card__desc {
            font-size: 12px;
            line-height: 1.55;
            color: var(--text-muted);
            max-width: 300px;
            opacity: 0.42;
        }

        body.project-creating-state aside,
        body.project-creating-state aside *,
        body.project-creating-state main a,
        body.project-creating-state main button,
        body.project-creating-state main [onclick],
        body.project-creating-state .tag-capsule,
        body.project-creating-state .dim-add-tag-btn,
        body.project-creating-state .dim-add-dim-btn,
        body.project-creating-state .drag-handle,
        body.project-creating-state .dim-label-text,
        body.project-creating-state .file-tree-item {
            opacity: 0.42;
            filter: grayscale(1) brightness(0.92);
            cursor: not-allowed;
            pointer-events: none;
            user-select: none;
        }

        body.project-creating-state button:disabled {
            opacity: 0.42;
            filter: grayscale(1) brightness(0.92);
            cursor: not-allowed;
        }

        body.project-creating-state aside,
        body.project-creating-state aside * {
            color: var(--text-muted) !important;
            filter: grayscale(1) brightness(0.92) !important;
        }

        body.project-creating-state .project-selector-wrapper,
        body.project-creating-state .project-selector-wrapper *,
        body.project-creating-state .project-selector-wrapper *::before,
        body.project-creating-state .project-selector-wrapper *::after {
            opacity: 1;
            filter: none;
            cursor: pointer;
            pointer-events: auto;
            user-select: auto;
        }

        body.project-creating-state .project-selector-wrapper .project-dropdown-trigger,
        body.project-creating-state .project-selector-wrapper #project-dropdown-menu,
        body.project-creating-state .project-selector-wrapper #project-dropdown-menu *,
        body.project-creating-state .project-selector-wrapper #project-dropdown-container {
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto !important;
            cursor: pointer !important;
        }

        body.project-creating-state #project-dropdown-container,
        body.project-creating-state #project-dropdown-container *,
        body.project-creating-state #project-dropdown-container *::before,
        body.project-creating-state #project-dropdown-container *::after {
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto !important;
            cursor: pointer !important;
            user-select: auto !important;
        }

        body.project-creating-state #lower-container {
            opacity: 0.42;
            filter: grayscale(1) brightness(0.9);
            pointer-events: none;
            user-select: none;
        }

        body.project-creating-state #lower-container .template-btn-primary,
        body.project-creating-state #lower-container button,
        body.project-creating-state #lower-container input,
        body.project-creating-state #lower-container [onclick],
        body.project-creating-state #lower-container .file-tree-item,
        body.project-creating-state #lower-container .color-tag-wrapper,
        body.project-creating-state #lower-container .text-tag-wrapper {
            pointer-events: none;
            cursor: not-allowed;
        }

        /* Modal Guide Styles */
        .welcome-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            pointer-events: none;
        }
        .welcome-modal-overlay.hidden {
            display: none;
        }
        .welcome-modal {
            background: linear-gradient(135deg, #1E1B4B, #0F172A);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 16px;
            padding: 36px 40px;
            text-align: center;
            max-width: 420px;
            width: 90%;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            animation: modalFadeIn 0.3s ease-out;
            pointer-events: auto;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .welcome-modal-icon {
            font-size: 40px;
            margin-bottom: 12px;
        }
        .welcome-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #FFFFFF;
            margin-bottom: 8px;
        }
        .welcome-modal-desc {
            font-size: 14px;
            color: #9CA3AF;
            margin-bottom: 24px;
            line-height: 1.5;
        }
        .welcome-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .welcome-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
        }
        .welcome-btn-primary {
            background: #7C3AED;
            color: #FFFFFF;
        }
        .welcome-btn-primary:hover {
            background: #6D28D9;
        }
        .welcome-btn-secondary {
            background: rgba(255, 255, 255, 0.08);
            color: #D1D5DB;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        .welcome-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #FFFFFF;
        }

        .tag-capsule {
            position: relative;
            transition: all 0.2s;
            cursor: pointer;
        }
        .tag-note-btn {
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            position: absolute;
            top: -4px;
            right: -4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #2A2A2A;
            border: 1.5px solid rgba(255,255,255,0.3);
            transition: all 0.2s;
        }
        .tag-capsule:hover .tag-note-btn:not(.has-note) {
            display: inline-flex !important;
        }
        .tag-note-btn.has-note {
            display: inline-flex !important;
            background: rgba(108, 92, 231, 0.2);
            border-color: var(--brand-purple);
        }
        .tag-capsule.active .tag-note-btn.has-note {
            display: inline-flex !important;
            background: rgba(108, 92, 231, 0.3);
            border-color: white;
        }
        .tag-capsule.active .tag-note-btn:not(.has-note) {
            display: none !important;
        }
        .tag-capsule.active:hover .tag-note-btn:not(.has-note) {
            display: inline-flex !important;
        }
        .tag-note-popup {
            position: fixed;
            z-index: 999;
            background: #1A1A1A;
            border: 1px solid #333;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
            width: 280px;
        }
        .tag-capsule.active {
            background-color: var(--brand-purple);
            border-color: var(--brand-purple);
            color: white;
        }

        /* 维度标题与标签共享首行：标签只在剩余空间内自然折行，避免整组被推到下一行。 */
        #dimensions-list > [data-dim-id] > .sortable-tags {
            flex: 1 1 0%;
            min-width: 0;
        }

        .linear-gradient-bg {
            background: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%);
        }

        .context-menu {
            position: fixed;
            z-index: 1000;
            background: #1A1A1A;
            border: 1px solid #333;
            border-radius: 6px;
            padding: 4px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            min-width: 120px;
            display: none;
        }

        .context-menu-item {
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .context-menu-item:hover {
            background: #2A2A2A;
        }

        .context-menu {
            animation: fadeIn 0.15s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        /* 拖拽中的提示词条目 */
        .dragging-prompt {
            opacity: 0.4 !important;
        }
        /* 放置目标高亮 */
        .drop-target-active {
            transform: scale(1.25) !important;
            box-shadow: 0 0 12px rgba(108, 92, 231, 0.5) !important;
        }
        .text-drop-target-active {
            background: rgba(108, 92, 231, 0.25) !important;
            border-color: var(--brand-purple) !important;
            color: white !important;
        }
        /* 分类标记：左侧色块 */
        .prompt-category-color-bar {
            width: 4px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-right: 6px;
            align-self: stretch;
        }
        /* 分类标记：右侧文字标签 */
        .prompt-category-text-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 9px;
            background: #2A2A2A;
            color: #ccc;
            margin-left: 4px;
            flex-shrink: 0;
        }
        /* 分类计数角标 */
        .category-count-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 14px;
            height: 14px;
            border-radius: 7px;
            background: var(--brand-purple);
            color: white;
            font-size: 9px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
        }
        .color-tag-wrapper, .text-tag-wrapper {
            position: relative;
        }

        /* 拖拽目标高亮 - 颜色圆形和文字标签 */
        .color-tag-wrapper.drop-target-active .w-4.h-4.rounded-full,
        .text-tag-wrapper.drop-target-active {
            transform: scale(1.3);
            box-shadow: 0 0 12px rgba(108, 92, 231, 0.6);
            transition: all 0.15s ease;
        }

        input:focus {
            outline: none;
            border-color: var(--brand-purple);
        }

        /* Truncation styles for dimension/tag display labels */
        .dim-label-text {
            max-width: 6em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
        }
        .tag-label-text {
            max-width: 7em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
        }
        .tag-label-text[contenteditable="true"],
        .dim-label-text[contenteditable="true"] {
            outline: none;
            border-bottom: 1.5px solid var(--brand-purple);
            max-width: none;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            border-radius: 2px;
            padding: 0 2px;
        }

        .color-tag-active {
            position: relative;
            box-shadow: none;
            transform: none;
        }
        .color-tag-active::after {
            content: '';
            position: absolute;
            inset: -2px;
            border: 1px dashed rgba(255, 255, 255, 0.95);
            border-radius: 9999px;
            pointer-events: none;
        }
        .text-tag-active {
            background: var(--brand-purple) !important;
            color: white !important;
            border-color: var(--brand-purple) !important;
        }
        .text-tag-editing {
            background: #1A1A1A !important;
            color: var(--text-main) !important;
            border-color: #444 !important;
            box-shadow: none !important;
            transform: none !important;
        }
        .text-tag-editing .text-tag-label {
            outline: none !important;
            border-bottom: 1px solid rgba(255,255,255,0.35);
            border-radius: 0 !important;
            padding: 0 1px;
            color: var(--text-main) !important;
            background: transparent !important;
            white-space: normal;
        }
        .dim-label-editing,
        .tag-editing {
            background: #1A1A1A !important;
            color: var(--text-main) !important;
            border-color: #444 !important;
            box-shadow: none !important;
            transform: none !important;
        }
        .dim-label-editing .dim-label-text,
        .tag-editing .tag-label-text {
            outline: none !important;
            border-bottom: 1px solid rgba(255,255,255,0.35);
            border-radius: 0 !important;
            padding: 0 1px;
            color: var(--text-main) !important;
            background: transparent !important;
            white-space: normal;
        }
        /* 修复文字分类编辑时浏览器默认 focus 轮廓 */
        .text-tag-wrapper[contenteditable="true"] {
            outline: none !important;
            border-color: var(--brand-purple) !important;
        }
        .drag-handle {
            cursor: grab;
        }
        .drag-handle:active {
            cursor: grabbing;
        }

        /* Sortable.js drag styles */
        .sortable-ghost {
            opacity: 0.35;
            background: rgba(108, 92, 231, 0.12) !important;
            border: 1.5px dashed rgba(108, 92, 231, 0.5) !important;
            border-radius: 12px;
        }
        /* 维度整行拖拽的目标占位：保留灰色底，并强化紫色虚线边界。 */
        #dimensions-list > div.flex.items-center.sortable-ghost:not(.dim-add-dim-btn) {
            opacity: 1;
            background: rgba(255, 255, 255, 0.045) !important;
            border: 1px dashed #6E5EE1 !important;
            border-radius: 12px;
        }
        #dimensions-list > div.flex.items-center.sortable-ghost:not(.dim-add-dim-btn) > * {
            opacity: 0;
            pointer-events: none;
        }
        .sortable-ghost-tag {
            opacity: 0.3;
            background: rgba(108, 92, 231, 0.15) !important;
            border-radius: 999px;
        }
        .sortable-chosen {
            opacity: 0.85;
        }
        .sortable-drag {
            opacity: 0.95;
            transform: scale(1.02);
        }

        .color-tag-picker {
            --color-tag-picker-hue: 248;
            position: fixed;
            z-index: 100;
            width: 220px;
            padding: 10px;
            border: 1px solid #30303A;
            border-radius: 12px;
            background: #1A1A1E;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
        }
        .color-tag-picker__spectrum {
            position: relative;
            height: 132px;
            border-radius: 8px;
            background:
                linear-gradient(to top, #000, transparent),
                linear-gradient(to right, #fff, hsl(var(--color-tag-picker-hue) 100% 50%));
            cursor: crosshair;
            touch-action: none;
        }
        .color-tag-picker__spectrum-thumb {
            position: absolute;
            width: 14px;
            height: 14px;
            border: 2px solid #FFFFFF;
            border-radius: 999px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .color-tag-picker__hue-label {
            display: block;
            margin-top: 10px;
        }
        .color-tag-picker__hue {
            width: 100%;
            height: 8px;
            margin: 0;
            appearance: none;
            border-radius: 999px;
            background: linear-gradient(to right, #F44336, #FFEB3B, #4CAF50, #00BCD4, #3F51B5, #9C27B0, #F44336);
            cursor: pointer;
        }
        .color-tag-picker__hue::-webkit-slider-thumb {
            width: 14px;
            height: 14px;
            appearance: none;
            border: 2px solid #FFFFFF;
            border-radius: 999px;
            background: hsl(var(--color-tag-picker-hue) 100% 50%);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
        }
        .color-tag-picker__footer {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
        }
        .color-tag-picker__preview {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 6px;
        }
        .color-tag-picker__value {
            flex: 1;
            color: #B8BAC3;
            font-family: inherit;
            font-size: 12px;
        }
        .color-tag-picker__confirm {
            height: 30px;
            padding: 0 10px;
            border: 0;
            border-radius: 7px;
            background: #6E5EE1;
            color: #FFFFFF;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .color-tag-picker__confirm:hover {
            background: #7D6FED;
        }

        /* 标签文本截断 — 超过6字显示... */
        .tag-capsule span,
        .tag-inline-input {
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }

        /* 项目仓库文件树使用该选中背景；自定义仓库由 custom-tree-surface 单独绘制 */
        .file-tree-item.active:not(.custom-tree-row) {
            background: rgba(108, 92, 231, 0.15) !important;
        }

        .template-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s;
        }
        .template-card:hover {
            border-color: #6C5CE7;
            transform: translateY(-4px);
        }
        .template-btn-primary {
            background: #6C5CE7;
            transition: all 0.3s;
        }
        .template-btn-primary:hover {
            background: #5A4ED1;
            transform: none;
            box-shadow: none;
        }

        .template-cover-frame {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #1A1A1A;
            flex: 0 0 auto;
        }

        .template-cover-badge {
            position: absolute;
            left: 8px;
            top: 8px;
            bottom: auto;
            z-index: 2;
            padding: 2px 6px;
            border-radius: 4px;
            border: 0;
            background: rgba(0, 0, 0, 0.6);
            color: #9CA3AF;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 10px;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 0;
            pointer-events: none;
            backdrop-filter: none;
        }

        .template-cover-frame img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: top;
            display: block;
            opacity: 1 !important;
        }

        .template-search-input {
            color: var(--text-main);
        }

        .template-search-input::placeholder {
            color: rgba(139, 139, 139, 0.42);
            opacity: 1;
        }

        #template-cards-container.template-masonry {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
            align-items: start;
            overflow-x: hidden;
        }
        #template-cards-container.template-masonry .template-masonry-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 0;
        }
        #template-cards-container.template-masonry .template-card {
            display: flex;
            width: 100%;
            margin: 0;
        }
        #template-cards-container.template-masonry .template-cover-frame--modal {
            width: 100%;
            height: auto;
            display: block;
        }
        #template-cards-container.template-masonry .template-cover-frame img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: top;
            margin: 0;
        }
        #template-cards-container.template-masonry .template-cover-frame--long {
            width: 100%;
            height: auto !important;
            max-height: none !important;
            aspect-ratio: 9 / 16;
            display: block !important;
            overflow: visible;
            background: #151515;
        }
        #template-cards-container.template-masonry .template-cover-frame--long > img {
            position: absolute;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            object-fit: cover !important;
            object-position: top !important;
            border-radius: inherit;
        }
        .template-long-image-control {
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 4;
        }
        .template-long-image-indicator {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            padding: 5px 9px;
            background: rgba(12, 12, 14, 0.82);
            color: #F5F3FF;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            cursor: zoom-in;
        }
        .template-long-image-indicator:hover,
        .template-long-image-indicator:focus-visible {
            border-color: #8B7BFF;
            background: #332B69;
            outline: none;
        }
        .template-long-image-dialog {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: grid;
            place-items: center;
            padding: 24px;
        }
        .template-long-image-dialog__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(6px);
        }
        .template-long-image-dialog__panel {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            width: min(480px, calc(100vw - 48px));
            height: min(853px, calc(100vh - 48px));
            overflow: hidden;
            border: 1px solid rgba(139, 123, 255, 0.55);
            border-radius: 16px;
            background: #111114;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        }
        .template-long-image-dialog__header {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            color: #F5F3FF;
            font-size: 14px;
            font-weight: 600;
        }
        .template-long-image-dialog__header button {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #E5E7EB;
            cursor: pointer;
        }
        .template-long-image-dialog__header button svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 1.7;
        }
        .template-long-image-dialog__content {
            flex: 1;
            overflow: auto;
            padding: 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
        }
        .template-long-image-dialog__content::-webkit-scrollbar { width: 8px; }
        .template-long-image-dialog__content::-webkit-scrollbar-track { background: transparent; }
        .template-long-image-dialog__content::-webkit-scrollbar-thumb {
            border: 2px solid transparent;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.38);
            background-clip: padding-box;
        }
        .template-long-image-dialog__content img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        #template-cards-container.template-masonry .template-card p.h-\[60px\] {
            height: auto;
        }
        #template-cards-container.template-masonry .template-masonry-loading {
            grid-column: 1 / -1;
        }

        @media (max-width: 760px) {
            #template-cards-container.template-masonry {
                grid-template-columns: 1fr;
            }
        }

        #tutorial-side-trigger.tutorial-active {
            color: #fff;
        }

        /* --- 确认删除弹窗 --- */
        .delete-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        .delete-overlay.active {
            visibility: visible;
            opacity: 1;
        }
        .delete-dialog {
            background: #1A1A1A;
            border: 1px solid #333;
            border-radius: 12px;
            padding: 24px;
            width: 360px;
            max-width: 90vw;
            box-shadow: 0 16px 48px rgba(0,0,0,0.6);
        }
        .delete-dialog h3 {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 8px 0;
        }
        .delete-dialog p {
            font-size: 14px;
            color: #999;
            margin: 0 0 24px 0;
            line-height: 1.5;
        }
        .delete-dialog .delete-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        .delete-dialog .btn-cancel {
            padding: 8px 24px;
            border-radius: 8px;
            background: #2A2A2A;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }
        .delete-dialog .btn-cancel:hover {
            background: #3A3A3A;
        }
        .delete-dialog .btn-delete {
            padding: 8px 24px;
            border-radius: 8px;
            background: #E74C3C;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }
        .delete-dialog .btn-delete:hover {
            background: #C0392B;
        }

        /* ===== AI 发散弹窗 ===== */
        .ai-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9998;
            backdrop-filter: blur(4px);
            animation: fadeIn 0.2s ease;
        }
        .ai-modal {
            background: #1A1A1E;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            width: 680px;
            max-width: 90vw;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 60px rgba(0,0,0,0.5);
            animation: modalFadeIn 0.25s ease-out;
        }
        #aiBrainstormModal .ai-modal {
            width: 680px;
        }
        #aiBrainstormModal .ai-modal.has-results {
            width: min(1040px, calc(100vw - 48px));
            max-height: min(860px, calc(100dvh - 48px));
        }
        #aiBrainstormModal .ai-modal.has-results .ai-modal-body {
            min-height: 0;
        }
        #aiBrainstormModal .ai-modal.has-results .ai-results-list {
            max-height: min(480px, 48vh);
        }
        @media (max-width: 720px) {
            #aiBrainstormModal .ai-modal,
            #aiBrainstormModal .ai-modal.has-results {
                width: calc(100vw - 24px);
                max-width: calc(100vw - 24px);
                max-height: calc(100dvh - 24px);
            }
            #aiBrainstormModal .ai-modal-status-bar {
                margin-inline: 16px;
            }
            #aiBrainstormModal .ai-modal-body {
                padding-inline: 16px;
            }
        }
        .ai-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 0 24px;
        }
        .ai-modal-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .ai-modal-header-left h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }
        .ai-modal-close-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            background: rgba(255,255,255,0.05);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        .ai-modal-close-btn:hover {
            background: rgba(255,255,255,0.1);
            color: var(--text-primary);
        }
        .ai-modal-body {
            padding: 20px 24px;
            flex: 1;
            overflow-y: auto;
        }
        .ai-modal-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .ai-modal-textarea {
            width: 100%;
            background: #141414;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
            resize: vertical;
            transition: border-color 0.15s;
            font-family: inherit;
            box-sizing: border-box;
        }
        .ai-modal-textarea:focus {
            border-color: var(--brand-purple);
        }
        .ai-modal-textarea::placeholder {
            color: #6B7280;
        }
        .ai-modal-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .ai-suggestion-label {
            font-size: 12px;
            color: var(--text-muted);
            margin: 14px 0 8px 0;
        }
        .ai-suggestion-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .ai-chip {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .ai-chip:hover {
            border-color: var(--brand-purple);
            background: rgba(108,92,231,0.1);
            color: var(--brand-purple);
        }
        .ai-chip.selected {
            border-color: var(--brand-purple);
            background: rgba(108,92,231,0.15);
            color: var(--brand-purple);
        }
        .ai-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px 20px 24px;
        }
        .ai-btn {
            padding: 8px 20px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
            border: none;
            font-family: inherit;
        }
        .ai-btn-primary {
            background: var(--brand-purple);
            color: #FFFFFF;
        }
        .ai-btn-primary:hover {
            background: #5A4BD1;
        }
        .ai-btn-secondary {
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .ai-btn-secondary:hover {
            background: rgba(255,255,255,0.1);
            color: var(--text-primary);
        }

        /* ===== AI 配置弹窗 ===== */
        .ai-config-overlay {
            position: fixed;
            inset: 0;
            z-index: 9998;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(0, 0, 0, 0.64);
            backdrop-filter: blur(4px);
            animation: fadeIn 0.2s ease;
        }

        .ai-config-modal {
            width: min(920px, 100%);
            height: min(760px, calc(100vh - 48px));
            max-height: min(760px, calc(100vh - 48px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            background: #181818;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
            animation: modalFadeIn 0.25s ease-out;
        }

        .ai-config-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 24px 18px;
            border-bottom: 1px solid #2A2A2A;
        }

        .ai-config-title {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .ai-config-title h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 700;
            line-height: 1.2;
        }

        .ai-config-title p {
            margin: 6px 0 0;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .ai-config-body {
            min-height: 0;
            flex: 1;
            display: grid;
            grid-template-columns: 220px minmax(0, 1fr);
            overflow: hidden;
        }

        .ai-config-model-panel {
            min-height: 0;
            border-right: 1px solid #2A2A2A;
            padding: 18px 16px;
            overflow-y: auto;
        }

        .ai-config-section-label {
            margin: 0 0 10px 2px;
            color: var(--text-muted);
            font-size: 12px;
        }

        .ai-config-model-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .ai-config-model-option {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 10px;
            border: 1px solid transparent;
            border-radius: 10px;
            background: transparent;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 13px;
            text-align: left;
            cursor: pointer;
            transition: all 0.16s ease;
        }

        .ai-config-model-option:hover {
            background: #202020;
            color: #fff;
        }

        .ai-config-model-option.active {
            border-color: rgba(108,92,231,0.5);
            background: rgba(108,92,231,0.14);
            color: #fff;
        }

        .ai-config-model-option .ai-config-plan-badge,
        .ai-config-current-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(108, 92, 231, 0.82);
            color: #FFFFFF;
            font-size: 10px;
            font-weight: 400;
            line-height: 1.3;
            white-space: nowrap;
        }

        .ai-config-model-option .ai-config-plan-badge {
            margin-left: auto;
        }

        .ai-config-model-option--builtin {
            border-color: transparent;
            background: transparent;
        }

        .ai-config-model-option--builtin iconify-icon { font-size: 18px; }

        .ai-config-model-option iconify-icon,
        .ai-config-model-mark {
            color: var(--brand-purple);
            font-size: 17px;
            flex-shrink: 0;
        }

        .ai-config-model-mark {
            width: 17px;
            height: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid currentColor;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
        }

        .ai-config-form-panel {
            min-width: 0;
            overflow-y: auto;
            padding: 20px 24px;
        }

        .ai-config-current {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            color: var(--text-muted);
            font-size: 12px;
        }

        .ai-config-current strong {
            color: var(--brand-purple);
            font-size: 13px;
            font-weight: 600;
        }

        .ai-config-current.is-builtin strong { display: none; }
        .ai-config-current-badge {
            margin-left: 2px;
        }
        .ai-config-builtin-selector { margin: 10px 0 16px; }
        .ai-config-builtin-selector { position: relative; }
        .ai-config-builtin-select-trigger {
            width: 100%;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 16px;
            border: 1px solid #343438;
            border-radius: 10px;
            background: #111113;
            color: #F5F5F6;
            font: inherit;
            font-size: 14px;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: border-color .16s ease, background .16s ease;
        }
        .ai-config-builtin-select-trigger:hover,
        .ai-config-builtin-select-trigger[aria-expanded="true"] {
            border-color: rgba(108, 92, 231, .72);
            background: #15141A;
        }
        .ai-config-builtin-select-trigger:focus { outline: none; }
        .ai-config-builtin-select-trigger:focus-visible {
            border-color: rgba(108, 92, 231, .92);
            box-shadow: 0 0 0 3px rgba(108, 92, 231, .16);
        }
        .ai-config-builtin-select-trigger iconify-icon {
            color: #A1A1AA;
            font-size: 16px;
            transition: transform .16s ease;
        }
        .ai-config-builtin-select-trigger[aria-expanded="true"] iconify-icon { transform: rotate(180deg); }
        .ai-config-builtin-menu {
            position: absolute;
            z-index: 12;
            top: calc(100% + 6px);
            right: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
            overflow: hidden;
            padding: 5px;
            border: 1px solid #39393E;
            border-radius: 10px;
            background: #1B1B1E;
            box-shadow: 0 16px 32px rgba(0,0,0,.42);
        }
        .ai-config-builtin-option {
            width: 100%;
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 10px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #E4E4E7;
            font: inherit;
            font-size: 13px;
            text-align: left;
            cursor: pointer;
        }
        .ai-config-builtin-option:hover:not(:disabled),
        .ai-config-builtin-option.is-selected { background: rgba(108, 92, 231, .18); color: #F4F1FF; }
        .ai-config-builtin-option:disabled { color: #707078; cursor: not-allowed; }
        .ai-config-builtin-option-note { color: #777780; font-size: 11px; }
        .ai-config-plan-tip {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: -2px 0 16px;
            padding: 12px 14px;
            border: 1px solid #303034;
            border-radius: 12px;
            background: #1B1B1E;
            color: rgb(113, 113, 122);
            font-size: 12px;
            line-height: 1.65;
        }
        .ai-config-plan-tip iconify-icon {
            flex: 0 0 auto;
            /* 与说明首行的文字基线居中对齐。 */
            margin-top: 4px;
            color: rgb(113, 113, 122);
            font-size: 12px;
        }
        .ai-config-plan-tip--inline {
            display: block;
            margin: 8px 0 16px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: rgb(113, 113, 122);
        }

        .ai-config-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .ai-config-field-full {
            grid-column: 1 / -1;
        }

        .ai-config-key-field {
            position: relative;
        }

        .ai-config-key-field .repository-form-control {
            padding-right: 42px;
        }

        .ai-config-eye-btn {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
        }

        .ai-config-eye-btn:hover {
            background: rgba(255,255,255,0.06);
            color: #fff;
        }

        .ai-config-range-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-config-range {
            flex: 1;
            accent-color: var(--brand-purple);
        }

        .ai-config-range-value {
            min-width: 38px;
            color: #fff;
            font-size: 13px;
            text-align: right;
        }

        .ai-config-help {
            margin: 4px 0 0;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .ai-config-test-result {
            min-height: 18px;
            margin-top: 14px;
            color: var(--text-muted);
            font-size: 12px;
        }

        .ai-config-test-result.success {
            color: #34D399;
        }

        .ai-config-test-result.error {
            color: #F87171;
        }

        .ai-config-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px 20px;
            border-top: 1px solid #2A2A2A;
        }

        /* is-readonly 由外层遮罩 #aiConfigModal 承担，不能写在内层弹窗上。 */
        #aiConfigModal.is-readonly .ai-config-form-grid {
            opacity: .34;
            filter: grayscale(1);
        }

        #aiConfigModal.is-readonly .ai-config-current {
            opacity: .34;
            filter: grayscale(1);
        }

        #aiConfigModal.is-readonly .repository-form-control:not(#aiConfigBuiltinModelSelect),
        #aiConfigModal.is-readonly .ai-config-range,
        #aiConfigModal.is-readonly .ai-config-eye-btn {
            cursor: not-allowed;
        }

        #aiConfigModal.is-readonly .repository-form-control:not(#aiConfigBuiltinModelSelect),
        #aiConfigModal.is-readonly .ai-config-range { pointer-events:none; }

        #aiConfigModal.is-readonly .ai-config-eye-btn,
        #aiConfigModal.is-readonly .ai-btn { pointer-events:none; }

        #aiConfigModal.is-readonly .ai-config-footer .ai-btn {
            opacity: .34 !important;
            border-color: #3A3A3D !important;
            background: #2A2A2D !important;
            color: #777780 !important;
            cursor: not-allowed;
        }

        @media (max-width: 760px) {
            .ai-config-body {
                grid-template-columns: 1fr;
            }
            .ai-config-model-panel {
                border-right: 0;
                border-bottom: 1px solid #2A2A2A;
            }
            .ai-config-model-list {
                flex-direction: row;
                overflow-x: auto;
            }
            .ai-config-model-option {
                width: auto;
                white-space: nowrap;
            }
        }

        /* 结果列表样式 */
        .ai-results-heading {
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 400;
            margin-bottom: 14px;
        }
        .ai-results-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 18px;
        }
        .ai-result-item {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 10px;
            min-height: 48px;
            padding: 8px 16px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.035);
            cursor: default;
            transition: all 0.15s;
        }
        .ai-result-item:hover {
            background: rgba(255,255,255,0.05);
        }
        .ai-result-item.selected {
            border-color: var(--brand-purple);
            background: rgba(139,92,246,0.12);
        }
        .ai-result-row-checkbox {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: 1.5px solid rgba(255,255,255,0.55);
            background: transparent;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            transition: all 0.15s;
        }
        .ai-result-row-checkbox iconify-icon {
            display: none;
            font-size: 13px;
        }
        .ai-result-row-checkbox.checked {
            border-color: var(--brand-purple);
            background: var(--brand-purple);
        }
        .ai-result-row-checkbox.checked iconify-icon {
            display: block;
        }
        .ai-result-dim-label {
            flex-shrink: 0;
            min-width: 0;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(139,92,246,0.16);
            color: var(--brand-purple);
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
        }
        .ai-result-tags {
            min-width: 0;
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .ai-result-tag {
            appearance: none;
            font-family: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 26px;
            padding: 5px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.13);
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            transition: all 0.15s;
        }
        .ai-result-tag:hover {
            border-color: var(--brand-purple);
        }
        .ai-result-tag.active {
            border-color: var(--brand-purple);
            background: rgba(139,92,246,0.14);
            color: var(--text-primary);
        }
        .ai-result-tag:not(.active) {
            color: var(--text-muted);
            opacity: 1;
            text-decoration: none;
        }
        .ai-result-tag:not(.active):hover {
            color: var(--text-primary);
        }
        .btn-disabled {
            opacity: 0.35 !important;
            pointer-events: none !important;
        }

        .ai-modal-status-bar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 16px;
            margin: 14px 24px 14px;
            flex-wrap: wrap;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
        }
        .ai-status-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .ai-status-item strong {
            color: var(--text-secondary);
            font-weight: 600;
        }
        .ai-status-icon {
            font-size: 16px;
            color: var(--brand-purple);
        }
        .ai-status-divider {
            width: 1px;
            height: 18px;
            background: rgba(255,255,255,0.08);
        }

        .ai-apply-mode-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 4px;
        }
        .ai-apply-mode-label {
            font-size: 13px;
            color: var(--text-muted);
            padding-top: 0;
            flex-shrink: 0;
        }
        .ai-apply-mode-options {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .ai-mode-option {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.02);
            cursor: pointer;
            transition: all 0.15s;
            font-size: 12px;
            position: relative;
        }
        .ai-mode-option:hover {
            border-color: rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
        }
        .ai-mode-option input[type="radio"] {
            display: none;
        }
        .ai-mode-radio {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .ai-mode-radio::after {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
            transform: scale(0);
            transition: transform 0.15s;
        }
        .ai-mode-option input[type="radio"]:checked + .ai-mode-radio {
            border-color: var(--brand-purple);
            background: var(--brand-purple);
        }
        .ai-mode-option input[type="radio"]:checked + .ai-mode-radio::after {
            transform: scale(1);
        }
        .ai-mode-text {
            font-weight: 400;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .ai-mode-desc {
            font-size: 10px;
            color: var(--text-dim);
            display: none;
            position: absolute;
            bottom: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%);
            background: #2A2A2E;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            padding: 4px 10px;
            white-space: nowrap;
            z-index: 10;
        }
        .ai-mode-option:hover .ai-mode-desc {
            display: block;
        }

        .ai-results-section {
            margin-bottom: 14px;
        }
        .ai-results-section:last-child {
            margin-bottom: 0;
        }
        .ai-results-section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 8px;
        }
        .ai-results-section-header iconify-icon {
            font-size: 16px;
            color: var(--brand-purple);
        }
        .ai-results-section-header .section-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .ai-results-section-header .section-count {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            margin-left: auto;
        }
        .ai-replace-warning {
            display: none;
            padding: 10px 14px;
            border-radius: 8px;
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.35);
            font-size: 12px;
            font-weight: 400;
            color: #EF4444;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
        }
        .ai-replace-warning iconify-icon {
            font-size: 14px;
            flex: 0 0 auto;
        }
        .ai-replace-warning.show {
            display: flex;
        }

        .ai-basis-options {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .ai-basis-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.02);
            cursor: pointer;
            transition: all 0.15s;
        }
        .ai-basis-option:hover {
            border-color: rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
        }
        .ai-basis-option.is-disabled {
            opacity: 0.38;
            cursor: not-allowed;
            pointer-events: none;
        }
        .ai-basis-option input[type="radio"] {
            display: none;
        }
        .ai-basis-radio {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .ai-basis-radio::after {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
            transform: scale(0);
            transition: transform 0.15s;
        }
        .ai-basis-option input[type="radio"]:checked + .ai-basis-radio {
            border-color: var(--brand-purple);
            background: var(--brand-purple);
        }
        .ai-basis-option input[type="radio"]:checked + .ai-basis-radio::after {
            transform: scale(1);
        }
        .ai-basis-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .ai-basis-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .ai-basis-desc {
            font-size: 11px;
            color: var(--text-dim);
        }

        .ai-variant-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99998;
            backdrop-filter: blur(6px);
        }
        .ai-variant-modal {
            background: #18181B;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            width: 620px;
            max-width: 90vw;
            height: 827px;
            max-height: 90vh;
            box-shadow: 0 25px 80px rgba(0,0,0,0.6);
            animation: modalFadeIn 0.25s ease-out;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .ai-variant-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 0;
            flex-shrink: 0;
        }
        .ai-variant-modal-title {
            font-size: 18px;
            font-weight: 700;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ai-variant-project-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 24px 12px;
            flex-shrink: 0;
        }
        .ai-variant-project-bar .label {
            font-size: 12px;
            color: #71717A;
        }
        .ai-variant-project-bar .value {
            font-size: 12px;
            color: #FFFFFF;
            font-weight: 500;
        }
        .ai-variant-modal-body {
            padding: 16px 24px 0;
            overflow-y: auto;
            flex: 1;
            position: relative;
        }
        .ai-variant-count-area {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .ai-variant-count-label {
            font-size: 13px;
            color: #A1A1AA;
            font-weight: 500;
            white-space: nowrap;
        }
        .ai-variant-count-btn {
            padding: 6px 14px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            background: transparent;
            color: #A1A1AA;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .ai-variant-count-btn:hover {
            background: rgba(255,255,255,0.05);
            color: #FFFFFF;
        }
        .ai-variant-count-btn.active {
            background: #8B5CF6;
            border-color: #8B5CF6;
            color: #FFFFFF;
        }
        .ai-variant-slider-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }
        .ai-variant-slider {
            -webkit-appearance: none;
            width: 100px;
            height: 4px;
            border-radius: 2px;
            background: rgba(255,255,255,0.1);
            outline: none;
        }
        .ai-variant-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #8B5CF6;
            cursor: pointer;
            border: 2px solid #18181B;
        }
        .ai-variant-slider-value {
            font-size: 13px;
            font-weight: 600;
            color: #FFFFFF;
            min-width: 24px;
            text-align: center;
        }
        .ai-variant-hint {
            font-size: 12px;
            color: #71717A;
            padding: 8px 0 12px;
            line-height: 1.5;
        }
        .ai-variant-combo-card {
            background: #141416;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 12px;
        }
        .ai-variant-combo-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .ai-variant-combo-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--brand-purple);
        }
        .ai-variant-combo-count {
            font-size: 11px;
            color: #8B5CF6;
            font-weight: 500;
            margin-left: auto;
        }
        .ai-variant-tag-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .ai-variant-tag-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 8px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            font-size: 12px;
            color: #D4D4D8;
            cursor: pointer;
            transition: all 0.15s;
            user-select: none;
        }
        .ai-variant-tag-item:hover {
            background: rgba(255,255,255,0.08);
        }
        .ai-variant-tag-item.selected {
            background: rgba(139,92,246,0.15);
            border-color: #8B5CF6;
            color: #FFFFFF;
        }
        .ai-variant-tag-item .variant-check {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            flex-shrink: 0;
            transition: all 0.15s;
            color: transparent;
        }
        .ai-variant-tag-item.selected .variant-check {
            background: #8B5CF6;
            border-color: #8B5CF6;
            color: #fff;
        }
        .ai-variant-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .ai-variant-loading .spinner {
            font-size: 36px;
            color: #8B5CF6;
            animation: spin 1s linear infinite;
        }
        .ai-variant-loading .text {
            color: #71717A;
            font-size: 14px;
            margin-top: 16px;
        }
        .ai-variant-result-area {
            margin-top: 16px;
        }
        .ai-variant-result-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .ai-variant-result-title {
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .ai-variant-result-count {
            font-size: 12px;
            color: #A1A1AA;
        }
        .ai-variant-result-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            background: #141416;
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .ai-variant-result-item:hover {
            border-color: rgba(139,92,246,0.2);
        }
        .ai-variant-result-item.selected {
            border-color: #8B5CF6;
            background: rgba(139,92,246,0.06);
        }
        .ai-variant-result-item .result-check {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            transition: all 0.15s;
            color: transparent;
        }
        .ai-variant-result-item.selected .result-check {
            background: #8B5CF6;
            border-color: #8B5CF6;
            color: #fff;
        }
        .ai-variant-result-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .ai-variant-result-header-row {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
        }
        .ai-variant-combo-label {
            display: inline;
            font-size: 10px;
            color: rgba(255,255,255,0.55);
            margin-right: 4px;
            white-space: nowrap;
        }
        .ai-variant-result-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
            background: rgba(139,92,246,0.12);
            color: #8B5CF6;
            white-space: nowrap;
        }
        .ai-variant-result-tags-row {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            align-items: center;
            width: 100%;
        }
        .ai-variant-result-tag {
            font-size: 12px;
            color: #D4D4D8;
        }
        .ai-variant-result-tag.mutated {
            color: #8B5CF6;
            font-weight: 500;
        }
        .ai-variant-result-tag.sep {
            color: #D4D4D8;
        }
        .ai-variant-generate-btn {
            width: 100%;
            padding: 11px;
            border-radius: 10px;
            border: none;
            background: #8B5CF6;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .ai-variant-generate-btn:hover { background: #7C3AED; }
        .ai-variant-apply-btn {
            width: 100%;
            padding: 11px;
            border-radius: 10px;
            border: none;
            background: #8B5CF6;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            margin-top: 12px;
        }
        .ai-variant-apply-btn:hover { background: #7C3AED; }
        .ai-variant-empty {
            text-align: center;
            padding: 40px 0;
            color: #71717A;
            font-size: 13px;
        }
        .ai-variant-modal-footer {
            padding: 16px 24px 24px;
            flex-shrink: 0;
            background: #18181B;
            border-top: 1px solid rgba(255,255,255,0.035);
        }
        .ai-variant-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
            background: rgba(139,92,246,0.15);
            color: #8B5CF6;
            margin-left: 4px;
        }

        /* --- 墨刀教程页面迁移：仅覆盖教程抽屉相关样式 --- */
        .tutorial-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 99998;
            display: none;
            backdrop-filter: blur(2px);
        }

        .tutorial-overlay.show {
            display: block;
        }

        .tutorial-drawer {
            position: fixed;
            top: 0;
            right: -720px;
            width: 720px;
            max-width: 92vw;
            height: 100%;
            background: #141416;
            border-left: 1px solid rgba(255,255,255,0.06);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: -8px 0 40px rgba(0,0,0,0.4);
            transform: none;
            pointer-events: auto;
        }

        .tutorial-drawer.open {
            right: 0;
            transform: none;
        }

        .tutorial-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-shrink: 0;
            background: #141416;
        }

        .tutorial-drawer-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tutorial-drawer-header h2 iconify-icon {
            color: #8B5CF6;
        }

        .tutorial-drawer-close {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: #9CA3AF;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            font-size: 18px;
        }

        .tutorial-drawer-close:hover {
            background: #2A2A2A;
            color: #fff;
        }

        .tutorial-drawer-body {
            flex: 1;
            display: flex;
            overflow: hidden;
            min-height: 0;
        }

        .tutorial-toc {
            width: 200px;
            min-width: 200px;
            border-right: 1px solid rgba(255,255,255,0.06);
            padding: 12px 0;
            overflow-y: auto;
            background: #111;
            flex-shrink: 0;
        }

        .tutorial-toc-section {
            padding: 4px 0;
        }

        .tutorial-toc-section-title {
            font-size: 10px;
            font-weight: 600;
            color: #52525B;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 6px 16px 4px;
        }

        .tutorial-toc-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            font-size: 12px;
            color: #9CA3AF;
            cursor: pointer;
            transition: all 0.12s;
            border-left: 2px solid transparent;
            line-height: 1.4;
        }

        .tutorial-toc-item:hover {
            background: #1A1A1A;
            color: #D1D5DB;
        }

        .tutorial-toc-item.active {
            color: #FFFFFF;
            background: rgba(139,92,246,0.08);
            border-left-color: #8B5CF6;
        }

        .tutorial-toc-item .toc-icon {
            font-size: 14px;
            color: #6B7280;
            flex-shrink: 0;
        }

        .tutorial-toc-item.active .toc-icon {
            color: #8B5CF6;
        }

        .tutorial-toc-item .toc-label {
            flex: 1;
            min-width: 0;
        }

        .tutorial-content {
            flex: 1;
            padding: 24px 28px;
            overflow-y: auto;
            background: #141416;
            min-width: 0;
        }

        .tutorial-content h3 {
            font-size: 20px;
            font-weight: 700;
            color: #FFFFFF;
            margin: 0 0 16px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .tutorial-content h3 iconify-icon {
            color: #8B5CF6;
            font-size: 22px;
        }

        .tutorial-content h4 {
            font-size: 15px;
            font-weight: 600;
            color: #E8E8E8;
            margin: 24px 0 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tutorial-content h4 iconify-icon {
            color: #8B5CF6;
            font-size: 16px;
        }

        .tutorial-content h5 {
            font-size: 13px;
            font-weight: 600;
            color: #D1D5DB;
            margin: 16px 0 6px 0;
        }

        .tutorial-content p {
            font-size: 13px;
            color: #A1A1AA;
            line-height: 1.7;
            margin: 0 0 12px 0;
        }

        .tutorial-content ul,
        .tutorial-content ol {
            font-size: 13px;
            color: #A1A1AA;
            line-height: 1.7;
            margin: 0 0 12px 0;
            padding-left: 20px;
        }

        .tutorial-content li {
            margin-bottom: 6px;
        }

        .tutorial-content .tutorial-tip {
            background: rgba(139,92,246,0.08);
            border: 1px solid rgba(139,92,246,0.15);
            border-radius: 10px;
            padding: 12px 16px;
            margin: 12px 0;
            font-size: 12px;
            color: #C4B5FD;
            line-height: 1.5;
        }

        .tutorial-content .tutorial-tip iconify-icon {
            color: #8B5CF6;
            margin-right: 6px;
            vertical-align: middle;
        }

        .tutorial-content .tutorial-note {
            background: rgba(251,191,36,0.06);
            border: 1px solid rgba(251,191,36,0.12);
            border-radius: 10px;
            padding: 12px 16px;
            margin: 12px 0;
            font-size: 12px;
            color: #FDE68A;
            line-height: 1.5;
        }

        .tutorial-content .tutorial-note iconify-icon {
            color: #FBBF24;
            margin-right: 6px;
            vertical-align: middle;
        }

        .tutorial-content .tutorial-step {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
        }

        .tutorial-content .tutorial-step-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #8B5CF6;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .tutorial-content .tutorial-step-text {
            flex: 1;
            font-size: 13px;
            color: #A1A1AA;
            line-height: 1.6;
        }

        .tutorial-content .tutorial-step-text strong {
            color: #D1D5DB;
        }

        .tutorial-content .component-card {
            background: #1A1A1A;
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 10px;
            padding: 14px 16px;
            margin: 8px 0;
        }

        .tutorial-content .component-card-title {
            font-size: 13px;
            font-weight: 600;
            color: #E8E8E8;
            margin-bottom: 6px;
        }

        .tutorial-content .component-card-title iconify-icon {
            color: #8B5CF6;
            margin-right: 6px;
            font-size: 14px;
        }

        .tutorial-content .component-card-desc {
            font-size: 12px;
            color: #A1A1AA;
            line-height: 1.5;
        }

        .tutorial-content .component-card-desc strong {
            color: #D1D5DB;
        }

        .tutorial-content .component-card .tag {
            display: inline-block;
            padding: 1px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
            margin: 2px 2px;
        }

        .tutorial-content .component-card .tag-purple {
            background: rgba(139,92,246,0.12);
            color: #A78BFA;
        }

        .tutorial-content .component-card .tag-green {
            background: rgba(52,211,153,0.12);
            color: #34D399;
        }

        .tutorial-content .component-card .tag-amber {
            background: rgba(251,191,36,0.12);
            color: #FBBF24;
        }

        .tutorial-content .component-card .tag-red {
            background: rgba(239,68,68,0.12);
            color: #EF4444;
        }

        .tutorial-content hr {
            border: none;
            border-top: 1px solid rgba(255,255,255,0.04);
            margin: 20px 0;
        }

        .tutorial-content strong {
            color: #D1D5DB;
        }