:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-primary:#0b3048;--color-secondary:#63c7bd;--color-secondary-dark:#24998f;--color-accent-pink:#e83d8c;--color-accent-yellow:#ffe22e;--color-accent-purple:#7564b8;--color-success:#2fa99d;--color-background:#fbf9f3;--color-surface:#fff;--color-soft:#eef8f6;--color-soft-warm:#fff8df;--color-border:#d9e6e2;--color-text:#26343d;--color-muted:#65737b;--color-danger:#c93636;--shadow-card:0 12px 34px #0b30481f;--shadow-button:0 4px 14px #0b304838;--button-bg:var(--color-primary);--button-bg-hover:#123d5b}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%;height:100vh;margin:0 auto}.welcome-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.welcome-content{text-align:center;background:var(--color-surface);max-width:500px;box-shadow:var(--shadow-card);border-radius:14px;padding:40px 24px;animation:.5s ease-out slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.welcome-logo{margin-bottom:22px}.brand-logo{width:min(100%,360px);height:auto;margin:0 auto;display:block}.welcome-screen h1{color:var(--color-text);margin-bottom:12px;font-size:42px;font-weight:700}.welcome-tagline{color:var(--color-text);margin-bottom:10px;font-size:18px;line-height:1.35}.local-note{color:var(--color-accent-pink);margin-bottom:26px;font-size:14px;font-weight:700}.process-list{counter-reset:steps;text-align:left;background:var(--color-soft);border-left:4px solid var(--color-secondary);border-radius:10px;margin:0 0 18px;padding:16px;list-style:none}.process-list li{counter-increment:steps;color:var(--color-text);padding:9px 0 9px 38px;font-size:14px;line-height:1.35;position:relative}.process-list li:before{content:counter(steps);background:var(--color-primary);width:26px;height:26px;color:var(--color-surface);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex;position:absolute;top:5px;left:0}.payment-note{background:var(--color-soft-warm);color:#51452c;text-align:left;border:1px solid #eadfbf;border-radius:10px;margin:0 0 24px;padding:12px;font-size:13px;line-height:1.45}.payment-note strong{color:var(--color-text)}.feature p{color:var(--color-muted);font-size:12px}.cta-button{background:var(--button-bg);width:100%;color:var(--color-surface);box-shadow:var(--shadow-button);border-radius:12px;padding:16px 32px;font-size:18px;font-weight:700;transition:all .3s}.cta-button:hover{background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 18px #0b304847}@media (width<=640px){.welcome-content{padding:30px 20px}.welcome-screen h1{font-size:32px}.welcome-tagline{font-size:16px}.brand-logo{width:min(100%,300px)}}.magnet-type-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.type-content{text-align:center;background:var(--color-surface);width:100%;max-width:600px;box-shadow:var(--shadow-card);border-radius:20px;padding:40px 20px;animation:.5s ease-out slideUp}.type-content h1{color:var(--color-text);margin-bottom:10px;font-size:36px}.subtitle{color:var(--color-muted);margin-bottom:40px;font-size:16px}.type-options{grid-template-columns:repeat(2,1fr);align-items:stretch;gap:20px;display:grid}.type-option{background:var(--color-soft);border:2px solid var(--color-border);cursor:pointer;text-align:center;border-radius:16px;flex-direction:column;justify-content:space-between;align-items:center;height:100%;min-height:292px;padding:20px;transition:all .3s;display:flex}.type-option:hover{border-color:var(--color-secondary-dark);background:#f3fbf9;transform:translateY(-4px);box-shadow:0 8px 20px #0b30481f}.type-preview{justify-content:center;align-items:center;width:100%;height:136px;margin-bottom:15px;display:flex}.round-preview{background:var(--color-surface);border:2px solid var(--color-border);border-radius:50%;width:136px;height:136px;padding:20px}.circle{background:var(--color-secondary);border:6px solid var(--color-primary);border-radius:50%;width:80px;height:80px;box-shadow:inset 0 0 0 10px #ffffff59}.rectangle-preview{background:var(--color-surface);border:2px solid var(--color-border);border-radius:8px;width:136px;height:148px;padding:18px 20px}.rectangle-shape{background:var(--color-secondary);border:6px solid var(--color-primary);border-radius:4px;width:68px;height:100px;box-shadow:inset 0 0 0 10px #ffffff59}.type-option h2{color:var(--color-text);justify-content:center;align-items:center;min-height:48px;margin-bottom:8px;font-size:20px;display:flex}.type-option p{color:#7b878e;min-height:36px;font-size:13px;line-height:1.35}@media (width<=640px){.type-content{max-width:420px;padding:30px 20px}.type-content h1{font-size:28px}.type-options{grid-template-columns:1fr}.type-option{width:100%;min-height:252px}.type-preview{margin-bottom:12px}.round-preview,.rectangle-preview{max-width:136px}}.upload-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.upload-content{text-align:center;background:var(--color-surface);max-width:500px;box-shadow:var(--shadow-card);border-radius:20px;padding:40px 20px;animation:.5s ease-out slideUp}.upload-content h1{color:var(--color-text);margin-bottom:10px;font-size:36px}.upload-content .subtitle{color:var(--color-muted);margin-bottom:30px;font-size:16px}.upload-area{border:2px dashed var(--color-primary);background:#63c7bd14;border-radius:16px;margin-bottom:30px;padding:40px 20px;transition:all .3s}.upload-area:hover{border-color:var(--color-secondary-dark);background:#63c7bd24}.upload-icon{border:3px solid var(--color-primary);background:var(--color-surface);border-radius:8px;width:64px;height:50px;margin:0 auto 15px;position:relative}.upload-icon:before{content:"";border:3px solid var(--color-primary);background:var(--color-surface);border-bottom:0;border-radius:6px 6px 0 0;width:24px;height:12px;position:absolute;top:-10px;left:18px}.upload-icon:after{content:"";border:3px solid var(--color-primary);background:var(--color-soft);border-radius:50%;width:18px;height:18px;position:absolute;top:13px;left:20px}.upload-icon{margin-bottom:15px}.upload-text{color:var(--color-muted);margin-bottom:20px;font-size:16px}.upload-button{background:var(--button-bg);color:var(--color-surface);border-radius:10px;padding:14px 28px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #0b304838}.upload-button:hover{background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0b304847}.upload-button:disabled{opacity:.65;cursor:not-allowed;transform:none}.hidden-input{display:none}.upload-error{border-left:4px solid var(--color-danger);color:#8a1f16;text-align:left;background:#fdecea;border-radius:8px;margin-bottom:18px;padding:12px;font-size:14px;font-weight:600}.upload-tips{text-align:left;background:var(--color-soft);border-left:4px solid var(--color-primary);border-radius:12px;padding:20px}.upload-tips h3{color:var(--color-text);margin-bottom:12px;font-size:16px}.upload-tips ul{padding:0;list-style:none}.upload-tips li{color:var(--color-muted);padding:6px 0 6px 20px;font-size:14px;position:relative}.upload-tips li:before{content:"✓";color:var(--color-primary);font-weight:700;position:absolute;left:0}@media (width<=640px){.upload-content{padding:30px 20px}.upload-content h1{font-size:28px}.upload-icon{font-size:50px}.upload-area{padding:30px 15px}}.adjust-photo-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.adjust-content{text-align:center;background:var(--color-surface);width:100%;max-width:700px;box-shadow:var(--shadow-card);border-radius:20px;max-height:95vh;padding:30px 20px;animation:.5s ease-out slideUp;overflow-y:auto}.adjust-content h1{color:var(--color-text);margin-bottom:10px;font-size:36px}.adjust-content .subtitle{color:var(--color-muted);margin-bottom:25px;font-size:16px}.cropper-container{border:2px solid var(--color-border);background:#f4f6f5;border-radius:12px;width:100%;height:350px;margin-bottom:20px;position:relative;overflow:hidden}.warning-message{background:var(--color-soft-warm);border-left:4px solid var(--color-accent-yellow);color:#6c5520;border-radius:8px;margin-bottom:20px;padding:15px;font-size:14px}.warning-message p{margin:0}.zoom-controls{flex-direction:column;gap:12px;margin-bottom:25px;display:flex}.zoom-controls label{color:var(--color-muted);font-size:14px;font-weight:600}.zoom-slider{background:var(--color-border);appearance:none;border-radius:3px;outline:none;width:100%;height:6px}.zoom-slider::-webkit-slider-thumb{appearance:none;background:var(--button-bg);cursor:pointer;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #0b304838}.zoom-slider::-moz-range-thumb{background:var(--button-bg);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #0b304838}.preview-info{background:var(--color-soft);border:2px solid var(--color-soft);border-radius:12px;flex-direction:column;align-items:center;gap:15px;margin-bottom:25px;padding:20px;display:flex}.preview-box{width:min(var(--preview-width), 100%);aspect-ratio:var(--preview-aspect-ratio);background:var(--color-surface);border:2px solid var(--color-primary);flex:none;position:relative;overflow:hidden;box-shadow:0 4px 12px #0b30481f}.preview-loading{width:100%;height:100%;color:var(--color-muted);text-align:center;justify-content:center;align-items:center;padding:16px;font-size:13px;display:flex}.preview-label{color:var(--color-muted);font-size:13px;font-weight:500}.next-button{background:var(--button-bg);color:var(--color-surface);border-radius:10px;flex:1;max-width:200px;padding:14px 32px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #0b304838}.next-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0b304847}.next-button:disabled{opacity:.6;cursor:not-allowed}@media (width<=640px){.adjust-content{padding:20px 15px}.adjust-content h1{font-size:28px}.cropper-container{height:280px}.preview-box{width:min(var(--preview-width), 200px, 100%)}.next-button{max-width:100%}}.order-details-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.details-content{text-align:center;background:var(--color-surface);width:100%;max-width:500px;box-shadow:var(--shadow-card);border-radius:20px;max-height:95vh;padding:30px 20px;animation:.5s ease-out slideUp;overflow-y:auto}.details-content h1{color:var(--color-text);margin-bottom:10px;font-size:36px}.details-content .subtitle{color:var(--color-muted);margin-bottom:25px;font-size:16px}.customer-form{text-align:left;margin-bottom:16px}.form-row{grid-template-columns:1fr 1fr;gap:15px;display:grid}.form-group{flex-direction:column;margin-bottom:20px;display:flex}.form-group label{color:var(--color-text);text-align:left;margin-bottom:8px;font-size:14px;font-weight:600}.form-group input,.form-group textarea{border:2px solid var(--color-border);border-radius:8px;padding:12px;font-family:inherit;font-size:16px;transition:all .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #63c7bd2e}.form-group input.error{border-color:var(--color-danger)}.error-text{color:var(--color-danger);text-align:left;margin-top:6px;font-size:12px}.notes-input{resize:vertical;min-height:80px}.details-payment-note{margin-bottom:18px}.quantity-selector{border:2px solid var(--color-border);border-radius:8px;align-items:center;gap:0;display:flex;overflow:hidden}.quantity-selector input{text-align:center;border:none;flex:1;padding:10px;font-size:16px;font-weight:600}.quantity-selector input:focus{outline:none;box-shadow:inset 0 0 0 2px #0b30481f}.qty-btn{background:var(--color-soft);color:var(--color-primary);cursor:pointer;border:none;padding:10px 15px;font-size:20px;font-weight:600;transition:all .2s}.qty-btn:hover{background:#dff3ef}.qty-btn:active{transform:scale(.95)}.next-button{background:var(--button-bg);width:100%;color:var(--color-surface);border-radius:10px;padding:14px 24px;font-size:18px;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #0b304838}.next-button:hover{background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0b304847}@media (width<=640px){.details-content{padding:20px 15px}.details-content h1{font-size:28px}.form-row{grid-template-columns:1fr}}.review-order-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.review-content{text-align:center;background:var(--color-surface);width:100%;max-width:500px;box-shadow:var(--shadow-card);border-radius:20px;max-height:95vh;padding:30px 20px;animation:.5s ease-out slideUp;overflow-y:auto}.review-content h1{color:var(--color-text);margin-bottom:8px;font-size:36px}.review-content .subtitle{color:var(--color-muted);margin-bottom:25px;font-size:14px}.preview-section{text-align:center;border-bottom:2px solid var(--color-soft);margin-bottom:30px;padding-bottom:25px}.preview-section h2{color:var(--color-muted);margin-bottom:15px;font-size:18px;font-weight:600}.order-preview{width:min(var(--preview-width), 100%);aspect-ratio:var(--preview-aspect-ratio);background:var(--color-surface);border:3px solid var(--color-primary);flex:none;margin:0 auto 12px;overflow:hidden;box-shadow:0 6px 16px #0b304824}.magnet-info{text-align:left;background:var(--color-soft);border-radius:8px;margin-top:12px;padding:12px}.magnet-type{color:var(--color-muted);margin-bottom:8px;font-size:14px;font-weight:500}.magnet-type strong{color:var(--color-text)}.preview-note{color:var(--color-primary);margin:0;font-size:13px;font-weight:500}.payment-confirmation-note{background:var(--color-soft-warm);color:#51452c;text-align:left;border:1px solid #eadfbf;border-radius:10px;margin:-8px 0 18px;padding:12px;font-size:13px;line-height:1.45}.order-summary{text-align:left;background:var(--color-soft);border-left:4px solid var(--color-primary);border-radius:12px;margin-bottom:25px;padding:20px}.summary-item .value{color:var(--color-text);text-align:right;flex:1;margin-left:12px;font-weight:600}.action-buttons{justify-content:space-between;gap:12px;display:flex}.submit-error{border-left:4px solid var(--color-danger);color:#8a1f16;text-align:left;background:#fdecea;border-radius:8px;margin-bottom:18px;padding:12px;font-size:14px;font-weight:600}.order-verification{justify-content:center;min-height:65px;margin:0 0 18px;display:flex}.turnstile-widget{min-width:300px;min-height:65px}.verification-warning{color:#8a1f16;margin:0;font-size:14px;font-weight:600}.back-button{color:var(--color-text);border:2px solid var(--color-border);background:#f4f6f5;border-radius:10px;flex:1;padding:14px 24px;font-size:16px;font-weight:700;transition:all .3s;box-shadow:0 2px 8px #0000001a}.back-button:disabled,.submit-button:disabled{opacity:.65;cursor:not-allowed;transform:none}.submit-button{background:var(--button-bg);color:var(--color-surface);border-radius:10px;flex:1;padding:14px 24px;font-size:16px;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #0b304838}.submit-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0b304847}@media (width<=640px){.review-content{padding:20px 15px}.review-content h1{font-size:28px}.preview-section{margin-bottom:20px;padding-bottom:20px}.order-preview{width:min(var(--preview-width), 180px, 100%);margin:0 auto 12px}.action-buttons{flex-direction:column}.back-button,.submit-button{width:100%}}.order-submitted-screen{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.submitted-content{text-align:center;background:var(--color-surface);max-width:500px;box-shadow:var(--shadow-card);border-radius:20px;padding:40px 20px;animation:.5s ease-out slideUp}.success-icon{background:var(--color-success);width:80px;height:80px;color:var(--color-surface);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 25px;font-size:48px;animation:.5s ease-out scaleIn;display:flex}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.submitted-content h1{color:var(--color-text);margin-bottom:12px;font-size:36px}.confirmation-message{color:var(--color-muted);margin-bottom:30px;font-size:18px;font-weight:500}.order-summary{background:var(--color-soft);border-left:4px solid var(--color-primary);text-align:left;border-radius:12px;margin-bottom:25px;padding:20px}.order-summary h2{color:var(--color-text);text-align:center;margin-bottom:15px;font-size:16px;font-weight:600}.submitted-preview-wrap{justify-content:center;margin-bottom:18px;display:flex}.submitted-preview{width:min(var(--preview-width), 100%);aspect-ratio:var(--preview-aspect-ratio);background:var(--color-surface);border:2px solid var(--color-primary);flex:none;overflow:hidden;box-shadow:0 4px 12px #0b30481f}.submitted-preview img{object-fit:cover;width:100%;height:100%;display:block}.stored-image-note{color:var(--color-muted);text-align:center;margin-bottom:18px;font-size:13px;line-height:1.4}.summary-item{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:12px 0;font-size:14px;display:flex}.summary-item:last-child{border-bottom:none}.summary-item .label{color:var(--color-muted);font-weight:500}.summary-item .value{color:var(--color-text);font-weight:600}.order-id{background:var(--color-soft);border-radius:4px;padding:4px 8px;font-family:Courier New,monospace}.next-steps{text-align:left;background:var(--color-surface);border:2px dashed var(--color-primary);border-radius:12px;margin-bottom:25px;padding:20px}.next-steps h3{color:var(--color-text);text-align:center;margin-bottom:12px;font-size:16px;font-weight:600}.next-steps ul{padding:0;list-style:none}.next-steps li{color:var(--color-muted);padding:8px 0 8px 24px;font-size:14px;position:relative}.next-steps li:before{content:"→";color:var(--color-primary);font-weight:700;position:absolute;left:4px}.restart-button{background:var(--button-bg);width:100%;color:var(--color-surface);border-radius:10px;padding:14px 24px;font-size:18px;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #0b304838}.restart-button:hover{background:var(--button-bg-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0b304847}@media (width<=640px){.submitted-content{padding:30px 20px}.submitted-content h1{font-size:28px}.confirmation-message{font-size:16px}.order-summary{padding:15px}.summary-item{padding:10px 0;font-size:13px}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}.app{background:radial-gradient(circle at top left, #63c7bd2e, transparent 32rem), linear-gradient(180deg, var(--color-background) 0%, #eef8f6 100%);flex-direction:column;width:100%;min-height:100dvh;display:flex}.progress-bar{z-index:100;background:#0b30481f;width:100%;height:4px;position:sticky;top:0}.progress-fill{background:linear-gradient(90deg, var(--color-secondary), var(--color-accent-pink));height:100%;transition:width .3s}button{cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-family:inherit;font-size:16px;font-weight:600;transition:all .2s}button:active{transform:scale(.98)}button:disabled{opacity:.6;cursor:not-allowed}input,textarea,select{font-family:inherit;font-size:16px}.action-buttons{margin-top:20px;margin-bottom:max(8px, env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0);scroll-margin-bottom:max(36px, calc(28px + env(safe-area-inset-bottom,0px)));justify-content:center;gap:12px;display:flex}.action-buttons button,.cta-button,.upload-button,.restart-button{scroll-margin-bottom:max(40px, calc(32px + env(safe-area-inset-bottom,0px)))}.back-button{max-width:200px;color:var(--color-text);border:2px solid var(--color-border);background:#f4f6f5;border-radius:10px;flex:1;padding:14px 24px;font-size:16px;font-weight:700;transition:all .3s;box-shadow:0 2px 8px #0000001a}.back-button:hover:not(:disabled){background:var(--color-border);border-color:#7b878e}@media (width<=640px){.app{font-size:16px}.action-buttons{margin-bottom:max(12px, env(safe-area-inset-bottom,0px));flex-direction:column}.back-button{width:100%;max-width:none}}.welcome-screen,.magnet-type-screen,.upload-screen,.adjust-photo-screen,.order-details-screen,.review-order-screen,.order-submitted-screen{min-height:100dvh;padding-bottom:max(24px, calc(20px + env(safe-area-inset-bottom,0px)))}.adjust-content,.details-content,.review-content{max-height:calc(100dvh - 40px - env(safe-area-inset-bottom,0px));padding-bottom:max(24px, calc(20px + env(safe-area-inset-bottom,0px)))}@media (width<=640px){.welcome-screen,.magnet-type-screen,.upload-screen,.adjust-photo-screen,.order-details-screen,.review-order-screen,.order-submitted-screen{padding-top:16px;padding-bottom:max(28px, calc(24px + env(safe-area-inset-bottom,0px)));align-items:flex-start}.adjust-content,.details-content,.review-content{max-height:calc(100dvh - 44px - env(safe-area-inset-bottom,0px));padding-bottom:max(28px, calc(22px + env(safe-area-inset-bottom,0px)))}}