:root{--bg-color:#f0f0f0;--panel-bg:#fffc;--sidebar-bg:#ffffffe6;--modal-bg:#fff;--text-main:#000;--text-muted:#666;--text-label:#888;--border-color:#0000000d;--item-hover:#0000000a;--btn-confirm-bg:#333;--btn-confirm-text:#fff;--btn-cancel-bg:#eee;--btn-cancel-text:#666;--accent-color:#333}[data-theme=dark]{--bg-color:#1a1a1a;--panel-bg:#282828d9;--sidebar-bg:#1e1e1ef2;--modal-bg:#2a2a2a;--text-main:#eee;--text-muted:#aaa;--text-label:#777;--border-color:#ffffff1a;--item-hover:#ffffff0f;--btn-confirm-bg:#eee;--btn-confirm-text:#1a1a1a;--btn-cancel-bg:#3d3d3d;--btn-cancel-text:#ccc;--accent-color:#fff}html,body{touch-action:none;width:100%;height:100%;margin:0;padding:0;position:fixed;overflow:hidden}body{background-color:var(--bg-color);color:var(--text-main);font-family:sans-serif}#root{width:100%;height:100%}#gpuCanvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;top:0;left:0}.top-controls{z-index:21;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;width:calc(100% - 40px);transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:20px;left:20px}.top-controls.sidebar-open{width:calc(100% - 340px);left:320px}.top-controls>*{pointer-events:auto}.status-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);color:var(--text-main);box-sizing:border-box;border-radius:25px;flex:400px;align-items:center;gap:15px;width:fit-content;min-width:0;padding:10px 20px;font-size:14px;font-weight:500;display:flex;box-shadow:0 4px 15px #0000001a}@media (width>=1024px){.status-panel{flex:0 auto}}@media (orientation:landscape) and (width>=768px){.status-panel{flex:0 auto}}.status-item{flex-direction:column;align-items:flex-start;gap:2px;display:flex;overflow:hidden}.status-item:nth-child(2){flex:1;min-width:0}.status-label{color:var(--text-label);text-transform:uppercase;letter-spacing:1px;padding:0 6px;font-size:9px;font-weight:700}#projectName{cursor:text;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;outline:none;width:100%;padding:2px 6px;transition:background .2s;display:block;overflow:hidden}#projectName:hover,#projectName:focus{background:var(--item-hover)}#gridSizeDisplay{cursor:pointer;white-space:nowrap;border-radius:4px;padding:2px 6px;transition:background .2s}#gridSizeDisplay:hover{background:var(--item-hover)}.history-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:25px;gap:10px;margin-left:auto;padding:8px;display:flex;box-shadow:0 4px 15px #0000001a}.action-btn{background:var(--accent-color);width:34px;height:34px;color:var(--modal-bg);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:17px;justify-content:center;align-items:center;padding-bottom:4px;font-size:18px;transition:all .1s;display:flex}.action-btn:hover{opacity:.8}.action-btn:active{transform:scale(.9)}.action-btn:disabled{cursor:default;background:#ccc}.shape-selector .action-btn{background:var(--modal-bg)!important;color:var(--text-main)!important;border:1px solid var(--border-color)!important}.shape-selector .action-btn.active{background:var(--accent-color)!important;color:var(--modal-bg)!important}.zoom-controls{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);z-index:10;border-radius:25px;gap:10px;padding:8px;transition:left .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:20px;left:20px;box-shadow:0 4px 15px #0000001a}.zoom-controls.sidebar-open{left:320px}.shape-selector{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);z-index:10;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;border-radius:25px;gap:10px;max-width:calc(100% - 40px);padding:8px;display:flex;position:fixed;bottom:80px;right:20px;overflow-x:auto;box-shadow:0 4px 15px #0000001a}.shape-selector::-webkit-scrollbar{display:none}.shape-selector .action-btn{flex-shrink:0}.color-palette{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);z-index:10;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;border-radius:25px;gap:10px;max-width:calc(100% - 160px);padding:8px;display:flex;position:fixed;bottom:20px;right:20px;overflow-x:auto;box-shadow:0 4px 15px #0000001a}.color-palette::-webkit-scrollbar{display:none}.color-btn{cursor:pointer;border:2px solid #fff;border-radius:15px;flex-shrink:0;width:30px;height:30px;transition:all .2s;box-shadow:0 2px 5px #0000001a}.color-btn.active{border-color:var(--accent-color);transform:scale(1.2)}.color-picker-wrapper{cursor:pointer;background:linear-gradient(to bottom right,red,#ff7f00,#ff0,#0f0,#00f,indigo,#8f00ff);border:2px solid #fff;border-radius:15px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 5px #0000001a}.color-picker-wrapper:after{content:"+";color:#fff;text-shadow:0 0 3px #00000080;pointer-events:none;font-size:20px;font-weight:700}.custom-picker-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--border-color);z-index:100;border-radius:20px;flex-direction:column;gap:15px;width:220px;padding:20px;display:flex;position:fixed;bottom:80px;right:20px;box-shadow:0 10px 30px #00000026}.picker-row{flex-direction:column;gap:5px;display:flex}.picker-row label{text-transform:uppercase;color:var(--text-label);justify-content:space-between;font-size:10px;font-weight:700;display:flex}.picker-slider{-webkit-appearance:none;background:#0000001a;border-radius:3px;outline:none;width:100%;height:6px}.picker-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-color);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 5px #0000001a}#hueSlider{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-preview{border:2px solid #fff;border-radius:10px;height:40px;box-shadow:inset 0 2px 4px #0000001a}.zoom-btn{background:var(--accent-color);width:34px;height:34px;color:var(--modal-bg);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:17px;justify-content:center;align-items:center;padding-bottom:4px;font-size:20px;font-weight:700;line-height:1;transition:all .1s;display:flex}.zoom-btn:hover{opacity:.8}.zoom-btn:active{transform:scale(.9)}.sidebar{background:var(--sidebar-bg);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:20;box-sizing:border-box;border-right:1px solid var(--border-color);flex-direction:column;width:300px;height:100%;padding:16px 30px;transition:left .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:-300px;box-shadow:5px 0 15px #0000000d}.sidebar.open{left:0}.portrait .sidebar{opacity:0;visibility:hidden;z-index:100;width:100%;height:100%;left:0;transition:opacity .2s,visibility .2s!important}.portrait .sidebar.open{opacity:1;visibility:visible}.portrait .top-controls.sidebar-open{width:calc(100% - 40px)!important;left:20px!important}.portrait .zoom-controls.sidebar-open{left:20px!important}.sidebar-close{background:var(--item-hover);width:44px;height:44px;color:var(--text-main);cursor:pointer;z-index:110;border:none;border-radius:22px;justify-content:center;align-items:center;font-size:24px;display:none;position:absolute;top:20px;right:20px}.portrait .sidebar-close{display:flex}.sidebar-close:hover{background:var(--border-color)}.sidebar-toggle{cursor:pointer;width:34px;height:34px;color:var(--text-main);background:0 0;border:none;border-radius:17px;flex-shrink:0;justify-content:center;align-items:center;padding:0 0 4px;font-size:20px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.sidebar-toggle:hover{background:var(--item-hover)}.sidebar-toggle.active{transform:rotate(90deg)}.sidebar-header{color:var(--text-main);margin-bottom:25px;font-size:22px;font-weight:700}.sidebar-content{color:var(--text-muted);flex:1;font-size:14px;line-height:1.6;overflow-y:auto}.project-list{flex-direction:column;gap:8px;margin-top:10px;display:flex}.project-item{background:var(--item-hover);cursor:pointer;color:var(--text-main);border:1px solid #0000;border-radius:12px;justify-content:space-between;align-items:center;padding:10px 15px;transition:all .2s;display:flex}.project-item:hover{background:var(--item-hover);border-color:var(--border-color)}.project-item.active{background:var(--accent-color);color:var(--modal-bg)}.project-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.project-id{opacity:.5;font-family:monospace;font-size:10px}.sidebar-footer{border-top:1px solid var(--border-color);align-items:center;gap:5px;margin:0 -12px;padding:5px 12px;display:flex}.user-status{cursor:pointer;border-radius:12px;flex-direction:column;flex:1;align-items:flex-start;gap:2px;padding:8px 12px;transition:background .2s;display:flex}.user-status:hover{background:var(--item-hover)}.settings-btn{cursor:pointer;width:38px;height:38px;color:var(--text-main);background:0 0;border:none;border-radius:19px;justify-content:center;align-items:center;padding-bottom:2px;font-size:20px;transition:all .2s;display:flex}.settings-btn:hover{background:var(--item-hover);transform:rotate(45deg)}.status-value{color:var(--text-main);box-sizing:border-box;width:100%;padding:0 6px;font-weight:600}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000004d;justify-content:center;align-items:flex-start;width:100vw;height:100vh;padding-top:100px;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--modal-bg);width:300px;color:var(--text-main);border-radius:20px;flex-direction:column;gap:20px;padding:30px;display:flex;box-shadow:0 10px 40px #0003}.modal-header{color:var(--text-main);font-size:18px;font-weight:700}.modal-inputs{flex-direction:column;gap:15px;display:flex}.input-group{flex-direction:column;flex:1;gap:5px;display:flex}.input-group label{text-transform:uppercase;color:var(--text-label);font-size:11px;font-weight:700}.modal-inputs input,.modal-inputs select{border:1px solid var(--border-color);box-sizing:border-box;background:var(--modal-bg);width:100%;color:var(--text-main);background-color:var(--bg-color);border-radius:8px;outline:none;padding:10px;font-size:16px}.modal-warning{color:#d9534f;background:#fff5f5;border-radius:8px;padding:10px;font-size:12px;display:none}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-weight:600;transition:background .2s}.btn-cancel{background:var(--btn-cancel-bg);color:var(--btn-cancel-text)}.btn-confirm{background:var(--btn-confirm-bg);color:var(--btn-confirm-text)}.btn-confirm:disabled{cursor:default;opacity:.7;background:#ccc}.auth-toggle{color:#888;text-align:center;cursor:pointer;font-size:12px}.auth-toggle span{color:#333;font-weight:600;text-decoration:underline}.notransition{transition:none!important}