@keyframes breathing {
            0%, 100% {
                box-shadow: 0 0 15px 2px rgba(140, 43, 238, 0.15);
                border-color: rgba(140, 43, 238, 0.2);
            }
            50% {
                box-shadow: 0 0 35px 10px rgba(140, 43, 238, 0.4);
                border-color: rgba(140, 43, 238, 0.5);
            }
        }

        :root {
            --primary: #34d399;
            --dark: #0f172a;
            --bg: #f8fafc;
            --border: #cbd5e1;
            --sidebar-w: 460px;
            --accent: #3b82f6;
            --danger: #ef4444;
            --success: #22c55e;

            /* 鍝嶅簲寮忓昂瀵稿彉閲?*/
            --tool-panel-size: min(25vw, 130px);  /* 澶у箙缂╁皬 */
            --tool-btn-size: min(7vw, 35px);  /* 缂╁皬鎸夐挳 */
            --side-btn-size: min(10vw, 50px);
            --panel-gap: min(2vw, 15px);
            --panel-padding: min(3vw, 20px);
            --mobile-trigger-size: min(15vw, 70px);
        }
        * { box-sizing: border-box; user-select: none; font-family: 'Arial', sans-serif; }
        body { margin: 0; height: 100vh; overflow: hidden; background: var(--bg); color: #334155; }

        /* 鍍忕礌鑹烘湳鏍峰紡 */
        .pixel-art-canvas {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            grid-template-rows: repeat(16, 1fr);
            width: 64px;
            height: 64px;
            gap: 0;
        }
        .island-grass { background: #4ADE80; }
        .island-dirt { background: #92400E; }
        .island-wood { background: #78350F; }
        .island-leaves { background: #166534; }
        .island-cloud { background: #FFFFFF; }
        .pegboard-bg { background: #E2E8F0; border: 0.1px solid rgba(255,255,255,0.2); }
        .bead-heart { background: #EF4444; }
        .chest-wood { background: #BE185D; }
        .chest-gold { background: #FACC15; }
        .portrait-frame { background: #FDF2F8; border: 0.5px solid #F472B6; }
        .breathing-glow {
            box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.05);
        }
        .shadow-glow-purple { box-shadow: 0 12px 30px rgba(168, 85, 247, 0.15); }
        .shadow-glow-blue { box-shadow: 0 12px 30px rgba(59, 130, 246, 0.15); }
        .shadow-glow-orange { box-shadow: 0 12px 30px rgba(249, 115, 22, 0.15); }
        .shadow-glow-pink { box-shadow: 0 12px 30px rgba(236, 72, 153, 0.15); }
        .shadow-glow-green { box-shadow: 0 12px 30px rgba(34, 197, 94, 0.15); }
        .shadow-glow-red { box-shadow: 0 12px 30px rgba(239, 68, 68, 0.15); }
        .shadow-glow-yellow { box-shadow: 0 12px 30px rgba(234, 179, 8, 0.15); }
        .shadow-glow-indigo { box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15); }

        /* 鑽夌鍗＄墖鎮仠鏁堟灉 */
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(19, 236, 200, 0.1), 0 8px 10px -6px rgba(19, 236, 200, 0.1);
        }

        /* 鑽夌椤甸潰鍝嶅簲寮?*/
        @media (max-width: 768px) {
            #view-drafts main {
                width: 100% !important;
            }
            #drafts-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 16px !important;
            }
        }

        /* 鏀惰棌椤甸潰鏍峰紡 */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 鏀惰棌椤甸潰瀹瑰櫒 - 瑕嗙洊 app-view 鐨?flex 甯冨眬 */
        #view-favorites.app-view.active {
            display: block !important;
        }

        /* 鐢佃剳绔敹钘忛〉闈㈢綉鏍?- 涓€鎺掓樉绀哄涓?*/
        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 24px;
            width: 100%;
        }

        /* 骞虫澘绔?*/
        @media (max-width: 1024px) and (min-width: 769px) {
            .favorites-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 20px;
            }
        }

        /* 鎵嬫満绔敹钘忛〉闈㈢綉鏍?- 2鍒楀竷灞€ */
        @media (max-width: 768px) {
            .favorites-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
            

            /* 馃敟 鎵嬫満绔畬鍏ㄩ殣钘忎晶杈规爮 */
            #view-inspiration aside,
            #view-favorites aside,
            #view-drafts aside {
                display: none !important;
            }
        }

        /* Material Symbols 鍥炬爣鏍峰紡 */
        .material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }

        /* Glass morphism effect */
        
        

        /* Breathing shadow animation */
        
        @keyframes breathe {
            0%, 100% { box-shadow: 0 4px 20px -2px rgba(168, 85, 247, 0.1); }
            50% { box-shadow: 0 4px 30px 4px rgba(168, 85, 247, 0.2); }
        }

        /* Premium gradient */
        

        /* ============================================================
           馃敶 鏍稿績鍔熻兘鍩虹鏍峰紡 (缂哄け杩欎釜锛岀數鑴戞墜鏈洪兘浼氫竴鐗囩櫧)
           ============================================================ */
        
        /* 2. 浜戠鐢诲粖椤靛熀纭€甯冨眬 */
        .gallery-content {
            flex: 1;
            overflow-y: auto;
            padding: clamp(20px, 3vw, 40px);
            background: #f1f5f9;
        }
        #gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
            gap: clamp(12px, 2vw, 20px);
            width: 100%;
            margin: 0 auto;
        }
        .gallery-card {
            background: white;
            border-radius: clamp(10px, 1.2vw, 12px);
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: 0.3s;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
        }
        .gallery-card img {
            width: 100%;
            height: clamp(150px, 20vw, 180px);
            object-fit: cover;
            border-bottom: 1px solid #f1f5f9;
        }

        /* 3. 缂栬緫鍣ㄩ〉鍩虹甯冨眬 */
        .header {
            height: clamp(50px, 8vh, 60px);
            background: white;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 clamp(15px, 3vw, 30px);
            justify-content: space-between;
            flex-shrink: 0;
        }
        .layout {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
            height: calc(100vh - clamp(50px, 8vh, 60px));
        }
        .sidebar {
            width: var(--sidebar-w);
            min-width: var(--sidebar-w);
            background: white;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            padding: clamp(12px, 1.8vw, 18px);
            overflow-y: auto;
            flex-shrink: 0;
            z-index: 150;
        }
        .workspace { flex: 1; display: flex; background: #e2e8f0; overflow: hidden; position: relative; }
        .viewport { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .content-container { flex: 1; position: relative; overflow: hidden; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 20px 20px; }
        .content-wrap { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
        #preview-cvs, #final-cvs, #grid-cvs, #ui-cvs { position: absolute; top: 0; left: 0; }
        
        /* 4. 宸︿晶鎮诞鍘嗗彶搴?*/
                /* 馃煝 纭繚鎵€鏈夐〉闈㈠湪闈炴縺娲荤姸鎬佷笅褰诲簳娑堝け锛屼笉鍗犱綅锛屼笉閲嶅彔 */
       /* --- 馃煝 瑙嗚绔粓鏋侀€傞厤 CSS --- */

        /* 1. 瑙嗗浘鍩虹锛氱‘淇濋〉闈笉閲嶅彔锛屽彧鏈?active 鎵嶄細鏄剧ず */
        .app-view {
            position: fixed; inset: 0; background: #f8fafc;
            display: none !important; flex-direction: column; z-index: 100;
        }
        .app-view.active { display: flex !important; z-index: 500 !important; }
        
        /* 2. 鐧诲綍椤垫牱寮?*/
        #view-login {
            background: #e2e8f0; /* 娴呰壊楂樼骇鐏?*/
            justify-content: center; align-items: center;
            overflow-y: auto; /* 闂2锛氭坊鍔犳粴鍔ㄦ潯鏀寔 */
        }
        
        #view-login input {
            padding: clamp(12px, 2vw, 15px);
            border: 2px solid #e2e8f0;
            border-radius: clamp(8px, 1.2vw, 10px);
            font-size: clamp(14px, 2vw, 16px);
            outline: none;
            background: #f8fafc;
        }
        
        /* 3. 澶у巺甯冨眬锛氱數鑴戠 4 鍒楀ぇ鏂瑰潡 */
        #view-hub { background: #f1f5f9; overflow-y: auto !important; height: 100vh; }
        .hub-header {
            height: clamp(55px, 8vh, 65px);
            background: white;
            padding: 0 clamp(15px, 2vw, 20px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .hub-grid {
            display: grid;
            gap: clamp(15px, 2.5vw, 25px);
            padding: clamp(20px, 4vw, 40px);
            width: 100%;
            max-width: min(1300px, 95vw);
            margin: 0 auto;
            grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
        }
        
        
        
        @keyframes breathing {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.015); }
        }
                /* AI椤甸潰 */
        .btn-back-hub { align-self: flex-start; padding: 10px 20px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: #64748b; }
        .btn-back-hub:hover { color: var(--dark); border-color: var(--dark); }
        /* 缂栬緫鍣ㄦ牱寮?*/
        .header { height: 60px; background: white; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 30px; justify-content: space-between; flex-shrink: 0; z-index: 200; }
        .logo { font-size: 24px; font-weight: 900; color: var(--dark); display: flex; align-items: center; gap: 10px; }
        
        .header-tools { display: flex; align-items: center; gap: 10px; }
        .btn-top { padding: 8px 18px; border: 1px solid var(--border); background: white; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
        .btn-top:hover { border-color: var(--primary); background: #f0fdf4; }
        .btn-primary { background: var(--dark); color: white; border: none; }
        .btn-primary:hover { background: #1e293b; }
        .dl-group { display: none; align-items: center; gap: 8px; background: #f1f5f9; padding: 4px 8px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .dl-select { padding: 6px; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 12px; font-weight: bold; outline: none; }
        .dl-check { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold; color: #64748b; cursor: pointer; }
        .dl-check input { accent-color: var(--primary); width: 16px; height: 16px; }
        .layout { flex: 1; display: flex; overflow: hidden; position: relative; }
        .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px; overflow-y: auto; flex-shrink: 0; z-index: 150; }
        .panel { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; }
        .panel-title { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
        .upload-row { display: flex; gap: 10px; margin-bottom: 10px; }
        .upload-mini { flex: 1; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; background: #fafafa; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
        .upload-mini:hover { border-color: var(--primary); background: #f0fdf4; }
        .db-status { font-size: 11px; padding: 3px 8px; border-radius: 4px; display: inline-block; }
        .status-none { background: #fee2e2; color: #dc2626; }
        .status-ready { background: #dcfce7; color: #16a34a; }
        .slider-box { background: #f8fafc; padding: 12px; border-radius: 10px; border: 1px solid #edf2f7; margin-bottom: 8px; transition: opacity 0.3s; position: relative; }
        .slider-box.disabled .slider-content { opacity: 0.3; pointer-events: none; filter: grayscale(1); } 
        .check-label { display: flex; align-items: center; gap: 8px; font-weight: bold; cursor: pointer; user-select: none; pointer-events: auto !important; position: relative; z-index: 5; }
        .check-label input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
        .ctrl-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .input-num { width: 75px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-weight: 900; color: var(--primary); outline: none; font-size: 15px; }
        input[type=range] { width: 100%; accent-color: var(--primary); cursor: pointer; height: 6px; }
        .bom-list { flex: 1; overflow-y: auto; border: 2px solid #edf2f7; border-radius: 12px; background: #fff; margin-top: 5px; min-height: 200px; max-height: 400px; }
        .bom-header-hint { font-size: 12px; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; background: #f8fafc; padding: 5px 10px; border-radius: 6px; }
        .bom-item { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid #f8fafc; transition: 0.1s; position: relative; cursor: default; }
        .bom-item:hover { background: #f0fdf4; }
        .bom-item.selected { background: #dbeafe; border-left: 4px solid var(--accent); }
        .bom-item.active-brush { background: #dbeafe; border-left: 4px solid var(--accent); }
        .bom-color-wrap { position: relative; width: 36px; height: 36px; border-radius: 8px; border: 2px solid transparent; transition: 0.2s; flex-shrink: 0; cursor: pointer; z-index: 10; }
        .bom-color-wrap:hover { transform: scale(1.05); border-color: var(--accent); }
        .bom-color { width: 100%; height: 100%; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1); pointer-events: none; }
        .bom-edit-icon { position: absolute; bottom: -4px; right: -4px; background: white; border-radius: 50%; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; color: var(--dark); font-size: 10px; border: 1px solid #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); pointer-events: none; }
        .bom-info { flex: 1; display: flex; justify-content: space-between; align-items: center; overflow: hidden; padding-left: 8px; cursor: default; pointer-events: auto; }
        .bom-text { display: flex; flex-direction: column; gap: 2px; overflow: hidden; pointer-events: none; }
        .bom-text b { color: var(--dark); font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; }
        .bom-text span { color: #64748b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bom-count { font-weight: 900; color: var(--primary); font-size: 16px; background: #f0fdf4; padding: 2px 8px; border-radius: 6px; flex-shrink: 0; margin-left: 10px; pointer-events: none; }
        .bom-delete-btn { background: #fee2e2; color: #dc2626; border: none; border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
        .bom-delete-btn:hover { background: #fecaca; transform: scale(1.05); }
        .summary-bar { display: flex; justify-content: space-between; background: var(--dark); color: white; padding: 12px 18px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; font-weight: bold; }
        .summary-bar b { color: var(--primary); font-size: 16px; }
        .btn-gen { width: 100%; padding: 18px; background: var(--dark); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .btn-gen:disabled { background: #94a3b8; cursor: not-allowed; }
        .btn-undo { width: 100%; padding: 14px; background: #fff; border: 2px solid var(--border); border-radius: 12px; margin-bottom: 10px; cursor: pointer; font-weight: bold; display: none; color: var(--dark); }
        .sidebar-actions { display: flex; gap: 10px; margin-bottom: 10px; box-sizing: border-box; }
        .btn-outline { flex: 1; padding: 10px; background: #fff; border: 2px solid #cbd5e1; border-radius: 10px; font-weight: bold; cursor: pointer; color: #64748b; transition: 0.2s; box-sizing: border-box; font-size: 13px; }
        .btn-outline:hover { border-color: var(--dark); color: var(--dark); }
        .btn-danger { flex: 1; padding: 10px; background: #fff; border: 2px solid var(--danger); color: var(--danger); border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.2s; box-sizing: border-box; font-size: 13px; }
        .btn-danger:hover { background: #fef2f2; }
        .workspace { flex: 1; display: flex; background: #e2e8f0; overflow: hidden; position: relative; }
        .viewport { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        #vp-left { border-right: 1px solid #cbd5e1; background-color: #f1f5f9; }
        #vp-right { background-color: #f8fafc; cursor: grab; }
        #vp-right.mode-drag .content-container { cursor: grab !important; }
        #vp-right.mode-drag .content-container:active { cursor: grabbing !important; }
        #vp-right.mode-select .content-container { cursor: crosshair !important; }
        #vp-right.mode-eyedropper .content-container { cursor: default !important; }
        #vp-right.mode-pointer .content-container { cursor: pointer !important; }
        #vp-right.mode-eraser .content-container,
        #vp-right.mode-paint .content-container,
        #vp-right.mode-bucket .content-container { cursor: cell !important; } 
        .content-container { flex: 1; position: relative; overflow: hidden; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 20px 20px; min-height: 0; }
        .content-wrap { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; display: block; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; width: 100%; height: 100%; }
        .content-wrap.active { opacity: 1; }
        #original-img, #preview-cvs, #final-cvs { display: block; width: 100%; height: 100%; box-shadow: 0 15px 50px rgba(0,0,0,0.2); }
        #ui-cvs, #grid-cvs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        #ui-cvs { z-index: 1000; }
        #grid-cvs { z-index: 999; }
        #original-img { background: white; object-fit: contain; } 
        #preview-cvs { image-rendering: pixelated; }
        #final-cvs { display: none; position: absolute; inset: 0; z-index: 5; }
        #grid-cvs { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
        #ui-cvs { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
        .color-grid { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
        .color-opt { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
        .color-opt.active { border-color: var(--dark); transform: scale(1.1); }
        .empty-hint { color: #94a3b8; font-weight: bold; font-size: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; }
        .vp-tag { position: absolute; top: 15px; left: 15px; background: rgba(15, 23, 42, 0.8); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; z-index: 20; backdrop-filter: blur(2px); }
        .bp-header { background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #ffffff; padding: 15px 25px; display: none; justify-content: space-between; align-items: center; border-bottom: 2px solid #047857; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2); flex-shrink: 0; z-index: 90; position: relative; width: 100%; }
        .bp-left { display: flex; flex-direction: column; gap: 6px; }
        .bp-title { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
        .bp-tip { font-size: 12px; color: #fff; background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255,255,255,0.3); font-weight: bold;}
        .bp-info-box { display: flex; gap: 35px; }
        .bp-info-item { display: flex; flex-direction: column; align-items: flex-end; }
        .bp-info-label { font-size: 14px; color: rgba(255,255,255,0.95); text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 4px; }
        .bp-info-val { font-size: 24px; font-weight: 900; font-family: 'Arial', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .side-float-bar {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: clamp(8px, 1.5vw, 10px);
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
        }
        .side-float-bar.active { opacity: 1; pointer-events: auto; }
        .side-left { left: clamp(15px, 2vw, 20px); }
        .side-right { right: clamp(15px, 2vw, 20px); }
        .bottom-float-panel {
            position: absolute;
            bottom: clamp(15px, 2.5vh, 20px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(15, 23, 42, 0.95);
            padding: clamp(12px, 2vw, 15px) clamp(20px, 3vw, 25px);
            border-radius: clamp(16px, 2vw, 20px);
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 1.5vw, 12px);
            z-index: 100;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            cursor: move;
            user-select: none;
            min-width: min(480px, 90vw);
            backdrop-filter: blur(8px);
        }
        .bottom-float-panel.active { opacity: 1; pointer-events: auto; }
        .tool-row {
            display: flex;
            gap: clamp(10px, 1.5vw, 12px);
            justify-content: center;
            align-items: center;
        }
        .row-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.15); margin: 4px 0; }
        .vc-btn {
            background: transparent;
            color: #94a3b8;
            border: none;
            padding: clamp(6px, 1vw, 8px) clamp(10px, 1.5vw, 12px);
            border-radius: clamp(6px, 1vw, 8px);
            font-size: clamp(11px, 1.5vw, 12px);
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(3px, 0.5vw, 4px);
            min-width: clamp(50px, 8vw, 60px);
            /* 馃敟 娣诲姞瑙︽懜浼樺寲锛岀‘淇濇寜閽湪鎵嬫満涓婂彲鐐瑰嚮 */
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: auto;
        }
        .vc-btn i {
            font-size: clamp(18px, 3vw, 24px);
            margin-bottom: clamp(1px, 0.3vw, 2px);
        }
        .vc-btn:hover { color: white; background: rgba(255,255,255,0.1); }
        .vc-btn.active { background: var(--accent); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
        .vc-btn.btn-restore { color: var(--danger); }
        .vc-btn.btn-restore:hover { background: rgba(239, 68, 68, 0.2); }
        
        .side-btn {
            background: rgba(15, 23, 42, 0.95);
            color: #cbd5e1;
            width: clamp(40px, 6vw, 44px);
            height: clamp(40px, 6vw, 44px);
            border-radius: clamp(8px, 1.2vw, 10px);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            font-size: clamp(16px, 2.5vw, 18px);
        }
        .side-btn:hover { background: var(--accent); color: white; transform: scale(1.1); }
        .side-btn.active { background: var(--accent); color: white; box-shadow: 0 0 0 2px white; }
        .float-color-indicator {
            width: clamp(40px, 6vw, 44px);
            height: clamp(40px, 6vw, 44px);
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            background: #000;
            cursor: pointer;
            transition: 0.2s;
            position: relative;
            margin-bottom: clamp(4px, 0.8vw, 5px);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: 900;
            font-size: clamp(10px, 1.5vw, 12px);
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        .float-color-indicator:hover { transform: scale(1.1); }
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
        .modal-box { background: white; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
        .modal-box.large { width: 1100px; max-width: 95vw; max-height: 85vh; }
        .modal-box.medium { width: 750px; max-width: 95vw; max-height: 85vh; }
        .modal-box.fullscreen { width: 95vw; height: 95vh; max-width: 95vw; max-height: 95vh; }
        .modal-box.small {
            width: min(500px, 90vw);
            max-height: 80vh;
        }
        .modal-head { padding: 15px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; }
        .modal-title { font-size: 16px; font-weight: 900; color: var(--dark); display: flex; align-items: center; gap: 8px; }
        .modal-close { cursor: pointer; color: #94a3b8; font-size: 18px; }
        .modal-close:hover { color: var(--dark); }
        .dual-columns { display: grid; grid-template-columns: 1fr 50px 1fr; flex: 1; overflow: hidden; height: 100%; background: #f1f5f9; }
        .col-panel { background: white; display: flex; flex-direction: column; overflow: hidden; }
        .col-header { padding: 12px 15px; font-weight: bold; font-size: 13px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; text-align: center; }
        .arrow-sep { display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 20px; }
        .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; padding: 20px; overflow-y: auto; }
        .palette-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; border-radius: 8px; padding: 5px; transition: 0.2s; border: 2px solid transparent; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .palette-item:hover { background: #f0fdf4; border-color: var(--primary); transform: translateY(-2px); }
        .pi-color { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 5px; }
        .pi-id { font-size: 12px; font-weight: bold; color: var(--dark); }
        .pi-name { font-size: 10px; color: #64748b; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
        #loading-toast {
            position: fixed;
            top: clamp(15px, 2.5vh, 20px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(15, 23, 42, 0.9);
            color: white;
            padding: clamp(6px, 1vh, 8px) clamp(12px, 2vw, 16px);
            border-radius: clamp(20px, 3vw, 30px);
            font-size: clamp(11px, 1.5vw, 12px);
            font-weight: bold;
            z-index: 5000;
            display: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        #msg-toast {
            position: fixed;
            bottom: clamp(100px, 15vh, 120px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: clamp(10px, 1.5vh, 12px) clamp(20px, 3vw, 24px);
            border-radius: clamp(6px, 1vw, 8px);
            font-size: clamp(12px, 1.8vw, 14px);
            font-weight: bold;
            z-index: 4000;
            display: none;
            opacity: 0;
            transition: opacity 0.2s;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            pointer-events: none;
        }
        #msg-toast.show { opacity: 1; display: block; }
        .drag-overlay { position: absolute; inset: 0; background: rgba(59, 130, 246, 0.1); border: 4px dashed var(--accent); z-index: 500; display: none; justify-content: center; align-items: center; font-size: 24px; color: var(--accent); font-weight: 900; pointer-events: none; }
        body.dragging .drag-overlay { display: flex; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
       /* --- 馃煝 V2.1 鏈€缁堜慨澶嶇増鏍峰紡 (瑙ｅ喅鏃犳粴鍔ㄦ潯 + 瑙ｅ喅鍘嬬缉) --- */
        
        /* 1. 寮哄埗寮圭獥鍥哄畾楂樺害锛岄槻姝㈡拺鐮村睆骞曞鑷存粴鍔ㄦ潯娑堝け */
        .modal-box.large {
            width: min(1100px, 95vw);
            max-width: 95vw;
            height: 85vh;       /* 馃敀 閿佹楂樺害 */
            max-height: 85vh;
            display: flex;      /* 寮€鍚?Flex */
            flex-direction: column;
        }

        /* 2. 鍒楄〃鍖哄煙锛氳嚜鍔ㄥ～婊″墿浣欑┖闂?+ 鍐呴儴婊氬姩 */
        #inventory-list {
            flex: 1;           /* 鍗犳嵁鍓╀綑绌洪棿 */
            min-height: 0;     /* 鍏佽鏀剁缉 (鏍稿績淇) */
            overflow-y: auto;  /* 寮€鍚瀭鐩存粴鍔?*/
            padding: 15px;
            background: #f1f5f9;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #color-library-scroll {
            flex: 1;           /* 鍗犳嵁鍓╀綑绌洪棿 */
            min-height: 0;     /* 鍏佽鏀剁缉 (鏍稿績淇) */
            overflow-y: scroll !important;  /* 寮哄埗寮€鍚瀭鐩存粴鍔?*/
            padding: 20px;
            background: #fff;
            position: relative;
        }

        /* 3. 鍝佺墝鍒嗙粍瀹瑰櫒 */
        .inv-group { 
            background: #fff; 
            border-radius: 12px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
            overflow: hidden; 
            border: 1px solid #e2e8f0; 
            flex-shrink: 0; /* 闃叉鍒嗙粍鏈韩琚帇缂?*/
        }
        
        /* 4. 鍒嗙粍鏍囬鏍?*/
        .inv-header { 
            padding: 10px 15px; 
            background: #f8fafc; 
            border-bottom: 1px solid #e2e8f0; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        }
        .inv-title { font-weight: 800; color: #334155; font-size: 14px; display: flex; align-items: center; gap: 8px; }
        .inv-badge { background: var(--primary); color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; }

        /* 5. 缃戞牸鍐呭鍖?(璞嗗瓙鍗＄墖瀹瑰櫒) */
        .inv-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
            gap: 10px; 
            padding: 15px; 
        }

        /* --- 馃煝 鏋佺畝楂樼骇鐗堬細搴撳瓨鍗＄墖閫変腑鐘舵€?--- */
        
        .inv-item { 
            position: relative; 
            border: 1px solid #e2e8f0; 
            border-radius: 12px; /* 鍦嗚鏇村渾娑︿竴鐐?*/
            background: #fff; 
            padding: 8px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 澧炲姞骞虫粦杩囨浮鍔ㄧ敾 */
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }

        /* 榧犳爣鎮仠锛氳儗鏅井鍙?*/
        .inv-item:hover { 
            border-color: var(--primary);
            background: #f8fafc;
        }

        /* 猸?鏍稿績浼樺寲锛氶€変腑鐘舵€侊紙鍛婂埆娣辫壊锛屾敼鐢ㄥ厜鏅曞拰绮捐嚧鏍囪瘑锛?*/
        .inv-item.checked { 
            border: 1.5px solid var(--primary); /* 缁嗙粏鐨勫搧鐗屼富鑹茶竟妗?*/
            background: #ffffff; 
            /* 閲嶇偣锛氬鍔犱竴涓搧鐗岃壊鐨勫鍏夋檿鎶曞奖锛岃瀹冩湁鈥滆閫変腑鈥濈殑鎮诞鎰?*/
            box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15), 0 8px 20px rgba(52, 211, 153, 0.1); 
            transform: translateY(-2px); /* 閫変腑鍚庡井寰诞璧?*/
        }

        /* 鍒犳帀閭ｄ釜涓戦檵鐨勫ぇ鐧藉嬀锛屾敼鍦ㄨ壊鍧楄竟瑙掑姞涓€涓簿鑷寸殑钃濊壊/缁胯壊灏忓渾鐐?*/
        .inv-item.checked::before {
            content: '\f058'; /* 杩欐槸涓€涓疄蹇冪殑绮捐嚧鍦嗙偣鍕惧彿 */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: -6px;
            right: -6px;
            background: white;
            color: var(--primary);
            font-size: 16px;
            border-radius: 50%;
            z-index: 5;
            line-height: 1;
        }

        /* 鑹插潡鏈韩涓嶈鍔犱换浣曢伄缃╋紝淇濇寔鍘熷棰滆壊骞插噣 */
        .inv-item .pi-color { 
            width: 100%; 
            height: 40px; 
            border-radius: 8px; 
            margin-bottom: 6px; 
            border: 1px solid rgba(0,0,0,0.05);
            transition: transform 0.2s ease;
        }

        /* 閫変腑鏃讹紝鑹插潡寰井缂╁皬锛屾媺寮€闂磋窛锛屾樉寰楃簿鑷?*/
        .inv-item.checked .pi-color {
            transform: scale(0.92);
        }

        /* 閫変腑鏃剁殑鏂囧瓧棰滆壊 */
        .inv-item.checked .pi-id { 
            color: var(--dark); 
            font-weight: 900;
        }
        .inv-item:hover .btn-del-item { opacity: 1; }
        .btn-del-item:hover { background: #ef4444; color: white; }

        /* 8. 鑷畾涔夊綍鍏ユ鏍峰紡 */
        .manual-add-box { 
            display: flex; gap: 8px; align-items: center; 
            background: #fff; padding: 10px; border-radius: 8px; 
            border: 1px dashed #cbd5e1; margin-bottom: 10px; 
            flex-shrink: 0; 
        }
        .manual-input { padding: 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; outline: none; width: 80px; }
        /* 杞崲鍣ㄥ垪琛ㄦ牱寮?*/
        .conv-row { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f1f5f9; gap: 15px; background: #fff; margin-bottom: 5px; border-radius: 8px; }
        .conv-item { flex: 1; display: flex; align-items: center; gap: 12px; }
        .conv-score { min-width: 80px; text-align: center; font-size: 12px; font-weight: bold; padding: 4px 8px; border-radius: 6px; line-height: 1.4; }
        .modal-toolbar { padding: 15px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
   /* 馃帹 绮捐嚧鐨勪笅鎷夊巻鍙查潰鏉挎牱寮?*/
	        /* 馃煝 淇 1锛氳闈㈡澘鈥滈鈥濊捣鏉ワ紝涓嶆尋鍘嬩笂鏂瑰唴瀹?*/
	        /* 馃煝 浼樺寲锛氬皢闈㈡澘绉昏嚦宸︿晶宸ㄥぇ绌虹櫧鍖猴紝涓嶅啀閬尅銆佷笉鍐嶆孩鍑?*/
	        /* 馃煝 淇1锛氬乏渚ф偓娴簱 - 寮哄埗3鍒楋紝绂佹鎸ゅ帇 */

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        /* 馃煝 浼樺寲锛氬皢鎶藉眽鍥哄畾鍦ㄥ睆骞曟渶宸︿晶锛屼笉鍐嶉伄鎸″唴瀹?*/
	        
        .gallery-card {
            background: white; border-radius: 16px; padding: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05); cursor: pointer; transition: 0.3s;
        }
        .gallery-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
        .gallery-card img { width: 100%; border-radius: 10px; margin-bottom: 10px; }
        .btn-top.active { background: var(--primary); color: white; border-color: var(--primary); }
    /* 馃煝 姝ラ2鏂板锛氫簯绔敾寤婁笓鐢ㄦ牱寮?*/
        #gallery-grid {
            display: grid;
            /* 寮哄埗姣忚5涓紝鑷姩骞冲垎瀹藉害 */
            grid-template-columns: repeat(5, 1fr); 
            gap: 20px;
            padding: 40px;
            width: 100%;
            max-width: 1600px;
            margin: 0 auto; 
        }

        .gallery-card {
            background: white;
            border-radius: clamp(10px, 1.2vw, 12px);
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: 0.3s;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
        }
        .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

        .gallery-card img {
            width: 100%;
            /* 馃煝 鍏抽敭锛氶攣姝婚珮搴︿负 180px锛岄槻姝㈠浘鐗囨拺婊″睆骞?*/
            height: 180px; 
            object-fit: cover; /* 淇濇寔姣斾緥瑁佸壀锛屽浘鐗囦笉鍙樺舰 */
            border-bottom: 1px solid #f1f5f9;
        }
        
        /* 灞忓箷鍙樼獎鏃剁殑鑷姩璋冩暣 */
        @media (max-width: 1400px) { #gallery-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 1000px) { #gallery-grid { grid-template-columns: repeat(3, 1fr); } }
        
        
        
        /* 鐢诲粖椤甸潰鐨勯€夐」鍗″井璋?*/
        
    /* 馃煝 鏂板鐧诲綍椤垫牱寮?*/
    
    
    

/* --- /* --- 馃煝 PC 绔ぇ鍘呬笓灞炰紭鍖?(淇鐗堬細骞虫粦鍏夊奖鍛煎惛锛屾枃瀛椾笉鍔? --- */
        @media (min-width: 769px) {
            #view-hub {
                display: flex;
                flex-direction: column;
                height: 100vh; /* 鍗犳弧鍏ㄥ睆楂樺害 */
                overflow: hidden; /* 绂佹婊氬姩 */
                background: #F9FAFB;
            }

            /* 鍐呭鍖哄煙灞呬腑璁惧畾 */
            .hub-content {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-bottom: 60px; /* 瑙嗚閲嶅績寰皟 */
                width: 100%;
                overflow-y: auto;
            }

            /* 缃戞牸甯冨眬璁惧畾 - 鐢佃剳绔娇鐢?x4缃戞牸锛堜袱鎺掞紝姣忔帓4涓級 */
            .hub-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr) !important; /* 4鍒?*/
                grid-template-rows: repeat(2, 1fr); /* 2琛?*/
                gap: 30px;
                width: 100%;
                max-width: 1600px;
                padding: 40px 60px;
            }

            /* 鏂板崱鐗囨牱寮?- 鐢佃剳绔繚鎸佹柟褰?*/
            .hub-card-new {
                height: 320px !important;
                min-height: 320px;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                padding: 40px 20px !important;
                text-align: center !important;
                animation: shadowBreathing 5s ease-in-out infinite;
            }

            .hub-card-new .w-20 {
                width: 100px !important;
                height: 100px !important;
                margin-bottom: 25px;
            }

            .hub-card-new .pixel-art-canvas {
                width: 80px !important;
                height: 80px !important;
            }

                        /* 鎵惧埌杩欎竴鍧椾唬鐮?*/
            .hub-card-new .flex-1 {
                flex: none !important;
                text-align: center !important;
                margin-top: 5px;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                
                /* 馃憞馃憞馃憞 鏂板涓嬮潰杩欎袱琛?馃憞馃憞馃憞 */
                margin-left: 0 !important;  /* 馃煝 鏍稿績淇锛氭竻闄?Tailwind space-x-5 甯︽潵鐨勫乏杈硅窛 */
                width: 100% !important;     /* 馃煝 纭繚瀹瑰櫒鍗犳弧瀹藉害锛屼粠鑰屾纭眳涓?*/
            }

            .hub-card-new .material-symbols-outlined {
                display: none !important; /* 闅愯棌绠ご */
            }

            .hub-card-new h3 {
                font-size: 22px !important;
                margin-bottom: 10px !important;
                text-align: center !important;
                font-weight: 700 !important;
                width: 100% !important;
            }

            .hub-card-new p {
                font-size: 13px !important;
                line-height: 1.5 !important;
                text-align: center !important;
                width: 100% !important;
            }

            .hub-card-new .flex-wrap {
                justify-content: center !important;
            }

            .hub-card-new .space-x-5 {
                flex-direction: column !important;
                space-x: 0 !important;
            }

            /* 搴曢儴瀵艰埅鍦ㄧ數鑴戠闅愯棌 */
            nav {
                display: none !important;
            }

            /* 鍗＄墖鍩虹鏍峰紡 */
            

            /* 鍐呴儴鍏冪礌澶у睆閫傞厤 */
            

            

            

            /* 馃柋锔?榧犳爣鎮仠浜や簰 */
             .hub-card-new:hover {
                animation-play-state: paused; /* 鏆傚仠鍛煎惛 */

                /* 鎮仠鏁堟灉锛氭竻鏅扮殑涓婃诞 + 寮虹儓鐨勫搧鐗岃壊鍏夊奖 */
                transform: translateY(-12px);
                box-shadow: 0 30px 70px rgba(52, 211, 153, 0.4); /* 缁胯壊鍏夋檿 */
                border-color: var(--primary); /* 缁胯壊杈规浜捣 */
            }

            /* 馃帹 鍘嗗彶浣滃搧搴撶數鑴戠甯冨眬浼樺寲 */
            #view-gallery .hub-header {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 20px 40px !important;
                gap: 30px !important;
                min-height: 80px !important;
            }

            #view-gallery .gallery-title-row {
                display: flex !important;
                align-items: center !important;
                gap: 15px !important;
                flex-shrink: 0 !important;
                height: 100% !important;
            }

            #view-gallery .logo {
                font-size: 20px !important;
                font-weight: 800 !important;
                color: #0f172a !important;
                white-space: nowrap !important;
                line-height: 1 !important;
            }

            #view-gallery .btn-back-hub {
                font-size: 14px !important;
                padding: 8px 16px !important;
                white-space: nowrap !important;
                line-height: 1 !important;
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
            }

            #view-gallery .header-tools {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 15px !important;
                flex-wrap: nowrap !important;
            }

            
            #view-gallery .gallery-filter-group {
                display: flex !important;
                gap: 10px !important;
                margin: 0 !important;
            }

            
            #view-gallery .btn-top {
                font-size: 14px !important;
                padding: 8px 16px !important;
                white-space: nowrap !important;
                min-width: auto !important;
            }
        }

        /* 鉁?銆愭柊鐗堛€戠函鍏夊奖鍛煎惛鍔ㄧ敾鍏抽敭甯?*/
        @keyframes shadowBreathing {
            0%, 100% {
                /* 鏀剁缉鐘舵€侊細鏅€氶槾褰?*/
                box-shadow: 0 15px 40px rgba(0,0,0,0.08);
                border-color: transparent;
            }
            50% {
                /* 鑸掑紶鐘舵€侊細闃村奖鎵╂暎鍙樺ぇ锛屽甫娣℃贰鐨勫搧鐗岃壊鍏夋檿锛岃竟妗嗗井寰硾缁?*/
                /* 閲嶇偣锛氭病鏈夊啓 transform: scale锛屾墍浠ョ洅瀛愪笉浼氬姩 */
                box-shadow: 0 25px 60px rgba(52, 211, 153, 0.25); 
                border-color: rgba(52, 211, 153, 0.15);
            }
        }
     /* ============================================================
           馃敶 鎵嬫満绔€傞厤 (鍝嶅簲寮忚璁＄増)
           璇存槑锛氫娇鐢ㄧ浉瀵瑰崟浣嶅疄鐜板畬鍏ㄨ嚜閫傚簲鐨勫搷搴斿紡璁捐
           ============================================================ */

        /* 灏忓睆鎵嬫満 */
        @media (max-width: 480px) {
            :root {
                --tool-panel-size: 25vw;
                --tool-btn-size: 7vw;
                --side-btn-size: 12vw;
            }
        }

        /* 澶у睆鎵嬫満鍜屽皬骞虫澘 */
        @media (min-width: 481px) and (max-width: 768px) {
            :root {
                --tool-panel-size: 25vw;
                --tool-btn-size: 7vw;
                --side-btn-size: 9vw;
            }
        }

        /* 骞虫澘 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .sidebar {
                width: min(380px, 35vw);
                min-width: min(380px, 35vw);
            }

            .hub-grid {
                grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
            }
        }

        /* ===== 馃啎 骞虫澘璁惧绠€鍖栭€傞厤 (768px - 1365px) ===== */
        @media (min-width: 768px) and (max-width: 1365px) {
            /* 宸ュ叿闈㈡澘 - 寮哄埗妯悜甯冨眬 */
            #view-tools {
                position: fixed !important;
                bottom: 30px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 10px !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: 320px !important;
                padding: 12px 16px !important;
                background: rgba(15, 23, 42, 0.95) !important;
                border-radius: 20px !important;
                box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
                z-index: 10000 !important;
            }

            #view-tools .tool-row {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px !important;
                justify-content: center !important;
                width: auto !important;
                max-width: 100% !important;
            }

            #view-tools .vc-btn {
                width: 48px !important;
                height: 48px !important;
                min-width: 48px !important;
                min-height: 48px !important;
                padding: 9px !important;
                font-size: 12px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }

            #view-tools .vc-btn i {
                font-size: 16px !important;
            }

            /* 澶у巺鎸夐挳缂╁皬 */
            
            .hub-card-new {
                padding: 12px 14px !important;
            }

            
            .hub-card-new > div:first-child {
                width: 48px !important;
                height: 48px !important;
                min-width: 48px !important;
                min-height: 48px !important;
            }

            

            

            /* 澶у巺瀹瑰櫒 - 澧炲姞椤堕儴杈硅窛 */
            

            /* 缁胯壊淇℃伅鏍忕缉灏?*/
            #blueprint-header,
            .bp-header {
                padding: 6px 10px !important;
                font-size: 11px !important;
            }

            .bp-header .bp-title {
                font-size: 12px !important;
            }

            .bp-header .bp-info-box {
                font-size: 10px !important;
            }

            /* 璋冭壊鏉夸紭鍖?*/
            #palette-modal .palette-grid {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
                gap: 10px !important;
            }

            #palette-modal .palette-item {
                min-height: 80px !important;
            }

            #palette-modal .pi-color {
                width: 42px !important;
                height: 42px !important;
            }

            /* 馃敟 骞虫澘绔寜閽樉绀烘帶鍒讹細闅愯棌鐢佃剳绔増鏈紝鏄剧ずmobile鐗堟湰 */
            #save-to-history-btn {
                display: none !important;
            }
            #save-to-draft-btn {
                display: none !important;
            }

            /* 骞虫澘绔湪blueprint妯″紡涓嬫樉绀簃obile鐗堟湰鐨勬寜閽?*/
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                display: inline-flex !important;
            }
            #view-editor.blueprint-mode #save-to-draft-btn-mobile {
                display: inline-flex !important;
            }

            /* 馃敟 骞虫澘绔痟eader鍗曡甯冨眬 */
            #view-editor .header {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                align-items: center !important;
                gap: 15px !important;
                padding: 10px 15px !important;
                overflow: visible !important;
            }

            #view-editor .header .logo {
                flex-shrink: 0 !important;
            }

            #view-editor .header-tools {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
                margin-top: 0 !important;
                overflow: visible !important;
            }

            #view-editor .btn-top {
                padding: 6px 10px !important;
                font-size: 11px !important;
                white-space: nowrap !important;
            }

            #view-editor .dl-group {
                display: flex !important;
                flex-direction: row !important;
                gap: 6px !important;
                align-items: center !important;
            }

            #view-editor .dl-check {
                font-size: 11px !important;
            }

            #view-editor .dl-select {
                font-size: 11px !important;
                padding: 4px 8px !important;
            }
        }

        /* 骞虫澘绔鐩栨墜鏈虹鐨勫伐鍏烽潰鏉挎牱寮?*/
        .tablet-header-actions {
            display: none !important;
        }

/* ===== 馃啎 骞虫澘璁惧绠€鍖栭€傞厤 (768px - 1365px) ===== */
@media (min-width: 768px) and (max-width: 1365px) {
    
    /* 1. 椤堕儴鎸夐挳鍖哄煙鏍峰紡 */
    .tablet-header-actions {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }

    /* 馃敟 [闃查棯鐑佹牳蹇?1]锛氱粰鐖跺鍣ㄥ缓绔嬬嫭绔嬬殑鈥滄覆鏌撻殧绂诲尯鈥?*/
    /* 杩欒浠ｇ爜鍛戒护娴忚鍣細涓嶈鎶婇噷闈㈢殑涓滆タ鍜屽闈㈢殑鑳屾櫙娣峰悎璁＄畻 */
    #view-inspiration, 
    #view-favorites, 
    #view-drafts {
        isolation: isolate !important; 
    }

    /* 2. 渚ц竟鏍忓熀纭€鏍峰紡 */
    #view-inspiration aside,
    #view-favorites aside,
    #view-drafts aside {
        display: flex !important;          
        position: fixed !important;        
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 280px !important;           
        height: 100vh !important;
        background: white !important;
        z-index: 100003 !important;        
        
        transform: translateX(-100%) !important; 
        /* 绉婚櫎 transform Z锛屽彧鐢ㄤ簩缁寸Щ鍔紝鏈夋椂 3D 涔熶細瀵艰嚧闂儊 */
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        pointer-events: auto !important;
        
        /* 馃敟 [闃查棯鐑佹牳蹇?2]锛氶殣钘忚儗闈紝闃叉鍔ㄧ敾鏃剁殑閲嶇粯 */
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* 3. 渚ц竟鏍忓脊鍑虹姸鎬?*/
    #view-inspiration aside.sidebar-show,
    #view-favorites aside.sidebar-show,
    #view-drafts aside.sidebar-show {
        transform: translateX(0) !important; 
    }

    /* 4. 閬僵灞傞槻闂儊鏍稿績锛氶娓叉煋 + 閫忔槑搴﹀垏鎹?*/
    /* 杩欓噷鐨勫叧閿槸鎶婇伄缃╁眰鏀惧湪鐙珛鐨?GPU 灞傜骇 */
    #view-inspiration::before,
    #view-favorites::before,
    #view-drafts::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5); 
        z-index: 100002 !important;      
        
        opacity: 0;             
        pointer-events: none;   
        
        /* 馃敟 [闃查棯鐑佹牳蹇?3]锛氬己鍒剁‖浠跺姞閫燂紝浣嗕笉瑕佺敤 blur */
        transform: translateZ(0); 
        will-change: opacity;
        transition: opacity 0.3s linear; /* 绾挎€ц繃娓￠€氬父姣旇礉濉炲皵鏇茬嚎鏇村皯闂儊 */
    }

    /* 婵€娲荤姸鎬?*/
    #view-inspiration.sidebar-overlay::before,
    #view-favorites.sidebar-overlay::before,
    #view-drafts.sidebar-overlay::before {
        opacity: 1;             
        pointer-events: auto;   
    }

    /* 5. 搴曢儴鍐呭灞傜骇淇濇姢 */
    /* 寮哄埗涓诲唴瀹瑰尯鍩熸槸涓€涓嫭绔嬬殑鍥惧眰锛屽苟涓斾笉鍙備笌灞傜骇娣峰悎 */
    #view-inspiration main,
    #view-favorites main,
    #view-drafts main {
        position: relative !important;
        z-index: 1 !important;
        /* 馃敟 [闃查棯鐑佹牳蹇?4]锛氬強鍏堕噸瑕佺殑灞炴€э紝閿佸畾鍥惧眰 */
        transform: translate3d(0,0,0) !important;
        -webkit-transform: translate3d(0,0,0) !important;
    }

    /* 6. 鍏朵粬骞虫澘鏍峰紡淇濈暀 */
    #view-tools[data-mobile-active] {
        flex-direction: row !important;
    }

    #view-inspiration.sidebar-overlay header,
    #view-favorites.sidebar-overlay header,
    #view-drafts.sidebar-overlay header {
        position: relative;
        z-index: 2002 !important;
    }

    /* 鎸夐挳 hover 鏍峰紡 */
    .sidebar-toggle-tablet:hover,
    header button:hover {
        background: rgba(240, 244, 244, 0.9) !important;
        color: #111817 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }

    /* 纭繚渚ц竟鏍忓唴閮ㄥ厓绱犲彲鐐瑰嚮 */
    #view-inspiration aside button,
    #view-favorites aside button,
    #view-drafts aside button,
    #view-inspiration aside a,
    #view-favorites aside a,
    #view-drafts aside a {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1 !important;
    }

}

        /* 骞虫澘绔栧睆 - 澶у箙澧炲姞椤堕儴杈硅窛 */
        @media (min-width: 768px) and (max-width: 1365px) and (orientation: portrait) {
            /* 绔栧睆鏃舵寜閽繘涓€姝ョ缉灏?*/
            
            .hub-card-new {
                padding: 10px 12px !important;
            }

            
            .hub-card-new > div:first-child {
                width: 42px !important;
                height: 42px !important;
            }

            

            

            /* 馃敟 绔栧睆鏃堕《閮ㄦ寜閽牱寮忎紭鍖?*/
            .header {
                flex-wrap: wrap !important;
                padding: 8px 12px !important;
                min-height: auto !important;
                align-items: flex-start !important;
            }

            /* logo鍖哄煙浣跨敤grid甯冨眬锛氳繑鍥炲ぇ鍘呭湪宸﹁竟锛屾枃瀛楀湪鍙宠竟涓婁笅涓よ */
            #view-editor .header .logo {
                display: grid !important;
                grid-template-columns: auto 1fr !important;
                grid-template-rows: auto auto !important;
                gap: 2px 10px !important;
                align-items: center !important;
            }

            /* 杩斿洖澶у巺鎸夐挳鍗犲乏杈癸紝璺?琛?*/
            #view-editor .header .logo .btn-back-hub {
                grid-row: 1 / 3 !important;
                grid-column: 1 !important;
                align-self: center !important;
            }

            /* 鎷艰眴鍥剧焊鐢熸垚鍣ㄥ湪鍙宠竟绗?琛?*/
            #view-editor .header .logo > span:first-of-type {
                grid-row: 1 !important;
                grid-column: 2 !important;
                font-size: 16px !important;
                line-height: 1.2 !important;
            }

            /* -鏂瑰潡灏忔．鏋楀湪鍙宠竟绗?琛?*/
            #view-editor .header .logo > span:last-of-type {
                grid-row: 2 !important;
                grid-column: 2 !important;
                font-size: 12px !important;
                line-height: 1.2 !important;
            }

            /* header-tools寰€宸︾Щ鍔紝闈犺繎logo */
            #view-editor .header {
                gap: 10px !important;
            }

            .header-tools {
                flex-wrap: wrap !important;
                gap: 6px !important;
                margin-left: 0 !important;
            }

            .btn-top {
                padding: 6px 10px !important;
                font-size: 11px !important;
                min-height: 36px !important;
                white-space: nowrap !important;
            }

            .btn-top i {
                font-size: 12px !important;
            }

            .btn-top span {
                font-size: 11px !important;
            }

            /* 绔栧睆鏃跺ぇ骞呭鍔犻《閮ㄨ竟璺濓紝纭繚鏈€涓婇潰2涓寜閽彲瑙?*/
            

            /* 澶у巺缃戞牸灞呬腑 */
            .hub-grid {
                margin: 0 auto !important;
                width: 90% !important;
                max-width: 600px !important;
            }
        }
        @media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
            .hub-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }

            .favorites-grid, .inspiration-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 16px !important;
            }

            .sidebar {
                width: 320px !important;
            }
        }

        /* 灏忓钩鏉挎í灞?(768px - 834px) */
        @media (min-width: 768px) and (max-width: 834px) and (orientation: landscape) {
            .hub-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
            }

            .favorites-grid, .inspiration-grid {
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 18px !important;
            }
        }

        /* 绉诲姩绔€氱敤鏍峰紡 (鎵嬫満+灏忓钩鏉? */
        @media (max-width: 768px) {
            
            /* --- [鍖哄煙1锛氬畬鍏ㄧ収鎼綘鐨勬簮浠ｇ爜] 淇濊瘉澶у巺/鐧诲綍/AI 100% 鍘熸牱 --- */
            
            body, html {
                width: 100vw !important; overflow-x: hidden !important; position: relative !important;
                -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
            }
            * { -webkit-overflow-scrolling: touch; }

            /* 淇濇寔浣犲師鏉ョ殑閫昏緫锛氶潪婵€娲婚殣钘忥紝婵€娲绘樉绀?*/
            .app-view { display: none !important; width: 100vw !important; height: 100vh !important; }
            .app-view.active { display: block !important; } /* 鈿狅笍 鍏抽敭锛氭仮澶?Block锛岃В鍐冲ぇ鍘呭竷灞€ */

            /* 鎵嬫満绔殣钘忛澶栫殑4涓崱鐗囷紙鐏垫劅銆佹敹钘忋€佽崏绋裤€佷釜浜猴級 */
            .hub-card-extra {
                display: none !important;
            }

            /* --- 馃摫 鎵嬫満绔ぇ鍘呯粓鏋佷紭鍖栵細澶ф寜閽?+ 鍧囧寑闂磋窛 + 瀹岀編灞呬腑 --- */

        /* 1. 缃戞牸瀹瑰櫒 */
        .hub-grid {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: 100% !important; /* 鏍稿績锛氬己鍒跺崰婊″搴︼紝淇闈犲乏闂 */
            
            /* 鏍稿績锛氶棿璺濋殢灞忓箷鍙橀暱鑰岃嚜鍔ㄦ媺澶?(鏈€灏?0px锛屽亸鍚?%鐨勫睆骞曢珮搴? */
            gap: clamp(20px, 3vh, 35px) !important;

            /* 鏍稿績锛氫笂涓嬪乏鍙崇暀鐧斤紝搴曢儴鐣欏嚭绌洪棿 */
            padding: 30px clamp(20px, 5vw, 30px) 30px clamp(20px, 5vw, 30px) !important;
            
            box-sizing: border-box !important;
            margin: 0 auto !important; /* 灞呬腑 */
            grid-template-columns: none !important;
        }
        
        /* 2. 鍗＄墖鎸夐挳涓讳綋 */
        
        
        /* 3. 鍥炬爣閫傞厤 */
        
        
        /* 4. 鏍囬鏂囧瓧閫傞厤 */
        
        
        /* 5. 鎻忚堪鏂囧瓧閫傞厤 */
        
        
        /* 6. 鍗＄墖鍙充晶淇℃伅鏍?(淇濇寔浼哥缉鎬? */
        

        /* 7. 鏂扮増鍗＄墖绉诲姩绔牱寮?*/
        .hub-card-new {
            width: 100% !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            min-height: clamp(110px, 16vh, 150px) !important;
            padding: 20px !important;
            text-align: left !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            border-radius: 24px !important;
            box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        }

        .hub-card-new .w-20 {
            width: 64px !important;
            height: 64px !important;
            margin: 0 !important;
            flex-shrink: 0 !important;
        }

        .hub-card-new .pixel-art-canvas {
            width: 48px !important;
            height: 48px !important;
        }

        .hub-card-new .flex-1 {
            flex: 1 !important;
            min-width: 0 !important;
            text-align: left !important;
            margin-left: 16px !important;
            writing-mode: horizontal-tb !important;
            direction: ltr !important;
        }

        .hub-card-new h3 {
            font-size: clamp(16px, 4vw, 18px) !important;
            margin: 0 0 4px 0 !important;
            white-space: normal !important;
            word-wrap: break-word !important;
            writing-mode: horizontal-tb !important;
        }

        .hub-card-new p {
            font-size: clamp(12px, 3vw, 14px) !important;
            margin: 0 !important;
            opacity: 0.8;
            white-space: normal !important;
            word-wrap: break-word !important;
            writing-mode: horizontal-tb !important;
        }

        .hub-card-new .space-x-5 {
            gap: 16px !important;
        }

        .hub-card-new .material-symbols-outlined {
            flex-shrink: 0 !important;
        }

            /* 鐧诲綍椤垫仮澶?*/
            
            
            
            
            
            
            
            
            

            /* AI椤垫仮澶?*/
            .btn-back-hub { margin-bottom: 10px !important; font-size: 12px !important; padding: 6px 10px !important; white-space: nowrap !important; }

            /* 鐢诲粖椤垫仮澶?*/
            #view-gallery .hub-header {
                height: auto !important;
                min-height: 140px !important;
                flex-wrap: wrap !important;
                padding: 15px !important;
                gap: 15px !important;
                display: flex !important;
                flex-direction: column !important;
            }

            /* 鏍囬琛岋細杩斿洖鎸夐挳鍜屾爣棰樺湪鍚屼竴琛?*/
            #view-gallery .gallery-title-row {
                width: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 15px !important;
            }

            #view-gallery .logo {
                font-size: 16px !important;
                font-weight: 800 !important;
                flex: 1 !important;
                text-align: center !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            #view-gallery .logo span {
                writing-mode: horizontal-tb !important;
                display: inline !important;
            }
            #view-gallery .btn-back-hub {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                font-size: 12px !important;
                padding: 6px 10px !important;
                flex-shrink: 0 !important;
            }

            /* 鎸夐挳鍖哄煙 */
            #view-gallery .header-tools {
                width: 100% !important;
                flex-direction: column !important;
                gap: 10px !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
            }
            
            #view-gallery .gallery-filter-group {
                width: auto !important;
                display: flex !important;
                justify-content: center !important;
                gap: 10px !important;
            }
            
            #view-gallery .btn-top {
                flex: 0 1 auto !important;
                min-width: 100px !important;
                font-size: 13px !important; /* 澧炲ぇ1涓瓧鍙?*/
                padding: 10px 15px !important;
                white-space: nowrap !important;
                text-align: center !important; /* 鏂囧瓧灞呬腑 */
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            #view-gallery .header-tools > div[style*="width:1px"] {
                display: none !important;
            }
            #gallery-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 10px !important; gap: 10px !important; }
            .gallery-card img { height: 120px !important; }
            
            
            #gal-filter-bead { flex: 0 0 auto !important; margin: 0 !important; min-width: auto !important; flex-shrink: 0 !important; }

            /* Bug 2鍜孊ug 3淇锛氭墜鏈虹鍜岀數鑴戠鎸夐挳鏄剧ず鎺у埗 */
            /* 榛樿鏄剧ず鐢佃剳绔寜閽紝闅愯棌鎵嬫満绔寜閽?*/
            #save-to-history-btn {
                display: inline-flex !important;
                align-items: center;
                gap: 5px;
                font-size: 14px !important;
                padding: 8px 12px !important;
                white-space: nowrap !important;
            }
            #save-to-history-btn span {
                display: inline !important;
            }
            #save-to-history-btn-mobile {
                display: none !important;
            }

            /* 鎵嬫満绔細闅愯棌鐢佃剳绔寜閽紝榛樿闅愯棌鎵嬫満绔寜閽?*/
            #save-to-history-btn {
                display: none !important;
            }
            #save-to-history-btn-mobile {
                display: none !important;
            }

            /* 鎵嬫満绔細鍙湪blueprint妯″紡涓嬫樉绀烘墜鏈虹淇濆瓨鎸夐挳 */
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
                font-size: 13px !important;
                padding: 8px 14px !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }
            #view-editor.blueprint-mode #save-to-history-btn-mobile span {
                display: inline !important;
                font-size: 13px !important;
            }

            /* 缂栬緫鍣ㄦ仮澶?(榛樿鐢诲浘鐘舵€? */
            .layout { flex-direction: column-reverse !important; }
            .sidebar {
                width: 100% !important;
                min-width: 0 !important; /* 绉婚櫎鏈€灏忓搴﹂檺鍒?*/
                height: 45vh !important;
                border-top: 2px solid #cbd5e1 !important;
                padding-bottom: clamp(60px, 10vh, 80px) !important;
                padding-left: clamp(8px, 1.5vw, 10px) !important;
                padding-right: clamp(8px, 1.5vw, 10px) !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                box-sizing: border-box !important; /* 纭繚padding鍖呭惈鍦╳idth鍐?*/
            }
            .workspace {
                flex: 1 !important;
                height: 55vh !important;
                display: flex !important;
                flex-direction: column !important;
            }
            #vp-left, #vp-right {
                width: 100% !important;
                height: 100% !important;
                border: none !important;
                box-sizing: border-box !important; /* 纭繚padding鍖呭惈鍦╳idth鍐?*/
            }

            /* 绉诲姩绔寜閽紭鍖?*/
            .sidebar-actions {
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .btn-outline, .btn-danger {
                font-size: 12px !important;
                padding: 8px 6px !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            /* 馃敟 鎵嬫満绔伐鍏烽潰鏉夸娇鐢╢ixed瀹氫綅浠ユ敮鎸佹嫋鍔?*/
            .bottom-float-panel {
                position: fixed !important;
                bottom: 48vh !important;
                width: 95% !important;
                transform: translateX(-50%) scale(0.9) !important;
            }

            .header { height: auto !important; min-height: 50px !important; padding: 8px 10px !important; flex-wrap: wrap !important; }
            .header .logo { font-size: 14px !important; display: flex !important; align-items: center !important; width: 100% !important; gap: 5px !important; }
            
            .header-tools { width: 100% !important; margin-top: 10px !important; flex-wrap: wrap !important; gap: 8px !important; }
            
            .btn-top { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap !important; min-height: 44px !important; touch-action: manipulation; }
            
            .side-float-bar .side-btn {
                width: var(--side-btn-size) !important;
                height: var(--side-btn-size) !important;
                font-size: clamp(12px, 2vw, 14px) !important;
            }
            .side-float-bar .float-color-indicator {
                width: var(--side-btn-size) !important;
                height: var(--side-btn-size) !important;
                font-size: clamp(8px, 1.5vw, 10px) !important;
            }
            .side-left {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                width: clamp(70px, 12vw, 80px) !important;
                gap: clamp(4px, 0.8vw, 5px) !important;
            }
            .side-left .side-btn, .side-left .float-color-indicator {
                flex: 0 0 var(--side-btn-size) !important;
            }

            /* 馃敟 闅愯棌鎵嬫満绔殑1:1鎸夐挳 */
            #btn-reset-one-to-one {
                display: none !important;
            }

            /* 馃敟 闅愯棌鎵嬫満绔殑鐢婚潰澶嶄綅鎸夐挳 */
            #btn-reset-view {
                display: none !important;
            }

            /* 馃敟 淇敼鎵嬫満绔鑹查€夋嫨妗嗘牱寮?*/
            .modal-box.small {
                width: min(350px, 85vw) !important;
                max-height: 60vh !important;
            }

            #palette-grid {
                max-height: 50vh !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
            }

            .panel { margin-bottom: 10px !important; padding-bottom: 10px !important; margin-left: 0 !important; margin-right: 0 !important; }
            .summary-bar { margin-top: 0 !important; }
            
            .slider-box { padding: 8px !important; }
            .input-num { width: 60px !important; font-size: 13px !important; }
            /* 閫氱敤鎸夐挳 */
            button, .btn-gen{ min-height: 44px !important; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
            
           /* --- [绗簩閮ㄥ垎] 馃煝 涓撲笟鍥剧焊妯″紡 (V5.0 浜や簰鍗囩骇鐗? --- */
            /* 鏍稿績閫昏緫锛氱豢鑹叉爮鍙樺崟琛屾粴鍔紝搴曢儴鏍忓钩鏃堕殣钘忥紝鐣欏嚭鏈€澶х┖闂寸粰鍥剧墖 */

            #view-editor.blueprint-mode {
                position: fixed !important; inset: 0 !important;
                z-index: 5000 !important; background: #e2e8f0 !important;
                display: flex !important; flex-direction: column !important;
                overflow: hidden !important;
            }

            /* 闅愯棌鏃犲叧鍏冪礌 */
            #view-editor.blueprint-mode .sidebar, 
            #view-editor.blueprint-mode #vp-left { display: none !important; }

            /* 1. 澶撮儴锛氫繚鎸佺疆椤?*/
            #view-editor.blueprint-mode .header {
                flex-shrink: 0 !important; position: relative !important; z-index: 100002 !important;
            }

            /* 2. 馃煝 缁胯壊淇℃伅鏍忥細鏀逛负瓒呯獎鍗曡 (宸﹀彸婊戝姩鏌ョ湅鏇村) */
            #view-editor.blueprint-mode .bp-header {
                flex-shrink: 0 !important; position: relative !important; z-index: 5500 !important;
                display: flex !important; flex-direction: row !important; /* 鏀逛负妯悜 */
                width: 100% !important; height: clamp(44px, 6vh, 48px) !important; /* 馃敀 閿佹楂樺害锛岄潪甯哥獎 */
                margin: 0 !important; padding: 0 clamp(8px, 1.5vw, 10px) !important;
                align-items: center !important; overflow-x: auto !important; /* 鍏佽妯悜婊戝姩 */
                white-space: nowrap !important;
                background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            #view-editor.blueprint-mode .bp-left {
                width: auto !important;
                margin-right: clamp(12px, 2vw, 15px);
                flex-shrink: 0;
            }
            #view-editor.blueprint-mode .bp-title {
                font-size: clamp(12px, 1.8vw, 13px) !important;
            }
            #view-editor.blueprint-mode .bp-tip { display: none !important; } /* 闅愯棌搴熻瘽鎻愮ず锛岀渷绌洪棿 */
            #view-editor.blueprint-mode .bp-info-box {
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: clamp(12px, 2vw, 15px) !important;
                align-items: center !important;
            }
            #view-editor.blueprint-mode .bp-info-item {
                flex: 0 0 auto !important;
                min-width: auto !important;
                flex-direction: row !important;
                gap: clamp(4px, 0.8vw, 5px) !important;
                align-items: center !important;
            }
            #view-editor.blueprint-mode .bp-info-label {
                font-size: clamp(9px, 1.5vw, 10px) !important;
                color: rgba(255,255,255,0.8);
                margin:0 !important;
            }
            #view-editor.blueprint-mode .bp-info-val {
                font-size: clamp(12px, 2vw, 14px) !important;
                color: white;
            }

            /* 3. 馃煝 鏍稿績婊氬姩鍖猴細鏋佸ぇ閲婃斁绌洪棿 */
            #view-editor.blueprint-mode #vp-right {
                position: relative !important; flex: 1 !important;
                width: 100% !important; height: auto !important;
                overflow-y: auto !important; -webkit-overflow-scrolling: touch;
                /* 搴曢儴鍙暀涓€鐐圭偣缂濋殭锛屽洜涓哄伐鍏锋爮榛樿鏄殣钘忕殑 */
                padding: clamp(8px, 1.5vw, 10px) 0 clamp(60px, 10vh, 80px) 0 !important;
                background: #f1f5f9 !important;
                display: block !important;
            }

            /* 4. 鍐呭瀹瑰櫒 */
            #view-editor.blueprint-mode .content-container {
                width: 100% !important; min-height: 100% !important;
                display: flex !important; flex-direction: column !important; align-items: center !important;
                overflow: visible !important; transform: none !important;
            }
            #view-editor.blueprint-mode .content-wrap {
                position: relative !important; transform: none !important;
                width: 100% !important; height: auto !important;
                display: flex !important; justify-content: center !important;
                opacity: 1 !important; top: auto !important; left: auto !important;
            }
            #view-editor.blueprint-mode #final-cvs {
                display: block !important;
                max-width: 95% !important; /* 瀹藉害鍑犱箮鍗犳弧 */
                height: auto !important; margin: 0 auto !important;
                box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
            }

            /* 5. 馃煝 搴曢儴宸ュ叿鏍忥細榛樿闅愯棌鍒板睆骞曚笅鏂?(鎶藉眽寮? */
            #view-editor.blueprint-mode .bottom-float-panel,
            #view-editor.blueprint-mode #view-tools {
                display: flex !important; position: fixed !important;
                bottom: clamp(15px, 2.5vh, 20px) !important; left: 50% !important;
                transform: translate(-50%, 150%) !important; /* 绉诲嚭灞忓箷 */
                z-index: 9999 !important;
                width: min(92vw, 400px) !important;
                max-width: 92vw !important;
                background: rgba(15, 23, 42, 0.98) !important;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 涓濇粦鍔ㄧ敾 */
                border-radius: clamp(12px, 2vw, 16px) !important;
                padding: clamp(12px, 2vw, 15px) !important;
                opacity: 0; pointer-events: none; /* 闅愯棌鏃朵笉鍙偣 */
            }
            /* 婵€娲荤姸鎬侊細寮逛笂鏉?*/
            #view-editor.blueprint-mode .bottom-float-panel.panel-active,
            #view-editor.blueprint-mode #view-tools.panel-active {
                transform: translate(-50%, 0) !important;
                opacity: 1 !important; pointer-events: auto !important;
            }

            /* 6. 馃煝 浣犵殑鏂伴渶姹傦細鍦嗗舰鐨?宸ュ叿绠?寮€鍏虫寜閽?*/
            #mobile-tool-trigger {
                display: none; /* JS浼氭帶鍒跺畠鏄剧ず */
            }
            #view-editor.blueprint-mode #mobile-tool-trigger {
                display: flex !important;
                position: fixed !important;
                bottom: clamp(25px, 4vh, 30px) !important;
                right: clamp(15px, 3vw, 20px) !important;
                width: var(--mobile-trigger-size) !important;
                height: var(--mobile-trigger-size) !important;
                background: var(--dark) !important;
                color: white !important;
                border-radius: 50% !important;
                box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
                z-index: 10000 !important; /* 蹇呴』鍦ㄦ渶涓婇潰 */
                justify-content: center !important;
                align-items: center !important;
                font-size: clamp(18px, 3vw, 24px) !important;
                cursor: pointer !important;
                transition: 0.2s !important;
                border: 2px solid rgba(255,255,255,0.2) !important;
            }
            #view-editor.blueprint-mode #mobile-tool-trigger:active {
                transform: scale(0.9);
            }

            /* 馃敟 淇敼锛氬湪blueprint妯″紡涓嬩繚鎸佷晶杈规寜閽彲瑙佸拰鍙敤 */
            #view-editor.blueprint-mode .side-float-bar {
                display: flex !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }
            /* --- 馃煝 浠呴拡瀵瑰浘绾告ā寮忕殑寰皟琛ヤ竵锛屼笉褰卞搷鍏朵粬鍦版柟 --- */
            #view-editor.blueprint-mode .bp-header {
                height: 46px !important;            /* 寮鸿缂╃獎缁胯壊鏍?*/
                min-height: 46px !important;
                padding: 0 10px !important;
                overflow-x: auto !important;        /* 鍏佽妯悜婊戝姩 */
                white-space: nowrap !important;     /* 寮哄埗鍗曡 */
                flex-direction: row !important;
                align-items: center !important;
            }
            #view-editor.blueprint-mode .bp-info-item {
                flex-direction: row !important;     /* 淇℃伅椤逛篃鍙樺崟琛?*/
                gap: 5px !important;
                align-items: center !important;
            }
            #view-editor.blueprint-mode .bp-info-label, 
            #view-editor.blueprint-mode .bp-tip {
                display: none !important;           /* 闅愯棌鏂囧瓧鏍囩锛屽彧鐣欐暟瀛?*/
            }
            #view-editor.blueprint-mode .bp-info-val {
                font-size: 14px !important;         /* 鏁板瓧绋嶅井璋冨皬鐐?*/
            }

            /* 寮哄埗璁╁浘鐗囧尯鍩熷～婊″墿涓嬬殑鎵€鏈夌┖闂?*/
            #view-editor.blueprint-mode #vp-right {
                flex: 1 !important;
                height: auto !important;
                padding-bottom: 80px !important;
            }

            /* 馃敶 澧炲己鐗堬細寮哄埗鏄剧ず宸ュ叿闈㈡澘鐨勬牱寮?- 鏀逛负鍦嗙幆褰㈠紡 */
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"],
            #view-editor.blueprint-mode .bottom-float-panel[data-mobile-active="show-now"] {
                /* 鏀逛负鍦嗙幆甯冨眬 */
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                gap: var(--panel-gap) !important;

                position: fixed !important;
                bottom: 15vh !important;
                left: 50% !important;
                transform: translateX(-50%) !important;

                width: var(--tool-panel-size) !important;
                max-width: 90vw !important;
                aspect-ratio: 1 / 1 !important;
                border-radius: 50% !important;  /* 鍦嗗舰 */

                background: rgba(15, 23, 42, 0.85) !important;
                padding: var(--panel-padding) !important;

                z-index: 100000 !important;
                pointer-events: auto !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* 鍦嗙幆鍐呯殑鎸夐挳鏍峰紡 */
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn,
            #view-editor.blueprint-mode .bottom-float-panel[data-mobile-active="show-now"] .vc-btn {
                width: var(--tool-btn-size) !important;
                height: var(--tool-btn-size) !important;
                min-width: var(--tool-btn-size) !important;
                border-radius: 50% !important;
                padding: 0 !important;
                font-size: clamp(12px, 2.5vw, 16px) !important;
            }

            /* 鍦嗙幆鍐呮寜閽殑鍥炬爣灏哄 */
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn i,
            #view-editor.blueprint-mode .bottom-float-panel[data-mobile-active="show-now"] .vc-btn i {
                font-size: clamp(18px, 3vw, 24px) !important;
            }

            /* 閫変腑鐘舵€佺殑鎸夐挳 */
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn.active,
            #view-editor.blueprint-mode .bottom-float-panel[data-mobile-active="show-now"] .vc-btn.active {
                background: var(--accent) !important;
                color: white !important;
                font-weight: 900 !important;
                transform: scale(1.1) !important;
                box-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important;
            }

            /* 褰撳渾鐩樻樉绀烘椂锛岄殣钘忓簳閮ㄦí鍚戝伐鍏锋爮 */
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] ~ .bottom-float-panel {
                display: none !important;
            }

            /* 闅愯棌鍒嗛殧绾?*/
            
            #view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .row-sep {
                display: none !important;
            }

            /* 馃敟 鎵嬫満绔珫灞忕姸鎬佷笅鐏垫劅椤甸潰鏂囧瓧妯悜鏄剧ず */
            @media (max-width: 768px) and (orientation: portrait) {
                /* 鐏垫劅椤甸潰绛涢€夋寜閽?*/
                #view-inspiration .flex.gap-2.bg-\\[\\#f0f4f4\\] {
                    writing-mode: horizontal-tb !important;
                    flex-wrap: wrap !important;
                }

                #view-inspiration button {
                    writing-mode: horizontal-tb !important;
                }

                /* 馃敟 鎵嬫満绔晶杈规爮鏍峰紡 */
                #view-inspiration aside,
                #view-favorites aside,
                #view-drafts aside {
                    display: flex !important;
                    position: fixed !important;
                    left: 0 !important;
                    top: 0 !important;
                    width: 240px !important;
                    height: 100vh !important;
                    background: white !important;
                    z-index: 100003 !important;
                    transform: translateX(-100%) !important;
                    transition: transform 0.3s ease !important;
                    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
                }

                #view-inspiration aside.sidebar-show,
                #view-favorites aside.sidebar-show,
                #view-drafts aside.sidebar-show {
                    transform: translateX(0) !important;
                }

                /* 馃敟 渚ц竟鏍忔墦寮€鏃剁殑閬僵灞?*/
                #view-inspiration.sidebar-overlay::before,
                #view-favorites.sidebar-overlay::before,
                #view-drafts.sidebar-overlay::before {
                    content: '';
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 1999;
                    pointer-events: auto;
                }

                /* 馃敟 渚ц竟鏍忔墦寮€鏃讹紝鎸夐挳鍥哄畾鍦ㄤ晶杈规爮椤堕儴 */
                #view-inspiration aside.sidebar-show ~ main .lg\:hidden,
                #view-favorites aside.sidebar-show ~ main .lg\:hidden,
                #view-drafts aside.sidebar-show ~ main .lg\:hidden {
                    position: fixed !important;
                    top: 10px !important;
                    left: 10px !important;
                    z-index: 2001 !important;
                    background: white !important;
                    border-radius: 8px !important;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
                }

                /* 渚ц竟鏍忔墍鏈夋枃瀛楁í鍚戞樉绀?*/
                #view-inspiration aside *,
                #view-favorites aside *,
                #view-drafts aside * {
                    writing-mode: horizontal-tb !important;
                }

                /* 渚ц竟鏍忓唴鐨勪氦浜掑厓绱犵‘淇濆彲鐐瑰嚮 */
                #view-inspiration aside a,
                #view-inspiration aside button,
                #view-favorites aside a,
                #view-favorites aside button,
                #view-drafts aside a,
                #view-drafts aside button {
                    pointer-events: auto !important;
                    cursor: pointer !important;
                    position: relative !important;
                    z-index: 1 !important;
                }

                /* 涓诲唴瀹瑰尯鍩熻皟鏁?*/
                #view-inspiration main,
                #view-favorites main,
                #view-drafts main {
                    margin-left: 0 !important;
                    width: 100% !important;
                }

                /* 鎵€鏈夋寜閽枃瀛楁í鍚戞樉绀?*/
                #view-inspiration button,
                #view-inspiration a,
                #view-favorites button,
                #view-favorites a,
                #view-drafts button,
                #view-drafts a {
                    writing-mode: horizontal-tb !important;
                }

                #view-inspiration button span,
                #view-inspiration a span,
                #view-favorites button span,
                #view-favorites a span,
                #view-drafts button span,
                #view-drafts a span {
                    writing-mode: horizontal-tb !important;
                }
            }

            /* 馃敟 鎵嬫満绔拰骞虫澘绔í灞忕姸鎬佷笅涔熷簲鐢ㄧ浉鍚岀殑鏍峰紡 */
            @media (max-width: 1365px) {
                /* 渚ц竟鏍忔牱寮?*/
                #view-inspiration aside,
                #view-favorites aside,
                #view-drafts aside {
                    display: flex !important;
                    position: fixed !important;
                    left: 0 !important;
                    top: 0 !important;
                    width: 240px !important;
                    height: 100vh !important;
                    background: white !important;
                    z-index: 100003 !important;
                    transform: translateX(-100%) !important;
                    transition: transform 0.3s ease !important;
                    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
                    pointer-events: auto !important;
                }

                #view-inspiration aside.sidebar-show,
                #view-favorites aside.sidebar-show,
                #view-drafts aside.sidebar-show {
                    transform: translateX(0) !important;
                }

                /* 馃敟 渚ц竟鏍忔墦寮€鏃剁殑閬僵灞?*/
                #view-inspiration.sidebar-overlay::before,
                #view-favorites.sidebar-overlay::before,
                #view-drafts.sidebar-overlay::before {
                    content: '';
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 1999;
                    pointer-events: auto;
                }

                /* 馃敟 渚ц竟鏍忔墦寮€鏃讹紝鎸夐挳鍥哄畾鍦ㄤ晶杈规爮椤堕儴 */
                #view-inspiration aside.sidebar-show ~ main .lg\:hidden,
                #view-favorites aside.sidebar-show ~ main .lg\:hidden,
                #view-drafts aside.sidebar-show ~ main .lg\:hidden {
                    position: fixed !important;
                    top: 10px !important;
                    left: 10px !important;
                    z-index: 2001 !important;
                    background: white !important;
                    border-radius: 8px !important;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
                }

                /* 渚ц竟鏍忔墍鏈夋枃瀛楁í鍚戞樉绀?*/
                #view-inspiration aside *,
                #view-favorites aside *,
                #view-drafts aside * {
                    writing-mode: horizontal-tb !important;
                }

                /* 渚ц竟鏍忓唴鐨勪氦浜掑厓绱犵‘淇濆彲鐐瑰嚮 */
                #view-inspiration aside a,
                #view-inspiration aside button,
                #view-favorites aside a,
                #view-favorites aside button,
                #view-drafts aside a,
                #view-drafts aside button {
                    pointer-events: auto !important;
                    cursor: pointer !important;
                    position: relative !important;
                    z-index: 1 !important;
                }

                /* 涓诲唴瀹瑰尯鍩熻皟鏁?*/
                #view-inspiration main,
                #view-favorites main,
                #view-drafts main {
                    margin-left: 0 !important;
                    width: 100% !important;
                }

                /* 鎵€鏈夋寜閽枃瀛楁í鍚戞樉绀?*/
                #view-inspiration button,
                #view-inspiration a,
                #view-favorites button,
                #view-favorites a,
                #view-drafts button,
                #view-drafts a {
                    writing-mode: horizontal-tb !important;
                }

                #view-inspiration button span,
                #view-inspiration a span,
                #view-favorites button span,
                #view-favorites a span,
                #view-drafts button span,
                #view-drafts a span {
                    writing-mode: horizontal-tb !important;
                }

            }
        }
        /* 闂2锛氭í灞忔ā寮忎笅鐨勭櫥褰曢〉闈㈡粴鍔ㄦ敮鎸?*/
        @media screen and (max-height: 600px) and (orientation: landscape) {
            #view-login {
                overflow-y: auto !important;
                align-items: flex-start !important;
                padding: 20px 0 !important;
            }
            
        }

        /* 瓒呭皬灞忔墜鏈猴細鍙樉绀哄浘鏍?*/
        @media (max-width: 380px) {
            #view-editor.blueprint-mode #save-to-history-btn-mobile span {
                display: none !important;
            }
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                padding: 10px !important;
                min-width: 44px !important;
                justify-content: center !important;
            }
        }

        /* 灏忓睆鎵嬫満锛氭樉绀哄畬鏁存枃瀛?*/
        @media (max-width: 480px) and (min-width: 381px) {
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                font-size: 11px !important;
                padding: 8px 10px !important;
            }
            #view-editor.blueprint-mode #save-to-history-btn-mobile span {
                display: inline !important;
                font-size: 11px !important;
            }
        }

        /* 涓瓑灞忓箷鎵嬫満锛氭樉绀哄畬鏁存枃瀛椾絾瀛楀彿绋嶅皬 */
        @media (max-width: 768px) and (min-width: 481px) {
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                font-size: 12px !important;
                padding: 8px 12px !important;
            }
            #view-editor.blueprint-mode #save-to-history-btn-mobile span {
                display: inline !important;
                font-size: 12px !important;
            }
        }

