:root {
            --bg-global: #13151a;
            --bg-canvas: #1a1d23;
            --glass-bg: rgba(22, 25, 32, 0.75);
            --glass-border: rgba(255, 255, 255, 0.08);
            --dot-color: rgba(255, 255, 255, 0.15);
            --text-primary: #a8b8cc;
            --text-main: #d4dce8;
            --text-variant: rgba(200, 215, 230, 0.6);
            --grid-size: 20px;
            --guide-color: #6e7f96;
        }

        html.light {
            --bg-global: #F8FAFC;
            --bg-canvas: #FFFFFF;
            --glass-bg: rgba(255, 255, 255, 0.4);
            --glass-border: rgba(15, 23, 42, 0.1);
            --dot-color: rgba(15, 23, 42, 0.15);
            --text-primary: #1e293b;
            --text-main: #1e293b;
            --text-variant: #64748b;
        }

        /* 新增：框选框的样式 */
        .selection-marquee {
            position: absolute;
            border: 1px solid rgba(99, 102, 241, 0.8);
            background-color: rgba(99, 102, 241, 0.2);
            pointer-events: none;
            z-index: 9999;
            display: none;
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--bg-global);
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: background-color 0.3s ease;
        }

        .dot-grid {
            background-image: radial-gradient(var(--dot-color) 1px, transparent 0);
            background-size: var(--grid-size) var(--grid-size);
            background-position: center;
        }

        .glass-panel {
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            background-color: var(--glass-bg);
            border: 1px solid var(--glass-border);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, border-color 0.3s;
        }

        .canvas-bg {
            background-color: var(--bg-canvas);
            transition: background-color 0.3s ease;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 核心修改：让阴影和边框跟随内部图片容器，而不是外层不可见的包围盒 */
        .canvas-card-selected .card-inner-transform {
            /* 深色模式：保留柔和选中提示，降低光晕亮度和扩散范围 */
            box-shadow: 0 0 0 1px rgba(247, 241, 226, 0.72), 0 0 14px rgba(236, 232, 220, 0.28) !important;
            border-color: rgba(241, 232, 209, 0.72) !important;
        }

        /* 亮色模式：使用更细、更柔和的蓝色选中框 */
        .light .canvas-card-selected .card-inner-transform {
            box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.62), 0 0 10px rgba(79, 70, 229, 0.16) !important;
            border-color: rgba(79, 70, 229, 0.58) !important;
        }

        #canvas-container {
            background-color: transparent;
            transition: none;
            cursor: default;
            touch-action: none;
        }

        .sandbox-sidebar {
            transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
            will-change: transform, opacity;
            overflow: visible;
            border-radius: 8px;
        }

        .sandbox-sidebar > :first-child {
            border-radius: 8px 8px 0 0;
        }

        .sidebar-collapse-handle {
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 30;
            display: flex;
            width: 28px;
            height: 48px;
            padding: 0;
            transform: translateY(-50%);
            align-items: center;
            justify-content: center;
            color: var(--text-main);
            background: var(--bg-canvas);
            border: 1px solid var(--glass-border);
            border-right: 0;
            border-radius: 6px 0 0 6px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
            cursor: pointer;
            transition: color 160ms ease, background-color 160ms ease;
        }

        .sidebar-collapse-handle:hover,
        .sidebar-collapse-handle:focus-visible {
            color: var(--text-main);
            background: var(--bg-global);
            outline: none;
        }

        .sidebar-collapse-handle svg {
            width: 15px;
            height: 15px;
        }

        .sandbox-sidebar.is-collapsed {
            transform: translateX(calc(-100% - 2rem));
            opacity: 0;
            pointer-events: none;
        }

        .sandbox-sidebar-launcher {
            display: none;
        }

        .sandbox-sidebar-launcher.is-visible {
            display: flex;
        }

        .full-meaning-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.7rem 0.75rem;
            border: 1px solid var(--glass-border);
            border-radius: 0.375rem;
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition: background-color 160ms ease, border-color 160ms ease;
        }

        .full-meaning-link:hover,
        .full-meaning-link:focus-visible {
            background: rgba(168, 184, 204, 0.1);
            border-color: var(--text-primary);
            outline: none;
        }

        #canvas-container.tool-select {
            cursor: default;
        }

        #canvas-container.tool-pan {
            cursor: grab;
        }

        #canvas-container.tool-pan:active {
            cursor: grabbing;
        }

        #canvas-container.tool-text {
            cursor: text;
        }

        .tool-select .draggable:hover {
            cursor: move;
        }

        .tool-select .text-obj-container:hover {
            cursor: move;
        }

        .draggable {
            cursor: grab;
            user-select: none;
            z-index: 10;
        }

        .draggable:active {
            cursor: grabbing;
        }

        .library-card {
            aspect-ratio: 10 / 17;
            background-color: rgba(var(--text-main-rgb, 222, 229, 255), 0.05);
            box-shadow: inset 0 0 0 1px var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            /* 优化5：统一使用小圆角，显得更专业且增加显示面积 */
            cursor: pointer;
            /* 核心修复：只过渡颜色和阴影，严禁过渡背景尺寸，防止悬停时发生图片抖动或缩放 */
            transition: box-shadow 0.2s, background-color 0.2s;
            box-sizing: border-box;
            background-origin: border-box;
            /* 核心修复：让背景从边框外沿开始渲染，不受内阴影挤压 */
        }

        .library-card:hover {
            background-color: rgba(var(--text-main-rgb, 222, 229, 255), 0.15);
            box-shadow: inset 0 0 0 2px #0ea5e9, 0 0 10px rgba(14, 165, 233, 0.4);
            /* 亮天蓝色 */
        }

        .tab-active {
            color: var(--text-primary);
            border-bottom: 2px solid var(--text-primary);
        }

        .card-inner-transform {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center center;
        }

        .card-field-input {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            width: 150px;
            height: 22px;
            min-height: 0;
            transform: translateX(-50%);
            appearance: none;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            background-color: transparent !important;
            background-image: none !important;
            box-shadow: none !important;
            color: var(--text-main);
            font-size: 12px;
            font-weight: 600;
            line-height: 22px;
            padding: 0 !important;
            text-align: center;
            outline: none;
            cursor: default;
            user-select: none;
        }

        .card-field-input.is-editing {
            cursor: text;
            user-select: text;
        }

        .field-duplicate-notice {
            position: fixed;
            left: 50%;
            top: 82px;
            z-index: 10000;
            transform: translateX(-50%);
            padding: 9px 14px;
            border: 1px solid rgba(244, 63, 94, 0.35);
            border-radius: 8px;
            background: rgba(127, 29, 29, 0.92);
            color: #fff1f2;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
            pointer-events: none;
        }

        .toolbar-btn,
        .zoom-btn {
            position: relative;
        }

        .toolbar-btn::after,
        .zoom-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            right: 120%;
            top: 50%;
            transform: translateY(-50%) translateX(10px);
            background: none;
            color: var(--text-main);
            font-size: 11px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            font-weight: 500;
            letter-spacing: 0.05em;
        }

        .toolbar-btn:hover::after,
        .zoom-btn:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        .canvas-zoom-toolbar .zoom-btn::after {
            right: auto;
            left: 50%;
            top: auto;
            bottom: calc(100% + 6px);
            transform: translateX(-50%) translateY(6px);
        }

        .canvas-zoom-toolbar .zoom-btn:hover::after {
            transform: translateX(-50%) translateY(0);
        }

        .toolbar-btn.active {
            background-color: rgba(110, 127, 150, 0.22);
            color: var(--text-primary);
        }

        /* 去除原生 textarea 的右下角调整图标 */
        .text-annotation {
            resize: none !important;
        }

        /* 优化：文字对象左右两侧的调整宽度手柄 */
        .text-resize-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 10px;
            /* 响应区域宽度 */
            cursor: ew-resize;
            z-index: 30;
            display: none;
            /* 默认隐藏 */
        }

        .text-resize-handle.left {
            left: -5px;
        }

        .text-resize-handle.right {
            right: -5px;
        }

        /* 只有选中该文字对象时，才显示调整手柄 */
        .text-obj-selected .text-resize-handle {
            display: block;
        }

        .text-annotation:not(:focus) {
            border-color: transparent;
        }

        .text-annotation:focus {
            border-color: var(--text-primary);
            background: rgba(99, 102, 241, 0.05) !important;
            cursor: text;
        }

        .text-obj-selected .text-annotation {
            border: 2px dashed #f5f0e4 !important;
            background: rgba(251, 191, 36, 0.1) !important;
        }

        .light .text-obj-selected .text-annotation {
            border: 2px dashed #4f46e5 !important;
            background: rgba(79, 70, 229, 0.1) !important;
        }

        .nebula {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.15;
            pointer-events: none;
            animation: drift 20s infinite alternate ease-in-out;
        }

        @keyframes drift {
            from {
                transform: translate(0, 0) scale(1);
            }

            to {
                transform: translate(50px, 30px) scale(1.1);
            }
        }

        #link-svg line {
            cursor: pointer;
            pointer-events: stroke;
            transition: stroke 0.2s, stroke-width 0.2s;
        }

        #guide-svg line {
            stroke: var(--guide-color);
            stroke-width: 0.5px;
            shape-rendering: crispEdges;
            pointer-events: none;
        }

        /* 优化3：牌库卡牌选中的高亮样式 */
        .library-card-active {
            box-shadow: inset 0 0 0 2px #0ea5e9, 0 0 15px rgba(14, 165, 233, 0.6) !important;
            background-color: rgba(var(--text-main-rgb, 222, 229, 255), 0.15);
            transform: scale(0.96);
        }

        @keyframes stars-twinkle {
            0% {
                opacity: 0.1;
            }

            50% {
                opacity: 0.3;
            }

            100% {
                opacity: 0.1;
            }
        }

        .theme-text-primary {
            color: var(--text-primary);
        }

        .theme-text-main {
            color: var(--text-main);
        }

        .theme-text-variant {
            color: var(--text-variant);
        }

        .theme-border {
            border-color: var(--glass-border);
        }

        /* 优化2：卡槽发光与双主题选中样式，带边框和内发光 */
        .card-slot {
            border: 1px dashed rgba(255, 255, 255, 0.2) !important;
            background-color: rgba(255, 255, 255, 0.12) !important;
            backdrop-filter: blur(4px);
            border-radius: 4px;
            box-sizing: border-box;
            font-family: serif;
            transition: all 0.3s ease;
            color: #fbbf24;
            text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
        }

        .light .card-slot {
            background-color: rgba(0, 0, 0, 0.12) !important;
            border-color: rgba(15, 23, 42, 0.15) !important;
            color: #d97706;
            text-shadow: none;
        }

        .card-slot:hover {
            border: 1px solid var(--text-primary) !important;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.05);
        }

        .card-slot-active {
            border: 2px solid var(--text-primary) !important;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 15px rgba(0, 0, 0, 0.05) !important;
        }

        .card-insert-mode .card-slot {
            cursor: pointer !important;
            border-color: rgba(251, 191, 36, 0.5) !important;
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.15), inset 0 0 10px rgba(251, 191, 36, 0.1) !important;
        }

        .light .card-insert-mode .card-slot {
            border-color: rgba(217, 119, 6, 0.5) !important;
            box-shadow: 0 0 15px rgba(217, 119, 6, 0.15), inset 0 0 10px rgba(217, 119, 6, 0.05) !important;
        }

        /* 优化3 & 4：自定义牌阵弹窗专属样式，保证明暗主题清晰可见，且格子为锐利矩形 */
        .spread-modal-panel {
            background: rgba(22, 25, 32, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .light .spread-modal-panel {
            background: rgba(248, 250, 252, 0.95);
            border: 1px solid rgba(15, 23, 42, 0.15);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .spread-modal-cell {
            width: 40px;
            height: 66px;
            border-radius: 2px;
            /* 优化4：纯正的矩阵方角 */
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: serif;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            box-sizing: border-box;
        }

        .spread-modal-cell:hover {
            border-color: #818cf8;
            background: rgba(255, 255, 255, 0.08);
        }

        .spread-modal-cell.active-cell {
            border-color: #818cf8;
            background: rgba(129, 140, 248, 0.15);
            color: #818cf8;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(129, 140, 248, 0.2);
        }

        /* 亮色模式特调 */
        .light .spread-modal-cell {
            border-color: rgba(15, 23, 42, 0.1);
            background: rgba(15, 23, 42, 0.03);
            color: rgba(15, 23, 42, 0.4);
        }

        .light .spread-modal-cell:hover {
            border-color: #3730a3;
            background: rgba(15, 23, 42, 0.06);
        }

        .light .spread-modal-cell.active-cell {
            border-color: #3730a3;
            background: rgba(55, 48, 163, 0.1);
            color: #3730a3;
            font-weight: bold;
            box-shadow: 0 0 8px rgba(55, 48, 163, 0.15);
        }

        /* 优化1：为卡槽弹窗增加自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(129, 140, 248, 0.5);
        }

        .light .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.02);
        }

        .light .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
        }

        .light .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(55, 48, 163, 0.5);
        }

        /* 修复下拉菜单选项在暗色模式下的白底刺眼问题 */
        .dark option {
            background-color: var(--bg-canvas);
            /* 使用沙盘统一的深渊蓝底色 */
            color: var(--text-main);
        }

        .light option {
            background-color: #FFFFFF;
            color: #1e293b;
        }

        /* ===== AI 牌阵解读弹窗 ===== */
        #ai-report-modal #ai-config-name,
        #ai-report-modal #ai-config-question {
            border-radius: 6px !important;
            color: var(--text-main) !important;
            -webkit-text-fill-color: var(--text-main) !important;
            caret-color: var(--text-main);
            transition: border-color 0.15s, box-shadow 0.15s !important;
        }

        html.dark #ai-report-modal #ai-config-name,
        html.dark #ai-report-modal #ai-config-question {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        html.light #ai-report-modal #ai-config-name,
        html.light #ai-report-modal #ai-config-question {
            background-color: rgba(15, 23, 42, 0.05) !important;
        }

        html.dark #ai-report-modal #ai-config-name:-webkit-autofill,
        html.dark #ai-report-modal #ai-config-name:-webkit-autofill:hover,
        html.dark #ai-report-modal #ai-config-name:-webkit-autofill:focus {
            box-shadow: 0 0 0 1000px #20232a inset !important;
            -webkit-text-fill-color: #d4dce8 !important;
            caret-color: #d4dce8;
        }

        html.light #ai-report-modal #ai-config-name:-webkit-autofill,
        html.light #ai-report-modal #ai-config-name:-webkit-autofill:hover,
        html.light #ai-report-modal #ai-config-name:-webkit-autofill:focus {
            box-shadow: 0 0 0 1000px #f1f5f9 inset !important;
            -webkit-text-fill-color: #1e293b !important;
            caret-color: #1e293b;
        }

        #ai-modal-footer button {
            border-radius: 6px !important;
        }

        #ai-report-modal .ai-review-table,
        #ai-report-modal .ai-privacy-box {
            border-radius: 6px !important;
        }

        #ai-report-modal .ai-privacy-box > #ai-privacy-check {
            flex: 0 0 auto;
            margin-top: 1px !important;
        }

        #ai-report-modal .ai-privacy-box > div > .flex {
            min-height: 16px;
            line-height: 16px;
            align-items: center;
        }

        #ai-report-modal .ai-review-direction {
            color: var(--text-variant);
            transition: color 0.15s;
        }

        #ai-report-modal .ai-review-direction:hover {
            color: var(--text-main);
        }

        #ai-report-modal .ai-review-field {
            color: var(--text-main);
            border: 0;
            border-bottom: 1px solid var(--glass-border);
            border-radius: 0 !important;
            -webkit-text-fill-color: var(--text-main);
        }

        #ai-report-modal .ai-review-field:focus {
            border-bottom-color: var(--text-primary);
            box-shadow: none;
        }

        html.light #ai-report-modal .ai-review-table,
        html.light #ai-report-modal .ai-review-table thead,
        html.light #ai-report-modal .ai-review-table tbody,
        html.light #ai-report-modal .ai-review-table td,
        html.light #ai-report-modal .ai-review-table th {
            color: #243447 !important;
        }

        html.light #ai-report-modal .ai-review-direction {
            color: #334155 !important;
        }

        html.light #ai-report-modal .ai-review-direction:hover {
            color: #0f172a !important;
        }

        html.light #ai-report-modal .ai-review-field {
            color: #1e293b !important;
            -webkit-text-fill-color: #1e293b !important;
            border-bottom-color: rgba(30, 41, 59, 0.28);
        }

        html.light #ai-report-modal .ai-privacy-box,
        html.light #ai-report-modal .ai-privacy-box .theme-text-variant {
            color: #334155 !important;
        }

        .ai-privacy-toggle {
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--text-primary);
            font: inherit;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .ai-privacy-detail {
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px solid var(--glass-border);
            color: var(--text-variant);
        }

        .ai-privacy-detail[hidden] {
            display: none;
        }

        .ai-privacy-detail a {
            margin-left: 4px;
            color: var(--text-primary);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* ===== AI 参考模型 自定义下拉按钮 ===== */
        .sb-provider-group {
            position: relative;
        }

        .sb-provider-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 8px 16px;
            border-radius: 9999px;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            background: transparent;
            color: var(--text-variant);
            border: 1px solid var(--glass-border);
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s;
            font-family: inherit;
            white-space: nowrap;
        }

        .sb-provider-btn:hover {
            color: var(--text-primary);
            border-color: var(--text-primary);
        }

        .sb-provider-arrow {
            font-size: 0.65rem;
            opacity: 0.7;
        }

        .sb-provider-menu {
            position: absolute;
            bottom: calc(100% + 6px);
            right: 0;
            min-width: 140px;
            background: rgba(22, 25, 32, 0.97);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
            overflow: hidden;
            z-index: 9999;
        }

        .light .sb-provider-menu {
            background: rgba(255, 255, 255, 0.97);
            border-color: rgba(42, 76, 106, 0.2);
            box-shadow: 0 -6px 20px rgba(42, 76, 106, 0.15);
        }

        .sb-provider-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 9px 14px;
            font-size: 0.75rem;
            background: transparent;
            color: var(--text-main);
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }

        .sb-provider-option:hover {
            background: rgba(200, 215, 230, 0.08);
            color: var(--text-primary);
        }

        .sb-provider-option.active {
            color: var(--text-primary);
            font-weight: 600;
            background: rgba(200, 215, 230, 0.06);
        }

        .sb-check-icon {
            display: none;
        }

        .sb-provider-option.active .sb-check-icon {
            display: inline-block;
        }

        .light .sb-provider-option {
            color: #4a6a8a;
        }

        .light .sb-provider-option:hover {
            background: rgba(42, 76, 106, 0.08);
            color: #2a4c6a;
        }

        .light .sb-provider-option.active {
            color: #2a4c6a;
            background: rgba(42, 76, 106, 0.06);
        }

        .sb-provider-tag {
            font-size: 0.68rem;
            padding: 1px 5px;
            border-radius: 3px;
            background: rgba(200, 215, 230, 0.12);
            color: var(--text-variant);
            margin-left: 5px;
        }

        .light .sb-provider-tag {
            background: rgba(42, 76, 106, 0.1);
            color: #6a8aaa;
        }