:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-bg: #1e1e1e;--color-bg-panel: #252526;--color-border: #3e3e42;--color-primary: #007acc;--color-text: #cccccc;--color-text-light: #ffffff}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--color-bg);color:var(--color-text);overflow:hidden}#root{width:100%;height:100vh;display:flex;flex-direction:column}button{border-radius:4px;border:1px solid var(--color-border);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-bg-panel);cursor:pointer;transition:border-color .25s;color:var(--color-text-light)}button:hover{border-color:var(--color-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}input[type=file]{display:none}.toolbar{width:250px;background-color:var(--color-bg-panel);border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box;height:100%;overflow:hidden}@media(max-width:1024px){.toolbar{width:180px;padding:.5rem}.toolbar h3{font-size:.75rem}}.toolbar-section{margin-bottom:2rem}.toolbar-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:2px}.toolbar-footer{flex-shrink:0;padding-top:1rem;border-top:1px solid var(--color-border)}.toolbar-footer h3{margin-bottom:.5rem}.toolbar-footer-text,.toolbar-footer-note{margin:0;font-size:.75rem;line-height:1.4;color:var(--color-text)}.toolbar-footer-note{margin-top:.35rem;color:#888}.toolbar-footer-link{color:var(--color-primary);text-decoration:none}.toolbar-footer-link:hover{text-decoration:underline}.toolbar-section h3{font-size:.85rem;text-transform:uppercase;color:#888;margin-bottom:1rem;letter-spacing:.05em}.upload-btn{display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:#fff;padding:.75rem;border-radius:6px;cursor:pointer;font-weight:500;transition:opacity .2s}.upload-btn:hover{opacity:.9}.component-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.component-item{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;padding:10px;display:flex;flex-direction:column;align-items:center;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}@media(max-width:1024px){.component-list{grid-template-columns:1fr}}.component-item:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 6px #0003}.component-item:active{cursor:grabbing}.component-item span{margin-top:8px;font-size:.8rem;color:var(--color-text)}.stage-container{width:100%;height:100%;background-color:#e0e0e0;background-image:radial-gradient(#ccc 1px,transparent 1px);background-size:20px 20px;position:relative;touch-action:none;overflow:hidden}.top-right-panels{position:absolute;top:20px;right:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.how-to-wrapper{position:relative}.how-to-toggle{display:flex;align-items:center;gap:8px}.how-to-panel{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,80vw);background:#fffffff2;border:1px solid #ccc;border-radius:8px;padding:12px 14px;box-shadow:0 6px 20px #0000001f;color:#222}.how-to-panel h4{margin:0 0 8px;font-size:.95rem}.how-to-panel ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}.canvas-controls{display:flex;gap:10px;background:#fffc;padding:10px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.canvas-controls button{display:flex;align-items:center;gap:8px;background:#fff;color:#333;border:1px solid #ccc}.canvas-controls button:hover{background:#f5f5f5;border-color:#999}.canvas-controls .btn-prominent{color:#fff;border:none;box-shadow:0 2px 8px #0003}.canvas-controls .btn-prominent:hover{filter:brightness(.95);border:none}.canvas-controls .btn-howto{background:#0f766e}.canvas-controls .btn-export{background:#b45309}.canvas-controls .btn-grid{background:#e0f2fe;border-color:#7dd3fc;color:#0c4a6e}.canvas-controls .btn-zoom{background:#ede9fe;border-color:#c4b5fd;color:#4c1d95}@media(max-width:1024px){.top-right-panels{top:10px;right:10px}.canvas-controls{padding:5px;gap:5px}.canvas-controls button{font-size:.75rem;padding:4px 8px}.canvas-controls button[title="Esporta PDF"]{font-size:0}.canvas-controls button[title="Esporta PDF"] svg{width:16px;height:16px}.how-to-panel{width:min(280px,85vw)}}.payment-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-out}.payment-modal{background:#fff;width:90%;max-width:400px;border-radius:24px;padding:32px;position:relative;box-shadow:0 20px 50px #0000004d;text-align:center;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.close-btn{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:#666;padding:8px;border-radius:50%;transition:background .2s}.close-btn:hover{background:#f0f0f0}.modal-header{margin-bottom:24px}.icon-badge{width:64px;height:64px;background:linear-gradient(135deg,#6366f1,#a855f7);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 20px #6366f14d}.modal-header h2{font-size:1.5rem;color:#1a1a1a;margin:0 0 8px}.modal-header p{color:#666;margin:0;font-size:.95rem}.features-list{text-align:left;background:#f8fafc;padding:20px;border-radius:16px;margin-bottom:24px}.feature-item{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:#334155;font-size:.95rem}.feature-item:last-child{margin-bottom:0}.check-icon{color:#10b981;flex-shrink:0}.price-tag{margin-bottom:24px}.currency{font-size:1.5rem;font-weight:600;color:#1a1a1a;vertical-align:top}.amount{font-size:3.5rem;font-weight:700;color:#1a1a1a;line-height:1}.period{color:#666;font-size:.9rem;margin-left:6px}.buy-btn{width:100%;padding:16px;border-radius:12px;border:none;background:linear-gradient(135deg,#111,#333);color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 20px #00000026}.buy-btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px #00000040}.buy-btn:active{transform:translateY(0)}.secure-note{margin-top:16px;font-size:.75rem;color:#94a3b8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.app-container{display:flex;width:100vw;height:100vh;overflow:hidden}.rotate-message{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1a1a1a;z-index:9999;color:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}@media(orientation:portrait){.app-container{display:none}.rotate-message{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw;text-align:center;background-color:#f0f2f5;color:#333;padding:20px;box-sizing:border-box;position:fixed;top:0;left:0;z-index:9999}.rotate-message h1{font-size:1.5rem;margin-bottom:10px}.rotate-message p{font-size:1rem;color:#666;max-width:300px}}.workspace{flex:1;background-color:#333;position:relative;overflow:hidden}