/* 馃敶 鎮诞鎸夐挳鏍峰紡锛氶粯璁ら殣钘忥紝鍙湪blueprint妯″紡涓嬫樉绀?*/
#mobile-tool-trigger {
    display: none !important; /* 榛樿闅愯棌 */
    position: fixed !important;
    bottom: clamp(25px, 4vh, 30px) !important;
    right: clamp(15px, 3vw, 20px) !important;
    width: var(--mobile-trigger-size) !important;
    height: var(--mobile-trigger-size) !important;
    background: #ff4757 !important; /* 浜孩鑹?*/
    color: white !important;
    border-radius: 50% !important;
    z-index: 10001 !important; /* 纭繚瀹冨湪鏈€椤跺眰 */
    justify-content: center !important;
    align-items: center !important;
    font-size: clamp(12px, 2vw, 14px) !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    border: 2px solid white !important;
}

/* 宸ュ叿鏍忓脊鍑虹殑鏍峰瓙锛氬彧閽堝浣嶇疆鍋氫綅绉?*/
#view-tools.panel-active, .bottom-float-panel.panel-active {
    transform: translate(-50%, 0) !important; /* 寮瑰嚭鏉?*/
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* 馃敶 杩欎釜灞炴€ч€夋嫨鍣ㄦ嫢鏈夋瀬楂樼殑浼樺厛绾э紝涓撻棬瀵逛粯鐐瑰嚮涓嶅脊鍑虹殑闂 */
[data-mobile-active="show-now"] {
    display: flex !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    z-index: 99999 !important; /* 纭繚鐩栬繃涓€鍒?*/
}
/* 馃敶 鏁戝懡琛ヤ竵锛氬己鍒舵樉绀洪粦鑹插伐鍏风 */
[data-mobile-active="show-now"] {
    display: flex !important;           /* 寮哄埗澶嶆椿 */
    visibility: visible !important;      /* 寮哄埗鍙 */
    opacity: 1 !important;               /* 寮哄埗涓嶉€忔槑 */
    transform: translate(-50%, 0) !important; /* 寮哄埗浣嶇Щ鍥炲睆骞曚腑蹇冨簳閮?*/
    position: fixed !important;
    bottom: clamp(25px, 4vh, 30px) !important;
    left: 50% !important;
    width: min(92vw, 400px) !important;
    max-width: 92vw !important;
    z-index: 100000 !important;          /* 蹇呴』鍘嬭繃 Canvas 鍥剧焊 */
    pointer-events: auto !important;     /* 蹇呴』璁╂寜閽彲鐐?*/
    background: rgba(15, 23, 42, 0.98) !important; /* 淇濇寔娣辫壊鑳屾櫙 */
    border-radius: clamp(30px, 5vw, 40px) !important;
}

