body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#e9e9e9;background-size:contain;overflow:hidden}.canvas-container textarea,.canvas-container input[type=text]{position:fixed!important;top:-10000px!important;left:-10000px!important;opacity:0!important;pointer-events:none!important}.app-container,.App{text-align:center;height:100vh;overflow:hidden}.main-layout{display:grid;grid-template-columns:290px 1fr 290px;grid-template-rows:65px 1fr;grid-template-areas:"header header header" "left-sidebar main-content right-sidebar";height:100vh;gap:calc(var(--spacing-unit) * 2);padding:calc(var(--spacing-unit) * 2);box-sizing:border-box;background-image:url(/assets/wood.jpeg);background-size:cover;background-repeat:space;background-position:center}.main-layout.template-anelli,.canvas-wrapper.template-anelli{--template-scope: anelli}.canvas-wrapper.template-anelli{--anelli-safe-padding: 60;--template-text-font-size: 84;--template-text-width: 850;--template-text-top: 120}.app-header{grid-area:header;display:flex;justify-content:space-between;align-items:center;text-align:center;padding-bottom:var(--spacing-unit);position:relative}.button{font-family:var(--font-secondary);font-size:.9rem;border:1px solid var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);min-width:50%;max-width:120px;font-weight:700;color:var(--color-primary-text);border-radius:var(--spacing-unit);cursor:pointer;transition:var(--transition-fast)}.header-left-controls{position:absolute;left:0;top:50%;transform:translateY(-50%)}.template-tabs{display:flex;align-items:center;gap:.25rem}.template-tabs .tab-sep{width:1px;height:18px;background:#00000040;display:inline-block}.template-tabs button{background:transparent;border:none;padding:0;margin:0;min-width:110px!important;max-width:110px!important;font-family:var(--font-secondary)!important;font-size:.95rem;font-weight:600;color:var(--color-secondary-text);opacity:.55;cursor:pointer;transition:color .15s ease,opacity .15s ease,transform .15s ease}.template-tabs button:hover{opacity:.8;color:var(--color-primary-text)}.template-tabs button.active{opacity:1;color:var(--color-primary-text);transform:none}.app-header h1{margin:0;font-family:var(--font-signature);font-size:2rem;color:var(--color-primary-text);flex-grow:1}.main-layout .app-header h1{font-size:3rem;color:#8c7961;padding-left:10rem;text-shadow:0px 0px 0 #8c7961,0px 1px 0 #8c7961}.header-right-controls{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:1rem}.header-btn{font-family:var(--font-secondary);font-size:.9rem;background-color:transparent;border:1px solid var(--color-border);color:var(--color-secondary-text);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s ease;min-width:150px}.save-btn{background-color:#3bae5c!important;color:#fff;min-width:230px;font-weight:700;font-size:1.2rem;height:60px;font-family:var(--font-primary)}.header-btn:hover{background-color:var(--color-background);border-color:var(--color-secondary-text);color:var(--color-primary-text)}.left-sidebar,.right-sidebar{border:2px solid transparent;border-radius:16px;padding:1rem .7rem;background-image:url(/assets/whiteleather.jpeg);background-size:cover;background-repeat:no-repeat;background-position:center;position:relative;outline:outset 4px #d9d9d9;outline-offset:-4px;outline-style:ridge;box-shadow:0 0 20px #0000001a;min-height:0;overflow:hidden}.left-sidebar{grid-area:left-sidebar;padding:1rem}.left-sidebar:before,.right-sidebar:before{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;pointer-events:none;background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23D4D4D4FF' stroke-width='5' stroke-dasharray='20%2c 19' stroke-dashoffset='28' stroke-linecap='round'/%3e%3c/svg%3e");border-radius:8px;background-size:100% 100%;background-repeat:no-repeat;background-position:center}.left-sidebar .image-controls-panel h4{margin-top:.4rem}span.last-used-tag{font-family:var(--font-secondary);font-size:1rem;position:relative;top:.2rem;color:#666}.alignment-controls{margin-top:0;margin-bottom:.5rem}.alignment-controls .button-group{display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem;width:158px;max-width:158px}.alignment-controls .button-group button{flex-grow:1;max-width:none;background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-secondary-text);transition:all .2s ease-in-out}#font-size-controls .button-group{min-width:245px!important}#font-size-controls .button-group button{font-size:1.4rem!important}.alignment-controls .button-group button:hover{background-color:var(--color-border);color:var(--color-primary-text)}.alignment-controls .button-group button.active{background-color:var(--color-primary-text);color:var(--color-surface);border-color:var(--color-primary-text);box-shadow:0 2px 8px #0000001a}.canvas-area{grid-area:main-content;display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:0;will-change:transform}.canvas-wrapper{box-shadow:0 8px 25px #0003;background-color:var(--color-surface);transform-origin:center center}.canvas-wrapper canvas{display:block}.right-sidebar{grid-area:right-sidebar;padding:1rem}.right-sidebar hr{display:none}h4{font-size:1.3rem;font-weight:600;color:#555;text-shadow:0px 2px 3px #fff;margin-top:.6rem;margin-bottom:.6rem}.format-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0 .75rem}.format-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .5rem .6rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-secondary-text);min-height:70px;cursor:pointer;transition:all .15s ease-in-out}.format-btn .label{font-family:var(--font-secondary);font-size:.9rem;font-weight:600;margin-top:.25rem}.format-btn.active{background-color:var(--color-primary-text);color:var(--color-surface);border-color:var(--color-primary-text);box-shadow:0 2px 8px #0000001a}.image-controls-panel h4{margin-bottom:1.5rem;margin-top:.6rem!important}.control-slider{margin-bottom:28px}.control-slider label{display:block;margin-top:.7rem;margin-bottom:.35rem;font-family:var(--font-secondary);text-transform:uppercase;font-size:.85rem;font-weight:600;color:var(--color-secondary-text);letter-spacing:2px}.control-slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:205px;height:16px;background:transparent;outline:none;padding:0;margin:0}.control-slider input[type=range]::-webkit-slider-runnable-track{width:100%;height:32px;cursor:pointer;background-image:url(/assets/slider-track.svg);background-size:100% 100%;border-radius:3px}.control-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:26px;width:26px;margin-top:2px;background-image:url(/assets/slider-thumb.svg);background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer}.control-slider input[type=range]::-moz-range-track{width:100%;height:32px;cursor:pointer;background-image:url(/assets/slider-track.svg);background-size:100% 100%;border-radius:3px}.control-slider input[type=range]::-moz-range-thumb{height:26px;width:26px;border:none;background-image:url(/assets/slider-thumb.svg);background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer}.search-bar input{width:100%;height:24px;padding:.5rem .3rem .5rem .7rem;margin-bottom:1rem;margin-left:.4rem;box-sizing:content-box;border:1px solid var(--color-border);border-radius:var(--spacing-unit);font-family:var(--font-secondary);font-size:1rem}.search-bar input:focus{outline:2px solid var(--color-accent);border-color:transparent}canvas{border:1px solid var(--color-border);border-radius:var(--spacing-unit)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--color-background);padding:2rem;border-radius:8px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:500px;text-align:center;border:1px solid var(--color-border)}.modal-content h2{margin-top:0}.modal-content textarea{width:100%;min-height:100px;margin-bottom:1rem;box-sizing:border-box}.modal-content .feedback-actions{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.modal-content .feedback-actions button.accept{background-color:#4caf50;color:#fff;border-color:#4caf50}.modal-content .feedback-actions button.reject{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.startup-view-in-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;border:2px dashed var(--color-surface-variant);border-radius:8px;color:var(--color-on-surface)}.startup-view-in-canvas h2{font-size:2rem;margin-bottom:0}.startup-view-in-canvas p{font-size:1.3rem!important;margin-bottom:1.5rem}.startup-actions button{min-width:200px!important;margin:.5rem;font-size:1rem}.generation-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#181a1bb3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:999;display:flex;align-items:center;justify-content:center}.feedback-actions{display:flex;justify-content:center;gap:1rem}.generation-modal{background-image:url(/assets/whiteleather.jpeg);background-size:cover;padding:2.5rem;border-radius:16px;outline:outset 4px #d9d9d9;outline-offset:-4px;box-shadow:0 10px 30px #0003;width:90%;max-width:700px;position:relative;color:var(--color-primary-text);text-align:center}.generation-modal h2{font-family:var(--font-primary);font-size:2.2rem;margin-top:0;margin-bottom:1.5rem;color:#333}.generation-modal textarea{width:100%;min-height:120px;padding:1rem;font-family:var(--font-primary);font-size:1.1rem;border-radius:8px;border:1px solid var(--color-border);margin-bottom:1.5rem;box-sizing:border-box}.generation-modal select,.generation-modal button{margin:0 .5rem;min-width:190px!important;font-size:1rem}.generation-modal button.accept-button{background-color:#4caf50;color:#fff;border-color:#4caf50}.generation-modal button.reject-button{background-color:#f44336;color:#fff;border-color:#f44336}.generation-modal button.send-feedback-button{min-width:270px!important}.generation-modal img{max-width:100%;max-height:560px;border-radius:8px;margin-bottom:1.5rem;box-shadow:var(--shadow-soft)}.simplebar-scrollbar,.simplebar-track{pointer-events:all!important}.confirmation-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-background);padding:2rem;border-radius:12px;box-shadow:var(--shadow-strong);width:90%;max-width:400px;text-align:center;outline:none}.confirmation-content p{margin-bottom:1.5rem;font-size:1.1rem;color:var(--color-text-primary)}.confirmation-actions{display:flex;justify-content:center;gap:1rem}.confirmation-actions button{padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s ease}.confirmation-actions .confirm-button{background-color:#c9302c;color:#fff}.confirmation-actions .confirm-button:hover{background-color:#a92824}.confirmation-actions .cancel-button{background-color:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border)}.confirmation-actions .cancel-button:hover{background-color:var(--color-surface-hover)}.action-buttons{margin-bottom:1rem}.color-tooltip{position:absolute;background-color:#333;color:#fff;padding:8px;border-radius:6px;z-index:1000;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px #0003;border:1px solid rgba(255,255,255,.1);transition:opacity .2s ease-in-out,transform .2s ease-in-out;transform:translate(-50%,-100%);opacity:1}.tooltip-color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;padding:0;border:none;background-color:transparent;cursor:pointer}.tooltip-color-picker::-webkit-color-swatch-wrapper{padding:0}.tooltip-color-picker::-webkit-color-swatch{border-radius:50%;border:2px solid #fff}.tooltip-color-picker::-moz-color-swatch{border-radius:50%;border:2px solid #fff}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw;background-color:var(--color-background);background-image:var(--bg-image-wood)}.login-form-container{position:relative;text-align:center}.login-box{width:100%;max-width:400px;padding:3rem 2.5rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-deep);text-align:center;position:relative;outline:2px solid var(--color-border);outline-offset:-10px;margin-top:100px}.svgContainer{position:relative;top:-15px;left:50%;transform:translate(-50%);z-index:10;width:200px;height:200px;pointer-events:none}.login-box .svgContainer{position:relative;margin:0}.login-header{margin-bottom:0}.login-header h1{font-family:var(--font-signature);font-size:2.5rem;color:var(--color-text-primary);margin:0 0 .5rem}.login-header p{font-family:var(--font-secondary);font-size:1.25rem;color:var(--color-text-secondary);margin:0}.input-group{margin-bottom:1.5rem;text-align:left}.input-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--color-text-secondary)}.input-group input{width:90%;padding:.8rem 1rem;border-radius:6px;border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text-primary);font-size:1rem}.input-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px hsla(var(--color-primary-hsl),.2)}.login-button{width:100%;padding:.9rem 1rem;font-size:1.1rem;font-weight:700;border-radius:6px;cursor:pointer;transition:background-color .2s;display:flex;justify-content:center;align-items:center;min-height:48px}.login-button:hover:not(:disabled){background-color:hsl(var(--color-primary-hsl),55%,50%)}.login-button:disabled{background-color:var(--color-text-disabled);cursor:not-allowed}.login-error{color:var(--color-danger);margin-top:1rem;min-height:1.2em}.login-button .loading-spinner.small{width:20px;height:20px;border-width:3px;margin:0}.svgContainer{position:relative;width:200px;height:200px;margin:0 auto 1em;border-radius:50%;pointer-events:none}.svgContainer div{position:relative;width:100%;height:0;overflow:hidden;border-radius:50%;padding-bottom:100%}.svgContainer .mySVG{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.svgContainer:after{content:"";position:absolute;top:0;left:0;z-index:10;width:inherit;height:inherit;box-sizing:border-box;border:solid 2.5px #217093;border-radius:50%}.inputGroup1 .helper{position:absolute;z-index:1;font-family:inherit}.inputGroup1 .helper1{top:0;left:0;transform:translate(1em,2.2em) scale(1);transform-origin:0 0;color:#217093;font-size:1.55em;font-weight:400;opacity:.65;pointer-events:none;transition:transform .2s ease-out,opacity .2s linear}.inputGroup1.focusWithText .helper{transform:translate(1em,1.55em) scale(.6);opacity:1}#showPasswordToggle{display:block;padding:0 0 0 1.45em;position:absolute;top:.25em;right:0;font-size:1em;color:var(--color-text-secondary);cursor:pointer}#showPasswordToggle input{position:absolute;z-index:-1;opacity:0}#showPasswordToggle .indicator{position:absolute;top:0;left:0;height:.85em;width:.85em;background-color:var(--color-background);border:solid 2px var(--color-border);border-radius:3px}#showPasswordToggle .indicator:after{content:"";position:absolute;left:.25em;top:.025em;width:.2em;height:.5em;border:solid var(--color-text-primary);border-width:0 3px 3px 0;transform:rotate(45deg);visibility:hidden}#showPasswordToggle input:checked~.indicator:after{visibility:visible}#showPasswordToggle input:focus~.indicator,#showPasswordToggle input:hover~.indicator{border-color:var(--color-primary)}#showPasswordToggle input:disabled~.indicator{opacity:.5}#showPasswordToggle input:disabled~.indicator:after{visibility:hidden}.loading-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#f8f7f4b3;display:flex;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity .3s ease-in-out}.spinner-container{text-align:center;color:var(--color-primary-text);transform:scale(1.1);padding:30px;background-color:#fffc;border-radius:16px;box-shadow:var(--shadow-soft)}.spinner{border:6px solid #e0e0e0;border-top:6px solid #bc9970;border-radius:50%;width:60px;height:60px;animation:spin 1.2s cubic-bezier(.6,.2,.4,.8) infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner-overlay p{font-family:var(--font-primary);font-size:1.3rem;letter-spacing:.5px;margin:0}@font-face{font-family:Saint Andrews Queen;src:url(/assets/fonts/Saint-AndrewsQueen.woff2) format("woff2");font-weight:400;font-style:normal}:root{--font-primary: "Playwrite AU QLD", cursive;--font-signature: "Saint Andrews Queen", sans-serif;--font-secondary: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--font-phrases: "Emilys Candy", cursive;--color-background: #F8F7F4;--color-surface: #FFFFFF;--color-primary-text: #3F3943;--color-secondary-text: #757575;--color-accent: #E57373;--color-border: #E0E0E0;--fabric-accent: #ff0000;--fabric-accent-contrast: #08323B;--fabric-selection-fill: rgba(0,229,255,.08);--fabric-selection-border-width: 2;--fabric-handle-size: 24;--fabric-handle-size-touch: 36;--spacing-unit: 8px;--shadow-soft: 0 4px 12px rgba(0, 0, 0, .05);--transition-fast: all .2s ease-in-out;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;font-family:var(--font-primary);background-color:var(--color-background);color:var(--color-primary-text)}h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:400}button{font-family:var(--font-secondary);font-size:.9rem;border:1px solid var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);min-width:50%;max-width:120px;border-radius:var(--spacing-unit);cursor:pointer;transition:var(--transition-fast)}button:hover{box-shadow:var(--shadow-soft);border-color:var(--color-primary-text)}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{font-family:var(--font-primary);padding:var(--spacing-unit);border:1px solid var(--color-border);border-radius:var(--spacing-unit);background-color:var(--color-surface)}
