/* 清空画布按钮定位 */
                #clear-canvas-btn-container {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    z-index: 110;
                    transition: all 0.3s;
                }
                
                /* 竖屏模式 - 右上角，距顶部上分栏88px处，随上分栏收起而上移 */
                @media (max-width: 768px) and (orientation: portrait) {
                    #clear-canvas-btn-container {
                        top: 88px;
                        right: 15px;
                    }
                    #sidebar-left.collapsed ~ #main-area #clear-canvas-btn-container {
                        top: 15px;
                    }
                }
                
                /* 横屏模式 - 右上角，距离右侧面板 */
                @media (orientation: landscape) {
                    #clear-canvas-btn-container {
                        right: 300px;
                    }
                    #sidebar-right.collapsed ~ #main-area #clear-canvas-btn-container {
                        right: 15px;
                    }
                }
        :root {
            --bg-dark: #1e1e1e;
            --bg-panel: #252526;
            --text-main: #e0e0e0;
            --accent: #007acc;
            --border: #3e3e42;
            --input-bg: #3c3c3c;
            --btn-clear-bg: #c0392b;
            --btn-clear-hover: #e74c3c;
            --btn-clear-active: #a93226;
        }
        #clear-canvas-btn {
            background: var(--btn-clear-bg);
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            padding: 8px 18px;
            transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
        }
        #clear-canvas-btn:hover {
            background: var(--btn-clear-hover);
            box-shadow: 0 4px 16px rgba(231,76,60,0.25);
            transform: translateY(-2px) scale(1.04);
        }
        #clear-canvas-btn:active {
            background: var(--btn-clear-active);
            box-shadow: 0 2px 8px rgba(169,50,38,0.18);
            transform: translateY(1px) scale(0.98);
        }

        * { box-sizing: border-box; user-select: none; }
        
        body {
            margin: 0; height: 100vh; display: flex;
            background-color: var(--bg-dark); color: var(--text-main);
            font-family: 'Segoe UI', sans-serif; overflow: hidden;
        }

        /* 左侧工具栏 */
        #sidebar-left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px; 
            background-color: var(--bg-panel);
            border-right: 1px solid var(--border);
            display: flex; 
            flex-direction: column; 
            padding: 10px; 
            z-index: 100;
            box-shadow: 2px 0 5px rgba(0,0,0,0.3);
            transition: transform 0.3s ease;
        }
        
        #sidebar-left.collapsed {
            transform: translateX(-100%);
        }
        
        /* 竖屏模式 - 改为顶部布局 */
        @media (max-width: 768px) and (orientation: portrait) {
            #sidebar-left {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: auto;
                width: 100%;
                height: 80px;
                flex-direction: row;
                border-right: none;
                border-bottom: 1px solid var(--border);
                box-shadow: 0 2px 5px rgba(0,0,0,0.3);
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                padding: 8px;
                transition: height 0.3s ease;
            }
            
            #sidebar-left.collapsed {
                transform: none;
                height: 0;
                padding: 0;
                border: none;
                box-shadow: none;
                overflow: hidden;
            }
        }
        
        .sidebar-toggle {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-panel);
            border: 1px solid var(--border);
            color: var(--text-main);
            padding: 10px 5px;
            cursor: pointer;
            z-index: 101;
            transition: all 0.3s ease;
            width: 24px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #toggle-left {
            left: 200px;
            border-radius: 0 8px 8px 0;
        }
        
        #toggle-left.collapsed {
            left: 0;
        }
        
        #toggle-right {
            right: 280px;
            border-radius: 8px 0 0 8px;
        }
        
        #toggle-right.collapsed {
            right: 0;
        }
        
        /* 竖屏模式 - 切换按钮改为上下位置 */
        @media (max-width: 768px) and (orientation: portrait) {
            #toggle-left {
                left: 50%;
                top: 80px;
                bottom: auto;
                width: 60px;
                height: 24px;
                border-radius: 0 0 8px 8px;
                z-index: 102;
                transform: translateX(-50%);
            }
            
            #toggle-left.collapsed {
                left: 50%;
                top: 0;
                transform: translateX(-50%);
            }

            #toggle-right {
                display: none; /* Always hidden in portrait mode */
            }
        }
        
        .sidebar-toggle:hover {
            background: var(--accent);
        }

        .tool-group-title { color: #888; font-size: 12px; margin: 15px 0 5px 0; text-transform: uppercase; }
        
        .tool-item {
            background-color: var(--input-bg); padding: 12px; margin-bottom: 8px;
            border-radius: 4px; cursor: grab; display: flex; align-items: center;
            border: 1px solid transparent; transition: all 0.2s;
        }
        
        /* 光源类工具按钮 */
        .tool-item[data-type="arrow"] {
            background-color: #ffd9b3; /* 浅橙色 */
            color: #333;
        }
        .tool-item[data-type="arrow"]:hover {
            background-color: #ffca99;
            border-color: #ff9900;
        }
        
        .tool-item[data-type="laser"] {
            background-color: #ffb3b3; /* 浅红色 */
            color: #333;
        }
        .tool-item[data-type="laser"]:hover {
            background-color: #ff9999;
            border-color: #ff3333;
        }
        
        .tool-item[data-type="point"] {
            background-color: #ffffe0; /* 浅黄色 */
            color: #333;
        }
        .tool-item[data-type="point"]:hover {
            background-color: #ffffc0;
            border-color: #ffcc00;
        }
        .tool-item[data-type="parallel"] {
            background-color: #ffc0e0; /* 浅粉色 */
            color: #333;
        }
        .tool-item[data-type="parallel"]:hover {
            background-color: #ffb0d0;
            border-color: #ff69b4;
        }
        
        /* 光学元件工具按钮 */
        .tool-item[data-type="lens-convex"],
        .tool-item[data-type="lens-concave"] {
            background-color: #b3e5fc; /* 淡蓝色 */
            color: #333;
        }
        
        #lens-group-btn {
            background-color: #f8fbfd !important; /* 接近白色的很淡蓝色 */
            color: #333;
        }
        
        /* 平面镜按钮 - 更淡的蓝色 */
        .tool-item[data-type="plane-mirror"] {
            background-color: #e0f7fa; /* 非常淡的蓝色 */
            color: #333;
        }
        
        .tool-item[data-type="plane-mirror"]:hover {
            background-color: #b2ebf2;
            border-color: #4dd0e1;
        }

            /* 透镜组合主按钮悬停效果 */
            #lens-group-btn:hover {
                background-color: #eaf6ff; /* 更浅的蓝色 */
                border-color: #0099ff;
                box-shadow: 0 0 0 2px #81d4fa;
            }

            /* 透镜组合弹窗按钮悬停效果 */
            .lens-group-type:hover {
                background: #81d4fa !important;
                border-color: #0099ff !important;
                color: #222 !important;
            }
            .focal-type:hover {
                background: #888 !important;
                border-color: #b3e5fc !important;
                color: #fff !important;
            }
            #lens-group-cancel:hover {
                background: #888 !important;
                border-color: #b3e5fc !important;
                color: #fff !important;
            }
        
        .tool-item[data-type="lens-convex"]:hover,
        .tool-item[data-type="lens-concave"]:hover {
            background-color: #81d4fa;
            border-color: #0099ff;
        }
        
        #lens-group-btn:hover {
            background-color: #b3e5fc;
            border-color: #0099ff;
        }
        
        .tool-item:active { cursor: grabbing; }
        .tool-icon { margin-right: 10px; font-weight: bold; width: 20px; text-align: center; }

        /* 主画布区域 */
        #main-area {
            flex: 1; position: relative; overflow: hidden; cursor: default;
        }

        canvas { display: block; width: 100%; height: 100%; }

        /* 右侧属性面板 */
        #sidebar-right {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 280px; 
            background-color: var(--bg-panel);
            border-left: 1px solid var(--border); 
            padding: 15px;
            display: flex; 
            flex-direction: column; 
            z-index: 100;
            font-size: 13px;
            box-shadow: -2px 0 5px rgba(0,0,0,0.3);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        #sidebar-right.collapsed {
            transform: translateX(100%);
        }

        /* 竖屏模式 - 改为底部布局，并使下栏一直展示 */
        @media (max-width: 768px) and (orientation: portrait) {
            :root { --bottom-panel-height: 45vh; }

            #sidebar-right {
                position: absolute;
                bottom: 0;
                right: 0;
                top: auto;
                left: 0;
                width: 100%;
                height: var(--bottom-panel-height);
                border-left: none;
                border-top: 1px solid var(--border);
                box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
                padding: 12px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                transition: none; /* No transition, always open */
            }
        }


        #props-container {
            flex-shrink: 0;
            border-bottom: 1px solid #444;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }        #info-container {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            font-size: 12px;
            color: #aaa;
        }
        
        /* 美化滚动条 */
        #info-container::-webkit-scrollbar {
            width: 6px;
        }
        
        #info-container::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.05);
        }
        
        #info-container::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
        }
        
        #info-container::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }

        .prop-section { margin-bottom: 20px; border-bottom: 1px solid #444; padding-bottom: 15px; }
        .prop-title { font-weight: bold; font-size: 14px; margin-bottom: 10px; color: white; }
        .prop-row { margin-bottom: 10px; display: flex; flex-direction: column; }
        .prop-row label { color: #aaa; margin-bottom: 4px; }
        
        input[type="text"], input[type="number"] {
            background: #e8e8e8; border: 1px solid #bbb; 
            color: #222; padding: 6px; border-radius: 3px; width: 100%;
        }
        input[type="range"] { margin-top: 5px; width: 100%; }
        input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

        .btn-delete {
            background: #c0392b; color: white; border: none; padding: 8px;
            width: 100%; border-radius: 4px; cursor: pointer; margin-top: 10px;
        }
        .btn-delete:hover { background: #e74c3c; }

        

        /* 移动设备竖屏适配 */
        @media (max-width: 768px) and (orientation: portrait) {
            body {
                flex-direction: column;
                height: 100vh;
            }

            .tool-group-title {
                margin: 0 15px 0 0;
                align-self: center;
                white-space: nowrap;
                flex-shrink: 0;
                font-size: 11px;
            }

            .tool-item {
                flex-shrink: 0;
                margin-bottom: 0;
                margin-right: 8px;
                min-width: fit-content;
                font-size: 12px;
                padding: 10px;
            }

            #main-area {
                flex: 1;
                min-height: 0;
                position: relative;
                -webkit-user-select: none;
                user-select: none;
            }

            #props-container {
                margin-bottom: 8px;
                padding-bottom: 8px;
                min-height: auto;
                flex-shrink: 0;
            }

            #info-container {
                font-size: 13px;
            }

            .prop-section {
                margin-bottom: 14px;
                padding-bottom: 12px;
            }

            .prop-title {
                font-size: 12px;
                margin-bottom: 8px;
            }

            .prop-row {
                margin-bottom: 6px;
            }

            input[type="text"], input[type="number"] {
                padding: 4px;
                font-size: 12px;
            }

            .btn-delete {
                padding: 6px;
                font-size: 12px;
                margin-top: 8px;
            }

            
        }

        /* 移动设备横屏适配 */
        @media (max-width: 1024px) and (orientation: landscape) {
            #sidebar-left {
                width: 150px;
            }

            #sidebar-right {
                width: 200px;
            }

            .tool-icon {
                margin-right: 5px;
            }

            .tool-item {
                padding: 8px;
                font-size: 12px;
            }
        }

        /* 小屏设备 */
        @media (max-width: 480px) {
            #sidebar-left {
                padding: 6px;
            }

            .tool-item {
                padding: 10px;
                margin-right: 6px;
            }

            .tool-group-title {
                font-size: 10px;
                margin-right: 10px;
            }

            #sidebar-right {
                max-height: 30vh;
                padding: 8px;
            }

            input[type="text"], input[type="number"] {
                padding: 3px;
                font-size: 11px;
            }
        }