/* 纭繚绾㈣壊鎸夐挳姘歌繙鍦ㄦ渶鏈€涓婇潰 */
#mobile-tool-trigger {
    z-index: 100001 !important; 
    cursor: pointer !important;
    pointer-events: auto !important;
}
/* ============================================================
   馃煝 缁堟瀬淇锛氬己鍒跺皢鍦嗙洏鎵撳洖鍘熷舰 (鍙樹负搴曢儴鑳跺泭鏍?
   ============================================================ */

/* 1. 閽堝鎵嬫満鍥剧焊妯″紡鐨勭壒寮傛€ц鐩?*/
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"],
#view-editor.blueprint-mode .bottom-float-panel[data-mobile-active="show-now"] {
    
    /* 鏍稿績锛氭墦鐮村渾褰㈠拰姝ｆ柟褰㈡瘮渚?*/
    border-radius: 20px !important;        /* 鍙樺洖鍦嗚鐭╁舰 */
    aspect-ratio: auto !important;         /* 鍙栨秷 1:1 姝ｆ柟褰㈤攣瀹?*/
    width: auto !important;                /* 瀹藉害鑷€傚簲 */
    height: auto !important;               /* 楂樺害鑷€傚簲 */
    max-width: 90vw !important;
    
    /* 鏍稿績锛氶噸鏂板畾浣嶅埌搴曢儴姝ｄ腑 */
    position: fixed !important;
    left: 50% !important;
    bottom: 100px !important;              /* 鎮诞鍦ㄧ孩鑹叉寜閽笂鏂?*/
    transform: translateX(-50%) !important;
    
    /* 鏍峰紡锛氭繁鑹茬幓鐠冭川鎰?*/
    background: rgba(15, 23, 42, 0.95) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    padding: 15px 20px !important;
    
    /* 甯冨眬锛氭仮澶嶅唴閮ㄦ帓鍒?*/
    display: flex !important;
    flex-direction: column !important;     /* 涓婁笅涓ゆ帓 */
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. 鎭㈠鍐呴儴鎸夐挳鐨勬甯告帓鍒?(鍙栨秷鍦嗗懆鍒嗗竷) */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn {
    position: relative !important;         /* 鎭㈠鐩稿瀹氫綅锛屼笉鍐嶇粷瀵瑰畾浣嶄贡椋?*/
    top: auto !important;
    left: auto !important;
    transform: none !important;            /* 鍙栨秷鏃嬭浆 */
    
    width: auto !important;
    min-width: 60px !important;
    height: auto !important;
    
    border-radius: 8px !important;         /* 鎸夐挳鍙樺洖鍦嗚鏂瑰潡 */
    background: transparent !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    color: #94a3b8 !important;
}

