@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@400;500;600&display=swap);body{background:#f0f2f5;color:#2d3748;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;height:100vh}.app-container,body{display:flex;overflow:hidden}.app-container{background-color:#f8f9fa;min-height:100vh}.header-bar{align-items:center;background-image:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 5px #00000026;color:#fff;display:flex;flex-shrink:0;font-family:Poppins,sans-serif;font-size:1.1rem;font-weight:500;justify-content:space-between;min-height:48px;padding:0 20px}.header-bar .title-group{align-items:center;display:flex;gap:12px}.header-bar img.logo{height:32px;width:32px}.manual-btn{background-color:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;font-size:.85rem;padding:6px 12px;transition:background-color .2s ease}.manual-btn:hover{background-color:#ffffff4d}.app-body{display:flex;flex-grow:1;overflow:hidden}.sidebar{background-color:#fff;border-right:1px solid #e2e8f0;box-shadow:2px 0 10px #0000001a;display:flex;flex-direction:column;gap:1rem;min-width:250px;overflow-y:auto;padding:.5rem;width:250px}.sidebar pre{background-color:#f8f9fa;border:1px solid #e2e8f0;border-radius:.5rem;font-size:.8rem;line-height:1.4;margin:0;max-height:120px;overflow-x:auto;padding:.55rem}.main-content{gap:1rem;padding:1rem}.canvas-container,.main-content{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.canvas-container{background-color:#fff;border-radius:1rem;box-shadow:0 4px 6px #0000001a;min-height:800px;position:relative}.canvas-header{background-color:#f8f9fa;border-bottom:1px solid #e2e8f0;color:#2d3748;font-family:Poppins,sans-serif;font-size:1.25rem;font-weight:600;padding:.75rem;text-align:center}.canvas-area{align-items:center;display:flex;flex:1 1;justify-content:center;overflow:hidden;position:relative}.canvas-area,canvas{background-color:#fff}canvas{max-height:100%;max-width:100%;touch-action:none}.controls{background-color:#fff;border-radius:.5rem;box-shadow:0 2px 4px #0000001a;display:flex;gap:.75rem;margin:0 auto;padding:.75rem;width:fit-content}.control-button{background-color:#4a5568;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:.9rem;font-weight:600;padding:.5rem 1rem;transition:all .2s ease}.control-button:hover{background-color:#2d3748;transform:translateY(-1px)}.control-button:active{transform:translateY(0)}.control-button.undo{background-color:#e53e3e}.control-button.undo:hover{background-color:#c53030}.control-button.redo{background-color:#3182ce}.control-button.redo:hover{background-color:#2c5282}.control-button.clear{background-color:#718096}.control-button.clear:hover{background-color:#4a5568}.control-button.save{background-color:#38a169}.control-button.save:hover{background-color:#2f855a}.control-button:disabled{background-color:#cbd5e0;cursor:not-allowed;transform:none}@media (max-width:768px){.app-container{flex-direction:column}.sidebar{border-bottom:1px solid #e2e8f0;border-right:none;min-width:100%;width:100%}.main-content{padding:.75rem}.canvas-container{min-height:500px}}.code-preview-column{background-color:#fff;border-left:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 4px #0000000d;display:flex;flex:2 1;flex-direction:column;padding:16px}.code-preview-column .head-label-small{color:#2d3748;font-family:Poppins,sans-serif;font-size:1rem;font-weight:500;margin-bottom:10px;text-align:center}#codePreviewArea{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;box-sizing:border-box;color:#2d3748;flex-grow:1;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9rem;line-height:1.5;overflow:auto;padding:12px;white-space:pre;width:100%}.bottom-bar{grid-gap:16px;align-items:center;background-image:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 -2px 5px #0000001a;display:grid;flex-shrink:0;gap:16px;grid-template-columns:1fr auto 1fr;min-height:48px;padding:12px 24px}.bottom-bar-section{display:flex;gap:12px}.bottom-bar-section.left{justify-content:flex-start}.bottom-bar-section.center{justify-content:center}.bottom-bar-section.right{justify-content:flex-end}.btn{border:none;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;padding:10px 20px;text-shadow:0 1px 1px #0000001a;transition:all .2s ease}.btn:focus{box-shadow:0 0 0 3px #ffffff80;outline:2px solid #0000;outline-offset:2px}.btn:active{transform:translateY(1px)}.draw-btn{background-color:#10b981}.draw-btn:hover{background-color:#059669;box-shadow:0 4px 6px #0000001a}.clear-btn{background-color:#ef4444}.clear-btn:hover{background-color:#dc2626;box-shadow:0 4px 6px #0000001a}.redo-btn,.undo-btn{background-color:#f59e0b}.redo-btn:hover,.undo-btn:hover{background-color:#d97706;box-shadow:0 4px 6px #0000001a}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}
/*# sourceMappingURL=main.dd5d815d.css.map*/