:root{--primary-color: #68d391;--secondary-color: #2d3748;--success-color: #48bb78;--error-color: #ff3b30;--text-color: #e2e8f0;--text-secondary: #718096;--background-color: #0d151e;--animation-duration: .4s;--animation-easing: ease-in-out;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .35);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs: clamp(11px, 2.5vw, 12px);--font-size-sm: clamp(12px, 3vw, 14px);--font-size-md: clamp(14px, 3.5vw, 16px);--font-size-lg: clamp(16px, 4vw, 20px);--font-size-xl: clamp(18px, 5vw, 24px);--z-base: 1;--z-step: 10;--z-controls: 100;--z-overlay: 999;--z-modal: 9999}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;width:100%;overflow:hidden}body{background-color:var(--background-color);color:var(--text-color);line-height:1.5;display:flex;flex-direction:column;width:100%}strong{font-weight:600;color:#edf2f7}.container{flex:1;max-width:100%;width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;position:relative;overflow:hidden;height:100vh}.main-content{flex:1;position:relative;display:flex;flex-direction:column;height:calc(100vh - 70px);width:100%;overflow:hidden}.text-error{color:var(--error-color);font-weight:700;text-shadow:0 0 8px rgba(255,59,48,.25)}.text-success{color:var(--success-color);font-weight:600;text-shadow:0 0 8px rgba(72,187,120,.2)}.global-error{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:var(--z-overlay);width:calc(100% - 40px);max-width:320px}.error-message{color:var(--error-color);background-color:#ff3b3033;padding:10px;border-radius:var(--radius-md);margin:1vh auto;max-width:280px;text-align:center;display:none;font-size:var(--font-size-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;background-color:var(--text-color);color:#2d3748;border:none;border-radius:12px;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .3s ease;margin:0 5px;text-align:center;line-height:1;vertical-align:middle}.btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.btn:active{transform:translateY(0);box-shadow:0 2px 8px #00000026}.btn-secondary{background-color:transparent;color:var(--text-color);border:2px solid #4a5568;padding:6px 14px}.btn-secondary:hover{background:#4a5568;border-color:#68d391;color:#fff;box-shadow:0 5px 15px #0003}.btn-secondary:active{transform:translateY(0);box-shadow:0 2px 8px #00000026}.btn-cart{background-color:#387c38;color:#fff;margin-top:40px;padding:16px 0;font-size:1.1rem;font-weight:700;border-radius:6px;transition:all .3s ease;width:80%;max-width:320px;box-shadow:0 4px 6px #0000001a}.btn-cart:hover{background-color:#2f662f;transform:translateY(-2px);box-shadow:0 6px 8px #0003}.btn-cart:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn-cart svg{margin-right:8px}.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-icon svg{flex-shrink:0}.capture-button{position:static;margin:0;width:60px;height:60px;border-radius:50%;background-color:transparent;border:4px solid rgba(255,255,255,.5);display:flex;justify-content:center;align-items:center;box-shadow:0 4px 15px #0000004d;cursor:pointer;transition:all .2s ease;z-index:2}.capture-button.aligned{border-color:#fff;transform:scale(1.05)}.inner-circle{width:48px;height:48px;border-radius:50%;border:none;background:#ffffff80;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative}.camera-icon{width:24px;height:24px;object-fit:contain;filter:invert(.3);transition:filter .2s ease}.capture-button.disabled .inner-circle{background:#a0aec0;opacity:.5}.capture-button.disabled .camera-icon{filter:invert(.5);opacity:.6}.capture-button.aligned .inner-circle,.capture-button:not(.disabled) .inner-circle{background:#fff;opacity:1}.capture-button.aligned .camera-icon,.capture-button:not(.disabled) .camera-icon{filter:invert(.2)}.capture-button:hover .inner-circle{background:#e2e8f0}.capture-button:active .inner-circle{transform:scale(.9)}.controls{width:100%;text-align:center;padding:8px;position:fixed;bottom:0;left:0;background-color:var(--background-color);box-shadow:0 -2px 8px #0000004d;z-index:var(--z-controls);height:55px;display:flex;justify-content:center;align-items:center;overflow:visible}body.step-4 .controls:before{content:"";position:absolute;top:-28px;left:50%;transform:translate(-50%);width:84px;height:42px;background-color:var(--background-color);border-top-left-radius:42px;border-top-right-radius:42px;z-index:-1;box-shadow:0 -4px 6px #0003}.controls .capture-button{position:absolute;left:50%;bottom:10px;transform:translate(-50%)}body.step-4 .controls{justify-content:flex-start}.file-input{display:none}.step-container{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1vh 2vw;opacity:0;transform:translate(100%);transition:opacity var(--animation-duration) var(--animation-easing),transform var(--animation-duration) var(--animation-easing);z-index:var(--z-base);box-sizing:border-box;overflow:hidden;will-change:transform,opacity}.step-container.active{opacity:1;transform:translate(0);z-index:var(--z-step)}.step-container.previous,.step-container.pre-enter-left{transform:translate(-100%)}.step-container.pre-enter-right{transform:translate(100%)}.instructions-container{max-width:100%;text-align:center;margin-bottom:1vh;width:100%}.instruction-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:1vh}.instruction-description{color:var(--text-secondary);font-size:clamp(13px,3vw,15px);line-height:1.4;margin-bottom:1vh;padding:0 2vw}.visual-guide{position:relative;width:90%;max-width:280px;height:45vh;max-height:320px;margin:1vh auto;border-radius:var(--radius-lg);background-color:var(--secondary-color);overflow:visible;box-shadow:var(--shadow-lg);display:flex;justify-content:center;align-items:center}.animation-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:20px}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}.fade-in-up{animation:fadeInUp .6s ease}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.tutorial-video{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.camera-container{position:relative;width:90%;max-width:95vw;aspect-ratio:1 / 1.414;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 10px 30px #00000080;background:#4a5568;padding:15px;max-height:60vh}.camera-view-container{position:relative;width:100%;height:100%;overflow:hidden;transform:translateZ(0);will-change:transform;border-radius:10px;border:2px solid #4a5568}#camera-view,#captured-image{width:100%;height:100%;object-fit:cover;position:relative;z-index:var(--z-base)}.camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0003;z-index:var(--z-overlay);transform:translateZ(0);will-change:transform;pointer-events:none}.camera-guide{position:relative;width:min(65%,65vh / 1.414);aspect-ratio:1 / 1.414;border:2px dashed #68d391;border-radius:var(--radius-sm);box-shadow:0 0 0 1000px #0000004d}.tilt-badge{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#0f0f0f8c;color:#fff;padding:6px 10px;font-size:12px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:8px;-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px #00000040}.tilt-badge.ok{background:#24b156d9}.tilt-badge.warn{background:#ff3b30d9}.tilt-badge .separator{opacity:.7}.tilt-badge .tilt-info{display:inline-flex;gap:6px;align-items:center}.tilt-dial{--angle: 0deg;--progress: 0deg;--dial-size: 22px;--dial-color: var(--primary-color);width:var(--dial-size);height:var(--dial-size);position:relative;display:grid;place-items:center}.tilt-dial-ring{width:100%;height:100%;border-radius:50%;background:conic-gradient(from -90deg,var(--dial-color) 0deg,var(--dial-color) var(--progress),rgba(255,255,255,.15) var(--progress));transition:background .2s ease;position:relative}.tilt-dial-center{position:absolute;width:calc(var(--dial-size) - 6px);height:calc(var(--dial-size) - 6px);border-radius:50%;background:#0000008c;box-shadow:inset 0 0 0 1px #ffffff0f}@media (min-width: 768px){.camera-container{max-width:500px;max-height:707px;height:60vh}}@media (min-width: 1024px){.camera-container{max-width:600px;max-height:848px;height:65vh}}#step4 #camera-error{position:absolute;top:0;left:50%;transform:translate(-50%);z-index:calc(var(--z-overlay) + 1);width:calc(100% - 40px);max-width:320px;margin-top:10px}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.loading-spinner{width:50px;height:50px;border:3px solid rgba(104,211,145,.2);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-md);color:var(--text-color);margin-top:2vh}.result-container{text-align:center;max-width:100%;padding:0 5vw;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.result-title{font-size:var(--font-size-xl);font-weight:700;margin-bottom:1vh}.success-view .result-title{font-size:var(--font-size-lg);font-weight:400;margin-bottom:0;color:#fff}.result-value{font-size:clamp(14px,4.5vw,18px);font-weight:700;color:var(--primary-color);margin:.5vh 0}.result-subtitle{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:.5vh}.result-animation{width:70px;height:70px;margin:0 auto 2vh;position:relative}.success-view .result-animation,.result-animation .checkmark,.result-animation .crossmark,.result-animation .infomark{display:none}.result-animation.success .checkmark,.result-animation.error .crossmark,.result-animation.neutral .infomark{display:block}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:var(--success-color);stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--success-color);animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--success-color);fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}.crossmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:var(--error-color);stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--error-color);animation:fill-error .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.crossmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--error-color);fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.crossmark__cross{stroke-linecap:round;stroke:var(--error-color);stroke-dasharray:56;stroke-dashoffset:56;animation:stroke .5s cubic-bezier(.65,0,.45,1) .7s forwards}.infomark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:#6c757d;stroke-miterlimit:10;box-shadow:inset 0 0 #6c757d;animation:fill-info .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.infomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#6c757d;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.infomark__i{stroke-linecap:round;stroke:#6c757d;stroke-dasharray:30;stroke-dashoffset:30;animation:stroke .4s cubic-bezier(.65,0,.45,1) .7s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #0d151e}}@keyframes fill-error{to{box-shadow:inset 0 0 0 30px #0d151e}}@keyframes fill-info{to{box-shadow:inset 0 0 0 30px #0d151e}}.size-display{text-align:center;margin:3vh 0}.size-label{font-size:clamp(16px,4vw,20px);color:var(--text-secondary);margin-bottom:1vh;font-weight:500}.success-view .size-label{display:none}.size-badge{display:inline-flex;align-items:center;justify-content:center;width:180px;height:180px;border-radius:50%;background:transparent;border:4px solid white;color:#fff;font-size:80px;font-weight:700;letter-spacing:1px;box-shadow:none;margin:30px auto;position:relative;overflow:visible}.size-badge:after{content:"";position:absolute;bottom:40px;left:50%;transform:translate(-50%);width:60px;height:4px;background-color:#3182ce}.size-badge:before{display:none}@keyframes shine{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}50%{transform:translate(100%) translateY(100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.size-brand{font-size:clamp(14px,3.5vw,18px);color:var(--text-secondary);font-weight:600;letter-spacing:.5px;margin-top:1vh}.debug-measurements{background:#ffffff0d;border-radius:var(--radius-sm);padding:1vh;margin:2vh 0;border-left:3px solid var(--text-secondary);display:none}.debug-measurements .result-subtitle{font-size:clamp(11px,2.5vw,12px);opacity:.8}.debug-measurements .result-value{font-size:clamp(12px,3.5vw,14px);font-weight:600}#desktop-blocker{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:24px}.desktop-blocker-card{background:#2d3748;color:#e2e8f0;width:min(520px,90vw);border-radius:var(--radius-lg);padding:24px;text-align:center;box-shadow:var(--shadow-xl)}.desktop-blocker-card h2{font-size:clamp(18px,4vw,24px);margin-bottom:8px;color:#fff}.desktop-blocker-card p{color:#e2e8f0;font-size:clamp(13px,3vw,15px);margin-bottom:16px}#desktop-qr{width:min(280px,70vw);height:auto;display:block;margin:0 auto 8px}@media (max-width: 375px),(max-height: 640px){.main-content{height:calc(100vh - 50px)}.controls{height:50px;padding:6px}.btn{padding:5px 10px;font-size:clamp(11px,2.8vw,13px)}.btn-secondary{padding:3px 8px}.visual-guide{height:40vh}.capture-button{width:36px;height:36px;margin:.5vh auto}.inner-circle{width:30px;height:30px}}@media (max-height: 500px){.visual-guide{height:35vh}.camera-container{max-height:50vh}.camera-guide{width:65%}.result-animation{width:50px;height:50px;margin-bottom:1vh}.instruction-description{margin-bottom:.5vh}.controls{height:45px;padding:5px}.capture-button{width:34px;height:34px}.inner-circle{width:28px;height:28px}}@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2),only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3),only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){.controls{height:45px;padding:5px;bottom:env(safe-area-inset-bottom,0px)}.main-content{height:calc(100vh - 45px - env(safe-area-inset-bottom,0px))}.capture-button{width:34px;height:34px;margin:.3vh auto}.inner-circle{width:28px;height:28px}.btn{padding:4px 8px;font-size:12px}.btn-secondary{padding:2px 6px}}@media (max-width: 320px) and (max-height: 568px){.visual-guide{height:45vh}.paper-outline{width:min(140px,38vw);height:calc(min(140px,38vw)*1.414)}.controls{height:42px;padding:4px}.capture-button{width:32px;height:32px}.inner-circle{width:26px;height:26px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}