/* 3. 鎸夐挳鍥炬爣淇 */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn i {
    font-size: 20px !important;
    margin-bottom: 4px !important;
    display: block !important;
    transform: none !important;            /* 纭繚鍥炬爣涓嶅€掔珛 */
}

/* 4. 鎸夐挳鏂囧瓧鏄剧ず */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn span,
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn div {
    display: block !important;
    font-size: 10px !important;
    transform: none !important;
}

/* 5. 閫変腑楂樹寒 */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn.active {
    background: #34d399 !important;
    color: white !important;
    box-shadow: none !important;
}

/* 5.1 绉诲姩绔挙閿€鎸夐挳鐐瑰嚮鍙嶉 */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .vc-btn.btn-restore.active {
    background: #22c55e !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.6) !important;
}

/* 6. 鎭㈠鍒嗗壊绾?(璁╀袱鎺掓寜閽垎寮€) */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .row-sep {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(255,255,255,0.1) !important;
    margin: 5px 0 !important;
}

/* 7. 鎭㈠妯悜鎺掑垪 */
#view-editor.blueprint-mode #view-tools[data-mobile-active="show-now"] .tool-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
    justify-content: center !important;
}
/* 鉁?浼樺寲鍚庣殑鎮诞鐞冩牱寮?*/
#mobile-tool-trigger {
    /* 浣嶇疆 */
    bottom: 30px !important;
    right: 20px !important;
    width: 56px !important;  /* 绋嶅井澶т竴鐐圭偣 */
    height: 56px !important;
    
    /* 棰滃€兼牳蹇冿細娓愬彉鑹?+ 寮ユ暎鎶曞奖 */
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%) !important;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4) !important;
    border: 2px solid rgba(255,255,255,0.3) !important; /* 鍗婇€忔槑鎻忚竟澧炲姞灞傛 */
    
    /* 瀛椾綋 */
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    
    /* 鍔ㄧ敾 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 鎸変笅鏃剁殑寰姩鏁?*/
