:root{--bg-color:#050510;--bg-secondary:#0a0a1a;--card-bg:rgba(20, 25, 40, 0.85);--panel-bg:rgba(15, 18, 30, 0.95);--text-primary:#ffffff;--text-secondary:#a0a0b0;--text-muted:#606070;--accent-cyan:#00ffff;--accent-purple:#bc13fe;--accent-green:#00ff88;--accent-yellow:#ffcc00;--accent-pink:#ff0055;--accent-blue:#3b82f6;--border-color:rgba(255, 255, 255, 0.1);--border-glow:rgba(0, 255, 255, 0.3);--danger:#ff4444;--success:#00cc66;--pixel-on:#00ffff;--pixel-off:#0a0a15;--grid-line:rgba(255, 255, 255, 0.08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Exo 2',sans-serif;background-color:var(--bg-color);background-image:radial-gradient(circle at 15% 50%,rgba(188,19,254,.03) 0,transparent 25%),radial-gradient(circle at 85% 30%,rgba(0,255,255,.03) 0,transparent 25%);color:var(--text-primary);min-height:100vh;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--panel-bg);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px)}.back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-size:1rem;text-decoration:none;transition:all .3s ease}.back-btn:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}.header-center{text-align:center}.header-center h1{font-size:1.5rem;font-weight:700;color:var(--accent-cyan);margin-bottom:.1rem}.header-center h1 i{margin-right:.5rem}.header-center .subtitle{display:inline-block;font-size:.75rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}.header-center .creator-credit{display:inline-block;margin-left:.55rem;color:var(--text-muted);font-size:.68rem;font-weight:500;letter-spacing:.04em;opacity:.72;white-space:nowrap}.header-center .creator-credit::before{content:"·";margin-right:.55rem}.header-right{display:flex;gap:.5rem}.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-size:1rem;cursor:pointer;transition:all .3s ease}.icon-btn:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}.main-content{display:flex;flex:1;overflow:hidden}.left-panel{width:260px;min-width:260px;background:var(--panel-bg);border-right:1px solid var(--border-color);overflow-y:auto;backdrop-filter:blur(10px)}.right-panel{width:260px;min-width:180px;max-width:500px;background:var(--panel-bg);border-right:none;border-left:1px solid var(--border-color);overflow-y:auto;backdrop-filter:blur(10px);position:relative;flex-shrink:0}.panel-resize-handle{position:absolute;left:-4px;top:0;width:8px;height:100%;cursor:col-resize;z-index:10;background:0 0;transition:background .2s ease}.panel-resize-handle::after{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:2px;height:40px;background:var(--border-color);border-radius:1px;transition:all .2s ease}.panel-resize-handle.dragging,.panel-resize-handle:hover{background:rgba(0,255,255,.08)}.panel-resize-handle.dragging::after,.panel-resize-handle:hover::after{background:var(--accent-cyan);box-shadow:0 0 8px rgba(0,255,255,.4);height:60px}.panel-section{padding:1rem;border-bottom:1px solid var(--border-color)}.panel-section h3{font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:1px}.panel-section h3 i{margin-right:.5rem;color:var(--accent-cyan)}.size-inputs{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.input-group{flex:1}.input-group label{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:.25rem;text-transform:uppercase}.input-group input{width:100%;padding:.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:1rem;text-align:center;transition:all .3s ease}.input-group input:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 10px rgba(0,255,255,.2)}.size-separator{color:var(--text-muted);font-size:1.2rem;margin-top:1rem}.quick-sizes{display:flex;gap:.5rem;margin-top:.75rem}.size-preset{flex:1;padding:.4rem .5rem;background:0 0;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.7rem;cursor:pointer;transition:all .3s ease}.size-preset:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border:none;border-radius:8px;font-family:'Exo 2',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.btn i{font-size:.9rem}.btn-primary{background:linear-gradient(135deg,var(--accent-cyan),#00b3b3);color:#000}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,255,255,.3)}.btn-secondary{background:rgba(255,255,255,.1);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:rgba(255,255,255,.15);border-color:var(--text-secondary)}.btn-success{background:linear-gradient(135deg,var(--success),#00994d);color:#000}.btn-success:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,204,102,.3)}.btn-danger{background:rgba(255,68,68,.2);color:var(--danger);border:1px solid rgba(255,68,68,.3)}.btn-danger:hover{background:rgba(255,68,68,.3)}.btn-accent{background:linear-gradient(135deg,var(--accent-purple),#9b00cc);color:#fff}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(188,19,254,.4)}.btn-large{padding:1rem;font-size:1rem}.tool-buttons{display:flex;gap:.5rem;margin-bottom:.75rem}.tool-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem .5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease}.tool-btn i{font-size:1.2rem}.tool-btn span{font-size:.65rem;text-transform:uppercase}.tool-btn:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}.tool-btn.active{background:rgba(0,255,255,.15);border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,255,255,.2)}.action-buttons{display:flex;flex-direction:column;gap:.5rem}.zoom-control{display:flex;align-items:center;justify-content:center;gap:1rem}.zoom-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease}.zoom-btn:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}#zoomLevel{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--text-primary);min-width:60px;text-align:center}.canvas-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden;background-color:#0c0c20;background-image:linear-gradient(rgba(0,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.04) 1px,transparent 1px);background-size:20px 20px}.canvas-wrapper{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:calc(100% - 40px);overflow:auto;border-radius:8px;box-shadow:0 0 30px rgba(0,0,0,.5)}#pixelCanvas{image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--accent-cyan);box-shadow:0 0 20px rgba(0,255,255,.3);cursor:crosshair}.canvas-info{display:flex;gap:2rem;margin-top:1rem;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--text-muted)}.file-name-input{display:flex;gap:.5rem}.file-name-input input{flex:1;padding:.6rem .75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.85rem;transition:all .3s ease}.file-name-input input:focus{outline:0;border-color:var(--accent-cyan)}.file-name-input .btn{width:auto;white-space:nowrap}.saved-files-section{flex:1;display:flex;flex-direction:column;min-height:200px}.saved-files-list{flex:1;max-height:300px;overflow-y:auto;background:var(--bg-secondary);border-radius:8px;padding:.5rem}.saved-files-list::-webkit-scrollbar{width:6px}.saved-files-list::-webkit-scrollbar-track{background:0 0}.saved-files-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;color:var(--text-muted)}.empty-state i{font-size:2rem;margin-bottom:.5rem;opacity:.5}.empty-state p{font-size:.85rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:rgba(255,255,255,.03);border:1px solid transparent;border-radius:8px;margin-bottom:.5rem;cursor:pointer;transition:all .3s ease}.file-item:hover{background:rgba(0,255,255,.08);border-color:var(--accent-cyan)}.file-item.active{background:rgba(0,255,255,.12);border-color:var(--accent-cyan)}.file-preview{width:40px;height:24px;border:1px solid var(--border-color);border-radius:4px;overflow:hidden;background:#000}.file-preview canvas{width:100%;height:100%;image-rendering:pixelated}.file-info{flex:1;min-width:0}.file-name{font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.7rem;color:var(--text-muted)}.file-delete{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:0 0;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all .3s ease;opacity:0}.file-item:hover .file-delete{opacity:1}.file-delete:hover{background:rgba(255,68,68,.2);color:var(--danger)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease;backdrop-filter:blur(5px)}.modal.active{opacity:1;visibility:visible}.modal-content{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:16px;width:90%;max-width:800px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.5);animation:modalSlideIn .3s ease}@keyframes modalSlideIn{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:1.2rem;font-weight:700;color:var(--accent-cyan)}.modal-header h2 i{margin-right:.75rem}.close-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:0 0;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease}.close-btn:hover{background:rgba(255,68,68,.2);border-color:var(--danger);color:var(--danger)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.export-info{color:var(--text-secondary);margin-bottom:1rem;font-size:.9rem}.code-container{position:relative;background:#0d0d1a;border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.code-container pre{padding:1.5rem;font-family:'JetBrains Mono',monospace;font-size:.75rem;line-height:1.5;color:var(--accent-cyan);overflow-x:auto;max-height:400px;white-space:pre}.copy-btn{position:absolute;top:.75rem;right:.75rem;width:auto;padding:.5rem 1rem}.help-content h3{color:var(--accent-cyan);font-size:1rem;margin:1rem 0 .5rem}.help-content h3:first-child{margin-top:0}.help-content ul{list-style:none;padding-left:.5rem}.help-content li{padding:.4rem 0;color:var(--text-secondary);font-size:.9rem}.help-content li strong{color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}@media (max-width:1200px){.left-panel{width:220px;min-width:220px}}@media (max-width:900px){.main-content{flex-direction:column}.left-panel,.right-panel{width:100%;min-width:unset;border:none;border-bottom:1px solid var(--border-color)}.left-panel{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}.left-panel .panel-section{flex:1;min-width:200px;border-bottom:none}.canvas-container{flex:1;min-height:300px}}.file-checkbox{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:all .3s ease;flex-shrink:0}.file-checkbox:hover{color:var(--accent-cyan)}.file-checkbox.checked{color:var(--accent-green)}.file-checkbox i{font-size:1.1rem}.file-rename{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:0 0;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all .3s ease;opacity:0}.file-item:hover .file-rename{opacity:1}.file-rename:hover{background:rgba(0,255,255,.15);color:var(--accent-cyan)}.file-item.selected{background:rgba(0,255,136,.1);border-color:var(--accent-green)}.file-item.selected.active{background:rgba(0,255,136,.15)}.export-hint{font-size:.75rem;color:var(--text-muted);margin-bottom:.75rem;font-style:italic}.modal-large{max-width:1000px}.modal-large .code-container pre{max-height:60vh}.modal-small{max-width:400px}.rename-input-group{margin-bottom:1rem}.rename-input-group label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.rename-input-group input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;transition:all .3s ease}.rename-input-group input:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,255,255,.2)}.help-content li i{color:var(--accent-cyan);margin-right:.25rem}.size-category{margin-top:.5rem}.size-label{display:none}.size-category .quick-sizes{margin-top:0}.tool-group{margin-bottom:.75rem}.tool-label{display:block;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.35rem}.tool-group .tool-buttons{margin-bottom:0;flex-wrap:wrap;justify-content:flex-start}.tool-group .tool-btn{flex:0 0 auto;width:36px;height:36px;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:row}.tool-group .tool-btn i{font-size:1rem;margin:0}.brush-size-control{display:flex;align-items:center;justify-content:center;gap:.75rem}.size-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;font-size:.8rem}.size-btn:hover{background:rgba(0,255,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}.size-value{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--accent-cyan);min-width:24px;text-align:center;font-weight:600}.file-hint{font-size:.7rem;color:var(--accent-yellow);margin-bottom:.6rem;padding:.4rem .6rem;background:rgba(255,204,0,.1);border-radius:6px;border:1px solid rgba(255,204,0,.2)}.action-buttons{display:flex;gap:.4rem;flex-direction:row;flex-wrap:wrap}.action-buttons .btn{flex:1 1 auto;min-width:60px;padding:.4rem .5rem;font-size:.7rem}.mirror-buttons{display:flex;gap:.4rem}.mirror-btn{flex:1;display:flex;justify-content:center;align-items:center;width:32px;height:32px;padding:0;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;font-size:.85rem}.mirror-btn:hover{background:rgba(255,0,136,.1);border-color:var(--accent-pink);color:var(--accent-pink)}.mirror-btn.active{background:rgba(255,0,136,.15);border-color:var(--accent-pink);color:var(--accent-pink);box-shadow:0 0 10px rgba(255,0,136,.2)}.transform-buttons{display:flex;gap:.4rem;margin-top:.5rem}.transform-buttons .btn{flex:1;padding:.35rem .4rem;font-size:.65rem;min-width:0}.transform-buttons .btn i{font-size:.7rem}.transform-buttons .btn span{font-size:.6rem}.btn-sm{padding:.35rem .5rem!important;font-size:.7rem!important;gap:.3rem}#pixelCanvas{cursor:crosshair}.active-lang{color:var(--accent-cyan);font-weight:700}.canvas-wrapper{overflow:hidden;position:relative}#pixelCanvas{transition:none}.individual-copy-section{margin-bottom:1.5rem;padding:1rem;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.2);border-radius:12px}.copy-section-title{font-size:.9rem;font-weight:600;color:var(--accent-green);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.copy-section-title i{font-size:1rem}.copy-buttons-grid{display:flex;flex-wrap:wrap;gap:.5rem}.copy-individual-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8rem;background:rgba(0,255,136,.1);border:1px solid var(--accent-green);color:var(--accent-green);border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500}.copy-individual-btn:hover{background:rgba(0,255,136,.2);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,255,136,.2)}.copy-individual-btn.copied{background:var(--accent-green);color:#000}.copy-individual-btn i{font-size:.9rem}.modal-medium{max-width:700px}.text-modal-body{display:flex;flex-direction:column;gap:1.5rem}.text-settings-panel{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.text-input-group{flex:1;min-width:200px}.text-input-group label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.text-input-group input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;font-family:'Microsoft YaHei',SimHei,'Noto Sans SC',sans-serif;transition:all .3s ease}.text-input-group input:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,255,255,.2)}.text-input-group input::placeholder{color:var(--text-muted)}.text-font-row{display:flex;gap:1rem;flex-wrap:wrap;width:100%}.text-font-group{flex:2;min-width:140px;display:flex;flex-direction:column;gap:.5rem}.text-font-group label,.text-weight-group label{font-size:.85rem;color:var(--text-secondary)}.text-font-group select,.text-weight-group select{padding:.6rem .75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .3s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300ffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}.text-font-group select:hover,.text-weight-group select:hover{border-color:var(--accent-cyan)}.text-font-group select:focus,.text-weight-group select:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 10px rgba(0,255,255,.2)}.text-weight-group{flex:1;min-width:100px;display:flex;flex-direction:column;gap:.5rem}.text-size-group{flex:2;min-width:180px;display:flex;flex-direction:column;gap:.5rem}.text-size-group label{font-size:.85rem;color:var(--text-secondary)}.text-size-control{display:flex;align-items:center;justify-content:flex-start;gap:.75rem}.text-size-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:3px;outline:0;cursor:pointer;transition:all .3s ease}.text-size-slider:hover{border-color:var(--accent-cyan)}.text-size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-cyan);border-radius:50%;cursor:grab;box-shadow:0 0 10px rgba(0,255,255,.4);transition:all .2s ease}.text-size-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 15px rgba(0,255,255,.6)}.text-size-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.text-size-slider::-moz-range-thumb{width:18px;height:18px;background:var(--accent-cyan);border:none;border-radius:50%;cursor:grab;box-shadow:0 0 10px rgba(0,255,255,.4)}.text-size-input{width:60px;padding:.5rem .5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--accent-cyan);font-size:1rem;font-family:'JetBrains Mono',monospace;font-weight:600;text-align:center;transition:all .3s ease;-moz-appearance:textfield}.text-size-input::-webkit-inner-spin-button,.text-size-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.text-size-input:hover{border-color:var(--accent-cyan)}.text-size-input:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,255,255,.3)}.text-hint{width:100%;font-size:.75rem;color:var(--accent-yellow);padding:.5rem .75rem;background:rgba(255,204,0,.1);border-radius:6px;border:1px solid rgba(255,204,0,.2);margin:0}.text-preview-area{flex:1;display:flex;flex-direction:column}.text-preview-label{font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.text-preview-wrapper{position:relative;background:var(--bg-secondary);border:2px solid var(--accent-cyan);border-radius:8px;overflow:hidden;cursor:grab;box-shadow:0 0 20px rgba(0,255,255,.2);display:inline-block;max-width:100%}.text-preview-wrapper:active{cursor:grabbing}#textPreviewCanvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}.text-drag-handle{position:absolute;cursor:grab;padding:4px 8px;background:rgba(0,255,255,.15);border:1px dashed var(--accent-cyan);border-radius:4px;color:#0ff;font-family:'Microsoft YaHei',SimHei,'Noto Sans SC',monospace;user-select:none;transition:background .2s ease;white-space:nowrap;pointer-events:auto}.text-drag-handle:hover{background:rgba(0,255,255,.25)}.text-drag-handle:active{cursor:grabbing;background:rgba(0,255,255,.35)}.text-drag-handle.hidden{display:none}.text-modal-actions{display:flex;gap:1rem;justify-content:flex-end}.text-modal-actions .btn{width:auto;min-width:120px}.text-position-info{position:absolute;bottom:.5rem;right:.5rem;background:rgba(0,0,0,.7);color:var(--text-muted);font-size:.7rem;font-family:'JetBrains Mono',monospace;padding:.25rem .5rem;border-radius:4px}@media (max-width:600px){.text-settings-panel{flex-direction:column}.text-modal-actions{flex-direction:column}.text-modal-actions .btn{width:100%}}.mode-tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--border-color);border-radius:10px;padding:3px;margin-right:.75rem}.mode-tab{display:flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border:none;border-radius:8px;background:0 0;color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:'Exo 2',sans-serif;white-space:nowrap}.mode-tab:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}.mode-tab.active{background:linear-gradient(135deg,rgba(0,255,255,.2),rgba(157,0,255,.2));color:var(--accent-cyan);box-shadow:0 0 12px rgba(0,255,255,.15)}.mode-tab i{font-size:.85rem}.vec-right-panel{display:flex;flex-direction:column}.vec-shape-list{max-height:200px;overflow-y:auto;background:var(--bg-secondary);border-radius:8px;padding:.4rem}.vec-shape-list::-webkit-scrollbar{width:5px}.vec-shape-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.vec-shape-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid transparent;margin-bottom:2px}.vec-shape-item:hover{background:rgba(0,255,255,.08);border-color:rgba(0,255,255,.2)}.vec-shape-item.selected{background:rgba(0,255,255,.12);border-color:var(--accent-cyan);box-shadow:0 0 8px rgba(0,255,255,.1)}.vec-shape-icon{width:20px;text-align:center;color:var(--accent-purple);font-size:.85rem;flex-shrink:0}.vec-shape-label{flex:1;font-size:.7rem;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vec-shape-item.selected .vec-shape-label{color:var(--accent-cyan)}.vec-shape-delete-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:0 0;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;opacity:0;transition:all .2s ease;font-size:.7rem;flex-shrink:0}.vec-shape-item:hover .vec-shape-delete-btn{opacity:1}.vec-shape-delete-btn:hover{background:rgba(255,68,68,.2);color:var(--danger)}.vec-prop-inputs{display:flex;flex-direction:column;gap:.4rem}.vec-prop-row{display:flex;align-items:center;gap:.4rem}.vec-prop-row label{font-size:.7rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;min-width:16px;text-align:right}.vec-prop-input{width:55px;padding:.3rem .4rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--accent-cyan);font-size:.8rem;font-family:'JetBrains Mono',monospace;text-align:center;transition:all .3s ease;-moz-appearance:textfield}.vec-prop-input::-webkit-inner-spin-button,.vec-prop-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vec-prop-input:focus{outline:0;border-color:var(--accent-cyan);box-shadow:0 0 8px rgba(0,255,255,.2)}.vec-prop-actions{display:flex;gap:.4rem;margin-top:.5rem}.vec-prop-actions .btn{flex:1}.vec-code-section{flex:1;display:flex;flex-direction:column;min-height:0}.vec-code-container{position:relative;background:#0d0d1a;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:120px}.vec-code-container pre{padding:2rem .75rem .75rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;line-height:1.5;color:var(--accent-cyan);overflow:auto;flex:1;white-space:pre;margin:0;max-height:250px}.vec-code-container .copy-btn{position:absolute;top:.4rem;right:.4rem;padding:.3rem .6rem;font-size:.65rem}#vectorCanvas{image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--accent-cyan);box-shadow:0 0 20px rgba(0,255,255,.3);cursor:crosshair;transition:none}#vecZoomLevel{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--text-primary);min-width:60px;text-align:center}.vec-color-toggle{display:flex;gap:.25rem}.vec-color-btn{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-size:.65rem;font-family:'JetBrains Mono',monospace;transition:all .2s;flex:1;justify-content:center}.vec-color-btn:hover{border-color:var(--accent-cyan)}.vec-color-btn.active{border-color:var(--accent-cyan);background:rgba(0,255,255,.1);color:var(--accent-cyan)}.vec-color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px}.brush-size-control.compact{gap:.2rem}.brush-size-control.compact .size-value{min-width:24px;font-size:.7rem}.vec-color-toggle.compact{gap:.15rem}.vec-color-toggle.compact .vec-color-btn{padding:.15rem .4rem;font-size:.6rem}.tool-sublabel{display:block;font-size:.65rem;color:var(--text-tertiary);margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.5px}.vec-align-section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.vec-align-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem}.vec-align-btn{display:flex;align-items:center;justify-content:center;padding:.3rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-size:.7rem;transition:all .15s}.vec-align-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(0,255,255,.08)}.vec-align-btn:active{transform:scale(.92)}.vec-array-section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.vec-array-inputs .vec-prop-row{margin-bottom:.15rem}@media (max-width:1200px){.mode-tabs{margin-right:.5rem}.mode-tab{padding:.35rem .7rem;font-size:.75rem}.mode-tab span{display:none}}@media (max-width:900px){.mode-tabs{margin-right:.3rem}.mode-tab{padding:.3rem .5rem}}