#mobile-tool-trigger:active {
    transform: scale(0.9) !important;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.2) !important;
}

/* 琛ュ厖涓€涓笂娴姩鐢荤粰宸ュ叿鏍忕敤 */
@keyframes slideUp {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
/* 馃敶 寮哄埗鎵€鏈夊甫鏈?btn-restore 绫荤殑鎸夐挳鍦ㄧ數鑴戠鏄剧ず涓虹孩鑹茶绀洪 */
#view-tools .vc-btn.btn-restore {
    color: #ff4757 !important; /* 绾㈣壊鏂囧瓧 */
}
#view-tools .vc-btn.btn-restore:active {
    background: rgba(255, 71, 87, 0.15) !important; /* 鎸変笅鏃舵硾绾㈠厜 */
}
/* =========================================
   馃殌 寮圭獥缁堟瀬淇锛氬眰绾с€佹粴鍔ㄣ€佸叧闂?   ========================================= */

/* 1. 瑙ｅ喅閬尅锛氭妸寮圭獥灞傜骇鎻愬埌瀹囧畽鏈€楂橈紝鍘嬭繃鎵€鏈夊伐鍏锋爮 */
.modal-overlay {
    z-index: 999999 !important; 
}

/* 2. 鎵嬫満绔竷灞€浼樺寲锛氱‘淇濊兘婊氬姩涓旀湁鍏抽棴鎸夐挳 */
@media (max-width: 768px) {
    /* 寮圭獥瀹瑰櫒锛氱暀鍑虹┖闅欙紝闃叉璐磋竟 */
    #area-stats-modal .modal-box.large {
        width: 95vw !important;
        height: 70vh !important;
        max-height: 70vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 鏍囬鏍忥細鍥哄畾鍦ㄩ《閮紝涓嶉殢鍐呭婊氬姩 */
    #area-stats-modal .modal-head {
        flex-shrink: 0 !important; /* 绂佹鍘嬬缉 */
        padding: 12px 15px !important;
    }

    /* 鍏抽棴鎸夐挳锛氬姞澶у昂瀵革紝鏂逛究鎵嬫寚鐐?*/
    #area-stats-modal .modal-close {
        width: 40px !important;
        height: 40px !important;
        background: #f1f5f9 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #64748b !important;
        font-size: 20px !important;
    }
    
    /* 鏍稿績甯冨眬锛氫笂涓嬩袱灞傜粨鏋?*/
    #area-stats-modal .dual-columns {
        flex: 1 !important; /* 鍗犳弧鍓╀綑楂樺害 */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* 闃叉鏁翠綋婊氬姩 */
    }

    /* 闈㈡澘锛氫笂涓嬪悇鍒嗕竴鍗婇珮搴?*/
    #area-stats-modal .col-panel {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* 闄愬埗婧㈠嚭 */
        border-bottom: 1px solid #e2e8f0;
    }

    /* 鍒楄〃瀹瑰櫒锛氬叧閿紒璁╁畠鍦ㄩ潰鏉垮唴閮ㄧ嫭绔嬫粴鍔?*/
    .bom-list, #palette-grid-area {
        flex: 1 !important; /* 鍗犳弧闈㈡澘鍓╀綑绌洪棿 */
        height: 0 !important; /* 閰嶅悎 flex:1 鍚敤婊氬姩 */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* iOS涓濇粦婊氬姩 */
        padding-bottom: 20px !important; /* 搴曢儴鐣欑櫧闃叉閬尅 */
    }

    /* 浼樺寲绠ご鍒嗛殧绗︼細鍦ㄦ墜鏈虹闅愯棌锛屽洜涓烘槸鍨傜洿甯冨眬涓嶉渶瑕佺澶?*/
    #area-stats-modal .arrow-sep {
        display: none !important;
    }
}

    /* 馃敟 棰滆壊閫夋嫨寮圭獥鎵撳紑鏃堕殣钘忛《閮ㄥ姛鑳藉尯 */
    body.area-modal-open .header-tools,
    #view-editor.area-modal-open .header-tools {
        display: none !important;
    }
/* /* =========================================
           馃帹 [PC/鎵嬫満鍏ㄩ€傞厤鐗圿 澶у巺鍗＄墖锛氱礌闆呯豢搴?+ 澶氬僵绯栨灉鍥炬爣
           ========================================= */

        /* 1. 鍗＄墖鍏叡鍩鸿皟 */
        

        /* 2. 鐢佃剳绔笓鐢ㄥ眳涓慨姝?(1025px浠ヤ笂) */
        @media (min-width: 1025px) {
            
            
        }

        /* 3. 鏂囧瓧棰滆壊 */
        

        

        /* 4. 鍥炬爣鍏叡缁撴瀯 */
        

       /* 馃摫 浠呭湪鎵嬫満/骞虫澘绔繚鐣欏彸杈硅窛 */
        @media (max-width: 1024px) {
            
        }

        

        /* 5. 鍥涙鍥炬爣鐨勪笓灞炵硸鏋滆壊 (绱壊銆佽摑鑹层€佹鑹层€佺矇鑹? */
        
        
        
        

        /* 6. 浜や簰 */
        
        
        =========================================
           馃帹 [鏈€鏂板畾绋縘 澶у巺鍗＄墖锛氱礌闆呯豢搴?+ 澶氬僵绯栨灉鍥炬爣
           ========================================= */

        /* --- 馃帹 浣滃搧搴撻《閮ㄥ姛鑳芥寜閽編鍖栵細姘ф皵鎰熷渾褰㈡寜閽?--- */
        
        /* 1. 缁熶竴鎸夐挳鍩虹褰㈡€?*/

        /* ===== 馃啎 缂栬緫鍣ㄩ〉闈㈠钩鏉夸紭鍖?===== */

        /* 骞虫澘缂栬緫鍣ㄥ竷灞€浼樺寲 (768px - 1365px) */
        @media (min-width: 768px) and (max-width: 1365px) {
            /* 缂栬緫鍣ㄤ晶杈规爮鑷€傚簲瀹藉害 */
            #view-editor .sidebar {
                width: clamp(280px, 28vw, 380px) !important;
                min-width: clamp(280px, 28vw, 380px) !important;
            }

            /* 宸ヤ綔鍖鸿嚜閫傚簲 */
            #view-editor .workspace {
                flex: 1 !important;
            }

            /* 瑙嗗彛鍖哄煙浼樺寲 */
            #view-editor .viewport {
                min-width: 0 !important;
            }

            /* BOM 鍒楄〃椤逛紭鍖?*/
            .bom-item {
                padding: 10px !important;
                min-height: 50px !important;
            }

            /* 璋冭壊鏉跨綉鏍间紭鍖?*/
            .palette-grid {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
                gap: 10px !important;
            }

            /* 宸ュ叿鎸夐挳浼樺寲 */
            .vc-btn {
                min-width: 44px !important;
                min-height: 44px !important;
                font-size: 14px !important;
            }

            /* 搴曢儴娴姩闈㈡澘浼樺寲 */
            .bottom-float-panel {
                padding: 12px 16px !important;
                gap: 12px !important;
            }
        }

        /* 骞虫澘绔栧睆缂栬緫鍣ㄧ壒娈婁紭鍖?*/
        @media (min-width: 768px) and (max-width: 1365px) and (orientation: portrait) {
            /* 绔栧睆鏃朵晶杈规爮绋嶇獎 */
            #view-editor .sidebar {
                width: clamp(260px, 25vw, 320px) !important;
            }

            /* 绔栧睆鏃跺伐鍏锋寜閽◢灏?*/
            .vc-btn {
                padding: 8px !important;
            }
        }

        /* 骞虫澘妯睆缂栬緫鍣ㄧ壒娈婁紭鍖?*/
        @media (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
            /* 妯睆鏃跺彲浠ユ樉绀烘洿澶氬唴瀹?*/
            #view-editor .sidebar {
                width: clamp(320px, 30vw, 400px) !important;
            }

            /* 妯睆鏃?BOM 鍒楄〃鍙互鏇寸揣鍑?*/
            .bom-item {
                padding: 8px !important;
            }

            /* 馃敟 妯睆鏃剁‘淇濅繚瀛樻寜閽樉绀?*/
            #view-editor.blueprint-mode #save-to-history-btn-mobile {
                display: inline-flex !important;
            }
            #view-editor.blueprint-mode #save-to-draft-btn-mobile {
                display: inline-flex !important;
            }
        }

        /* 骞虫澘瑙︽懜浼樺寲 - 缂栬緫鍣ㄤ笓鐢?*/
        @media (min-width: 768px) and (max-width: 1365px) and (hover: none) {
            /* 鐢诲竷浜や簰鍖哄煙浼樺寲 */
            #view-editor .content-container {
                touch-action: pan-x pan-y pinch-zoom !important;
            }

            /* 宸ュ叿闈㈡澘鎷栨嫿浼樺寲 */
            #view-tools {
                touch-action: none !important;
            }

        }

        /* ===== 馃啎 骞虫澘绔叿浣撻棶棰樹慨澶?===== */

        /* 闂1锛氳皟鑹叉澘寮圭獥鑹插潡琚帇缂╀慨澶?*/
        @media (min-width: 768px) and (max-width: 1365px) {
            /* 璋冭壊鏉挎ā鎬佹 */
            #palette-modal .palette-grid {
                display: grid !important;
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
                gap: 12px !important;
                padding: 16px !important;
            }

            /* 璋冭壊鏉块」鐩?- 纭繚鏄鏂瑰舰 */
            #palette-modal .palette-item {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 10px !important;
                min-height: 90px !important;
                aspect-ratio: 1 / 1 !important;
            }

            /* 璋冭壊鏉块鑹插潡 - 纭繚鏄渾褰?*/
            #palette-modal .pi-color {
                width: 50px !important;
                height: 50px !important;
                border-radius: 50% !important;
                margin-bottom: 6px !important;
            }

            /* 璋冭壊鏉挎枃瀛?*/
            #palette-modal .pi-id,
            #palette-modal .pi-name {
                font-size: 11px !important;
                text-align: center !important;
            }

            /* 鍖哄煙閫夋嫨妯℃€佹鐨勮皟鑹叉澘 */
            #area-stats-modal .palette-grid,
            #palette-grid-area {
                display: grid !important;
                grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
                gap: 10px !important;
            }
        }

        /* 闂2锛氬彸渚у伐鍏烽潰鏉垮お澶т慨澶?- 杩涗竴姝ョ缉灏?*/
        @media (min-width: 768px) and (max-width: 1365px) {
            /* 宸ュ叿闈㈡澘鏁翠綋缂╁皬 */
            #view-tools {
                padding: 6px !important;
                gap: 4px !important;
                max-width: 160px !important;
            }

            /* 宸ュ叿琛岀缉灏?*/
            #view-tools .tool-row {
                gap: 4px !important;
                padding: 0 !important;
            }

            /* 宸ュ叿鎸夐挳杩涗竴姝ョ缉灏?*/
            #view-tools .vc-btn {
                min-width: 28px !important;
                min-height: 28px !important;
                width: 28px !important;
                height: 28px !important;
                padding: 4px !important;
                font-size: 10px !important;
            }

            /* 宸ュ叿鎸夐挳鍥炬爣缂╁皬 */
            #view-tools .vc-btn i {
                font-size: 12px !important;
            }

            /* 宸ュ叿鎸夐挳鏂囧瓧缂╁皬 */
            #view-tools .vc-btn span {
                font-size: 9px !important;
            }

            /* 搴曢儴娴姩闈㈡澘缂╁皬 */
            .bottom-float-panel {
                padding: 6px 10px !important;
                gap: 6px !important;
                font-size: 11px !important;
            }

            .bottom-float-panel button {
                padding: 5px 10px !important;
                font-size: 11px !important;
                min-height: 28px !important;
            }
        }

       /* 闂3锛氶《閮ㄧ豢鑹蹭俊鎭爮 - 骞虫澘绔畬缇庨€傞厤 (淇鍙充晶閬尅鐗? */
            @media (min-width: 768px) and (max-width: 1365px) {
                #blueprint-header,
                .bp-header {
                    /* 鈫曪笍 甯冨眬鍩虹 */
                    padding: 8px 15px !important;
                    
                    /* 馃煝 鏍稿績淇1锛氬ぇ骞呭鍔犲彸渚у唴杈硅窛锛岀暀鍑哄畨鍏ㄨ窛绂?*/
                    padding-right: 40px !important; 
                    
                    min-height: 55px !important;
                    height: auto !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: space-between !important;
                    gap: 10px !important;
                    
                    /* 馃煝 鏍稿績淇2锛氬鏋滃唴瀹瑰疄鍦ㄥお澶氾紝鍏佽妯悜婊氬姩锛岃€屼笉鏄洿鎺ュ垏鏂?*/
                    overflow-x: auto !important;
                    white-space: nowrap !important;
                    -webkit-overflow-scrolling: touch; /* 璁╂粴鍔ㄦ洿涓濇粦 */
                }

                /* 宸︿晶鏍囬鍖哄煙 */
                .bp-header .bp-left {
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    flex-shrink: 0; /* 闃叉鏍囬琚尋鎵?*/
                    margin-right: 10px !important;
                    position: sticky !important; /* (鍙€? 璁╂爣棰樺浐瀹氬湪宸︿晶 */
                    left: 0 !important;
                }
                
                .bp-header .bp-title {
                    font-size: 14px !important;
                }
                .bp-header .bp-tip {
                    display: none !important;
                }

                /* 鍙充晶鏁版嵁鍖哄煙 */
                .bp-header .bp-info-box,
                #bp-info-content {
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: center !important;
                    gap: 20px !important; /* 绋嶅井鍑忓皬闂磋窛锛岃鏇村鍐呭鑳芥樉绀哄湪绗竴灞?*/
                    flex-wrap: nowrap !important; /* 寮哄埗鍗曡 */
                }

                /* 鍗曚釜鏁版嵁椤?*/
                .bp-info-item {
                    display: flex !important;
                    flex-direction: column !important; /* 鍨傜洿鍫嗗彔 */
                    align-items: center !important;    /* 灞呬腑瀵归綈 */
                    justify-content: center !important;
                    line-height: 1.2 !important;
                    flex-shrink: 0 !important; /* 馃敟 鍏抽敭锛氶槻姝㈡暟鎹」鎸ゅ湪涓€璧?*/
                }

                /* 鏍囩灏忓瓧 */
                .bp-info-label {
                    font-size: 10px !important;
                    color: rgba(255,255,255,0.8) !important;
                    text-transform: uppercase;
                    margin-bottom: 0 !important;
                    display: block !important;
                }

                /* 鏁板瓧澶у瓧 */
                .bp-info-val {
                    font-size: 15px !important; /* 瀛楀彿寰皟 */
                    font-weight: 800 !important;
                    color: #fff !important;
                }
                
                .bp-info-box > div {
                    padding: 0 !important;
                    background: none !important;
                }
            }

        /* 闂4锛氬ぇ鍘呯煩褰㈡寜閽珮搴﹀お楂樹慨澶?- 宸蹭慨姝?*/
        @media (min-width: 768px) and (max-width: 1365px) {
            /* 澶у巺鍗＄墖鎸夐挳 - 鏀逛负鎺ヨ繎姝ｆ柟褰?*/
            .hub-card-new {
                min-height: auto !important;
                padding: 24px !important;
                aspect-ratio: 1 / 1 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
            }

            /* 鍗＄墖鍥炬爣鍖哄煙 */
            .hub-card-new > div:first-child {
                width: 60px !important;
                height: 60px !important;
                min-width: 60px !important;
                min-height: 60px !important;
                flex-shrink: 0 !important;
                margin-bottom: 12px !important;
                margin-right: 0 !important;
            }

            /* 澶у巺缃戞牸甯冨眬 - 纭繚姝ｇ‘鐨勫垪鏁?*/
            .hub-grid {
                display: grid !important;
                gap: 20px !important;
            }

        }

       /* 骞虫澘绔栧睆 (Portrait) 淇 V4 - 瀹岀編灞呬腑鐗?*/
        @media (min-width: 768px) and (max-width: 1365px) and (orientation: portrait) {
            
            /* 1. 鏈€澶栧眰瀹瑰櫒锛氬厑璁告粴鍔紝鍧楃骇甯冨眬 */
            #view-hub {
                height: auto !important;
                min-height: 100vh !important;
                overflow-y: auto !important; 
                display: block !important;
                background: #f8fafc !important;
            }

            /* 2. 鍐呭鍖哄煙锛欶lex灞呬腑 + 閫傚害椤堕儴鐣欑櫧 */
            .hub-content {
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-start !important; /* 椤堕儴瀵归綈 */
                align-items: center !important; /* 馃煝 鏍稿績锛氬己鍒跺瓙鍏冪礌姘村钩灞呬腑 */
                
                /* 馃煝 淇1锛氭竻闄ゆ墍鏈夐粯璁ゅ唴杈硅窛 (鍘婚櫎HTML涓殑 px-5 骞叉壈) */
                padding: 0 !important; 
                
                /* 馃煝 淇2锛氶《閮ㄩ棿璺濈敱 140px 鍑忓皬涓?100px */
                padding-top: 30px !important; 
                padding-bottom: 70px !important;
                
                width: 100% !important;
                height: auto !important;
                overflow: visible !important;
            }

            /* 3. 缃戞牸甯冨眬锛氭竻闄ゅ共鎵版牱寮?*/
            .hub-grid {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important; /* 鍙屽垪 */
                gap: 20px !important;
                
                /* 馃煝 淇3锛氭竻闄ょ數鑴戠閬楃暀鐨?padding (瑙ｅ喅闈犲彸闂) */
                padding: 0 !important; 
                
                /* 璁剧疆鍚堥€傚搴?*/
                width: 88% !important;
                max-width: 600px !important;
                
                /* 纭繚澶栬竟璺濊嚜鍔ㄥ眳涓?*/
                margin: 0 auto !important;
            }

            /* 4. 鍗＄墖淇濇寔鏂瑰舰 */
            .hub-card-new {
                aspect-ratio: 1 / 1 !important;
                min-height: auto !important;
                padding: 20px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
            }

            .hub-card-new > div:first-child {
                width: 60px !important;
                height: 60px !important;
                margin-bottom: 12px !important;
                margin-right: 0 !important;
            }

            .hub-card-new h3 {
                font-size: 16px !important;
                text-align: center !important;
            }

            .hub-card-new p {
                font-size: 12px !important;
                text-align: center !important;
            }
        }

        /* 骞虫澘绔敤鎴蜂俊鎭尯鍩熶綅缃皟鏁?*/
        @media (min-width: 768px) and (max-width: 1365px) {
            .user-info-tablet-adjust {
                transform: translateY(-33.33%);
            }
        }

        /* Toast鍔ㄧ敾 */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .hub-install-app-btn {
            position: fixed;
            right: 24px;
            bottom: 28px;
            z-index: 60;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #dbeafe;
            background: linear-gradient(145deg, #eff6ff, #dbeafe);
            color: #1d4ed8;
            border-radius: 999px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.6px;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hub-install-app-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
        }

        .hub-desktop-shortcuts {
            position: fixed;
            top: 14px;
            left: 14px;
            z-index: 1200;
            display: flex;
            flex-direction: row;
            gap: 8px;
        }

        .hub-shortcut-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: none;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hub-shortcut-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(15, 23, 42, 0.2);
        }

        .hub-shortcut-btn.notice {
            color: #9a3412;
            background: linear-gradient(135deg, #ffedd5, #fed7aa);
            border: 1px solid #fdba74;
        }

        .hub-shortcut-btn.install {
            color: #1d4ed8;
            background: linear-gradient(145deg, #eff6ff, #dbeafe);
            border: 1px solid #bfdbfe;
        }

        @media (max-width: 768px) {
            .hub-desktop-shortcuts,
            .hub-install-app-btn {
                display: none !important;
            }
        }

        .system-notice-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(7px);
            z-index: 12000;
            padding: 16px;
        }

        .system-notice-modal.show {
            display: flex;
        }

        .system-notice-dialog {
            width: min(420px, 92vw);
            min-height: 560px;
            max-height: 82vh;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 24px 56px rgba(15, 23, 42, 0.35);
            overflow: hidden;
            animation: noticeSlideIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .system-notice-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: linear-gradient(135deg, #f97316, #ef4444);
            color: #ffffff;
        }

        .system-notice-header-title {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 17px;
            font-weight: 800;
            letter-spacing: 0.4px;
        }

        .system-notice-close-x {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
            color: #fff;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .system-notice-close-x:hover {
            background: rgba(255, 255, 255, 0.32);
        }

        .system-notice-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px 20px;
            background: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
        }

        .system-notice-content {
            color: #1e293b;
            font-size: 14px;
            line-height: 1.8;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .system-notice-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 18px 10px 18px;
            border-top: 1px solid #f1f5f9;
            background: #fff;
        }

        .system-notice-dismiss-login {
            border: none;
            background: transparent;
            color: #dc2626;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
        }

        .system-notice-close-btn {
            border: none;
            border-radius: 999px;
            background: #0f172a;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 8px 16px;
            cursor: pointer;
        }

        .system-notice-meta {
            padding: 0 18px 14px 18px;
            color: #94a3b8;
            font-size: 11px;
            text-align: right;
            background: #fff;
        }

        @keyframes noticeSlideIn {
            from {
                opacity: 0;
                transform: translateY(18px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ===== 2026-02-18 UI size tuning: inspiration/favorites/drafts/gallery ===== */
        #view-inspiration .inspiration-grid,
        #view-favorites .favorites-grid {
            grid-template-columns: repeat(auto-fill, minmax(112px, 112px)) !important;
            gap: 8px !important;
            justify-content: start !important;
            align-content: start !important;
        }

        #view-inspiration .inspiration-item,
        #view-favorites .favorites-item {
            border-radius: 10px !important;
        }

        #view-inspiration .inspiration-img,
        #view-favorites .favorites-img {
            height: 76px !important;
        }

        #view-inspiration .inspiration-info,
        #view-favorites .favorites-info {
            padding: 6px !important;
        }

        #view-inspiration .inspiration-title,
        #view-favorites .favorites-title {
            font-size: 11px !important;
            margin-bottom: 2px !important;
        }

        #view-inspiration .inspiration-desc,
        #view-favorites .favorites-desc {
            font-size: 10px !important;
        }

        #view-inspiration .inspiration-info button,
        #view-favorites .favorites-info button {
            padding-top: 4px !important;
            padding-bottom: 4px !important;
            font-size: 10px !important;
        }

        #view-drafts main > section {
            max-width: none !important;
            margin: 0 !important;
            padding: 20px 10px !important;
        }

        #view-drafts #drafts-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 160px)) !important;
            gap: 12px !important;
            justify-content: start !important;
            align-content: start !important;
        }

        #view-drafts #drafts-grid > .group .p-5 {
            padding: 12px !important;
        }

        #view-drafts #drafts-grid > .group h3 {
            font-size: 18px !important;
            line-height: 1.2 !important;
        }

        #view-drafts #drafts-grid > .group .relative.aspect-video {
            aspect-ratio: 4 / 3 !important;
            min-height: 92px !important;
            padding: 6px !important;
        }

        #view-gallery .gallery-content {
            padding: 14px 10px !important;
        }

        #view-gallery #gallery-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 160px)) !important;
            gap: 12px !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            justify-content: start !important;
            align-content: start !important;
        }

        #view-gallery .gallery-card img {
            height: 80px !important;
            margin-bottom: 6px !important;
        }

        #view-gallery .gallery-card > div {
            padding: 8px !important;
        }

        @media (max-width: 768px) {
            #view-inspiration .inspiration-grid,
            #view-favorites .favorites-grid {
                grid-template-columns: repeat(auto-fill, minmax(92px, 92px)) !important;
                gap: 6px !important;
            }

            #view-inspiration .inspiration-img,
            #view-favorites .favorites-img {
                height: 66px !important;
            }

            #view-drafts main > section {
                padding: 14px 8px !important;
            }

            #view-drafts #drafts-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }

            #view-drafts #drafts-grid > .group .relative.aspect-video {
                min-height: 80px !important;
                padding: 4px !important;
            }

            #view-gallery .gallery-content {
                padding: 10px 8px !important;
            }

            #view-gallery #gallery-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
        }

        #view-tools .tool-panel-toggle {
            display: none;
        }

        /* ===== Desktop only: click to collapse into a circle / click circle to expand ===== */
        @media (min-width: 768px) {
            #view-tools.bottom-float-panel {
                min-width: min(560px, 84vw) !important;
                width: min(760px, 84vw) !important;
                max-height: 280px !important;
                padding-top: 50px !important;
                overflow: visible !important;
                transition:
                    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.28s ease;
            }

            #view-tools.bottom-float-panel .tool-panel-toggle {
                display: inline-flex !important;
                position: absolute !important;
                top: 6px;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                min-width: 50px;
                height: 26px;
                padding: 0 10px;
                border: 1px solid rgba(255, 99, 118, 0.5);
                border-radius: 999px;
                background: rgba(239, 68, 68, 0.15);
                color: #ff5b6b;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 12px;
                font-weight: 900;
                line-height: 1;
                letter-spacing: 0.2px;
                box-shadow: 0 8px 16px rgba(239, 68, 68, 0.18);
                transition: all 0.22s ease;
                z-index: 3;
                pointer-events: auto !important;
            }

            #view-tools.bottom-float-panel .tool-row,
            #view-tools.bottom-float-panel .row-sep {
                transition:
                    opacity 0.2s ease,
                    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                    max-height 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                    margin 0.24s ease;
            }

            #view-tools.bottom-float-panel.collapsed {
                width: 64px !important;
                min-width: 64px !important;
                max-width: 64px !important;
                height: 64px !important;
                max-height: 64px !important;
                padding: 0 !important;
                gap: 0 !important;
                border-radius: 50% !important;
                box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5) !important;
            }

            #view-tools.bottom-float-panel.collapsed .tool-row,
            #view-tools.bottom-float-panel.collapsed .row-sep {
                opacity: 0;
                max-height: 0;
                margin: 0;
                transform: translateY(8px) scale(0.96);
                pointer-events: none;
                overflow: hidden;
            }

            #view-tools.bottom-float-panel.collapsed .tool-panel-toggle {
                top: 50% !important;
                left: 50% !important;
                right: auto !important;
                transform: translate(-50%, -50%) !important;
                width: 64px !important;
                height: 64px !important;
                min-width: 64px !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
                color: #ef4444 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                line-height: 1 !important;
                font-size: 14px;
                font-weight: 900;
            }

            #view-tools.bottom-float-panel:not(.collapsed) .tool-panel-toggle:hover {
                transform: translateX(-50%) translateY(-1px);
                box-shadow: 0 10px 24px rgba(37, 99, 235, 0.55);
            }
        }

/* ===== 平板端微调：像素图与空白画纸头部按钮（仅 768-1365） ===== */
@media (min-width: 768px) and (max-width: 1365px) {
    /* 1) 像素图处理页整体缩小，避免遮挡底部作品标题输入框 */
    #view-pixel main {
        justify-content: flex-start !important;
        padding: 20px 14px !important;
    }

    #view-pixel main > div {
        max-width: 980px !important;
        gap: 24px !important;
    }

    #view-pixel #pixel-upload-area {
        max-width: 760px !important;
    }

    #view-pixel #pixel-upload-area h2 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    #view-pixel #pixel-upload-area p {
        font-size: 13px !important;
    }

    #view-pixel #pixel-upload-area div[onclick*="pixel-file-input"] {
        padding: 72px 28px !important;
        border-radius: 16px !important;
    }

    #view-pixel #pixel-upload-area div[onclick*="pixel-file-input"] .material-symbols-outlined {
        font-size: 40px !important;
    }

    #view-pixel #pixel-result-area {
        max-width: 880px !important;
    }

    #view-pixel #pixel-comparison-container {
        gap: 16px !important;
    }

    #view-pixel #pixel-comparison-container > div > div {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    #view-pixel #pixel-result-area button {
        font-size: 13px !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
    }

    #view-pixel footer {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #pixel-project-name {
        width: min(260px, 46vw) !important;
    }

    /* 2) 空白画纸：仅缩小指定5个按钮 */
    #view-canvas button[onclick="sys.gotoHub()"],
    #view-canvas button[onclick="app.exportCanvas()"],
    #view-canvas button[onclick="app.saveCanvasToDraft()"],
    #view-canvas button[onclick="app.saveCanvasToHistory()"],
    #view-canvas button[onclick="app.generateBeadPattern()"] {
        padding: 4px 10px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        gap: 6px !important;
    }

    #view-canvas button[onclick="sys.gotoHub()"] .material-symbols-outlined,
    #view-canvas button[onclick="app.exportCanvas()"] .material-symbols-outlined,
    #view-canvas button[onclick="app.saveCanvasToDraft()"] .material-symbols-outlined,
    #view-canvas button[onclick="app.saveCanvasToHistory()"] .material-symbols-outlined,
    #view-canvas button[onclick="app.generateBeadPattern()"] .material-symbols-outlined {
        font-size: 14px !important;
    }
}