:root{--primary-color: #e31e24;--primary-hover: #c41419;--secondary-color: #ff6b6b;--success-color: #51cf66;--error-color: #ff3333;--background: #f5f5dc;--surface: #fef9f3;--surface-alt: #fff5f5;--text-primary: #000000;--text-secondary: #333333;--border-color: #333333;--accent-yellow: #ffd43b;--accent-orange: #ff922b;--accent-pink: #ffa8a8;--accent-blue: #74c0fc;--accent-teal: #63e6be;--shadow: 5px 5px 0 rgba(0, 0, 0, .8);--shadow-lg: 7px 7px 0 rgba(0, 0, 0, .8)}*{margin:0;padding:0;box-sizing:border-box}.mobile-text{display:none}.desktop-text{display:inline}body{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif;background-color:#e8f3e8!important;background-image:url(/green-textile-texture.jpg)!important;background-size:cover!important;background-position:center!important;background-attachment:fixed!important;background-repeat:no-repeat!important;color:var(--text-primary);line-height:1.6;padding:2rem 1rem;min-height:100vh;position:relative;font-size:15px}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffff4d;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);z-index:0;pointer-events:none}.container{max-width:1200px;margin:0 auto;position:relative;z-index:1}header{text-align:center;margin-bottom:2rem;background:var(--surface);padding:0;border:4px solid var(--border-color);border-radius:20px;box-shadow:var(--shadow);position:relative;transform:rotate(-.5deg)}header:before{content:"🎨";display:block;background:var(--primary-color);background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;padding:8px 15px;font-weight:700;font-size:14px;text-align:left;border-bottom:3px solid var(--border-color);border-radius:15px 15px 0 0;position:relative}header:after{content:"";position:absolute;top:11px;right:20px;width:20px;height:20px;background:var(--accent-teal);border:3px solid var(--border-color);border-radius:50%;box-shadow:-35px 0 0 0 var(--accent-yellow),-35px 0 0 3px var(--border-color),-70px 0 0 0 var(--accent-orange),-70px 0 0 3px var(--border-color)}header h1{font-size:2.2rem;margin:1.5rem 1rem .5rem;color:var(--primary-color);text-shadow:3px 3px 0 rgba(0,0,0,.1);font-weight:900;transform:rotate(.5deg)}header p{font-size:1.1rem;color:var(--text-secondary);padding:0 1rem 1.5rem;margin:0}main{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.upload-section{grid-column:1 / -1}.upload-area{background:var(--surface-alt);border:4px dashed var(--border-color);border-radius:25px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow);position:relative;transform:rotate(.5deg)}.upload-area:hover{background:#fff;transform:rotate(0) scale(1.02);border-color:var(--primary-color)}.upload-area.drag-over{background:var(--accent-yellow);border-color:var(--primary-color);border-style:solid;transform:rotate(-.5deg) scale(1.05)}.upload-area svg{color:var(--primary-color);margin-bottom:1rem;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.2))}.upload-area h2{font-size:1.8rem;margin-bottom:.5rem;color:var(--text-primary);font-weight:900}.upload-area p{color:var(--text-secondary);margin-bottom:1rem;font-size:1.1rem}.btn-upload{display:inline-block;background:var(--primary-color);color:#fff;padding:.75rem 2rem;border:3px solid var(--border-color);border-radius:50px;font-weight:900;cursor:pointer;transition:all .2s ease;margin:1rem 0;box-shadow:4px 4px #000c;font-size:16px;text-transform:uppercase;letter-spacing:.5px}.btn-upload:hover{background:var(--primary-hover);transform:translate(-2px,-2px);box-shadow:6px 6px #000c}.btn-upload:active{transform:translate(2px,2px);box-shadow:2px 2px #000c}.file-types{font-size:.875rem;color:var(--text-secondary);margin-top:1rem}.preview-section{grid-column:1 / -1;background:var(--surface);padding:0;border:4px solid var(--border-color);border-radius:20px;box-shadow:var(--shadow-lg);position:relative;transform:rotate(.5deg)}.preview-section:before{content:"🖼️";display:block;background:var(--accent-pink);background:linear-gradient(135deg,var(--accent-pink) 0%,var(--secondary-color) 100%);color:#fff;padding:8px 15px;font-weight:700;font-size:14px;text-align:left;border-bottom:3px solid var(--border-color);border-radius:15px 15px 0 0}.preview-section:after{content:"";position:absolute;top:11px;right:20px;width:20px;height:20px;background:var(--accent-blue);border:3px solid var(--border-color);border-radius:50%;box-shadow:-35px 0 0 0 var(--accent-yellow),-35px 0 0 3px var(--border-color),-70px 0 0 0 var(--accent-teal),-70px 0 0 3px var(--border-color)}.preview-section h3{font-size:1.4rem;margin:1.5rem 1.5rem 1rem;color:var(--text-primary);font-weight:900}.image-info{background:#f0f8ff;padding:1rem 1.25rem;border:3px solid var(--border-color);border-radius:15px;margin:0 1.5rem 1.5rem;box-shadow:3px 3px #00000080}.image-info p{margin-bottom:.5rem;font-size:.9375rem}.image-info p:last-child{margin-bottom:0}.preview-container{margin:0 1.5rem 1.5rem;border:4px solid var(--border-color);border-radius:15px;background:#2a2a2a;display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px;box-shadow:inset 2px 2px 5px #0000004d;position:relative}.print-area-wrapper{position:relative;border-radius:8px;overflow:hidden}.preview-container img{display:block;object-fit:cover}.print-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10}.crop-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.crop-overlay.invalid-ratio:before{content:"";position:absolute;top:3.33%;left:3.33%;right:3.33%;bottom:5.71%;border:4px dotted var(--error-color);border-radius:5px;pointer-events:none;filter:drop-shadow(0 0 3px rgba(227,30,36,.5))}.crop-overlay:not(.invalid-ratio):after{content:"";position:absolute;top:3.33%;left:3.33%;right:3.33%;bottom:5.71%;border:4px dotted #39ff14;border-radius:5px;pointer-events:none;filter:drop-shadow(0 0 3px #39ff14) drop-shadow(0 0 5px #39ff14)}.crop-labels{position:absolute;z-index:6;pointer-events:none}.crop-label{position:absolute;background:var(--error-color);color:#fff;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;box-shadow:2px 2px #00000080}.crop-label.top{top:1.66%;left:50%;transform:translate(-50%)}.crop-label.bottom{bottom:1.66%;left:50%;transform:translate(-50%)}.crop-label.left{left:1.66%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:mixed}.crop-label.right{right:1.66%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:mixed}.print-info{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;z-index:15;box-shadow:3px 3px #00000080}.safe-area-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#51cf66e6;color:#fff;padding:10px 20px;border-radius:15px;font-size:14px;font-weight:900;z-index:15;border:3px solid var(--border-color);box-shadow:4px 4px #0009;text-transform:uppercase}.validation-result{margin:0 1.5rem 1.5rem}.result-header{padding:1rem 1.25rem;font-size:1.2rem;font-weight:900;margin-bottom:1rem;border:4px solid;border-radius:20px;box-shadow:4px 4px #000000b3}.result-header.valid{background:#d3f9d8;color:#2b8a3e;border-color:var(--success-color);transform:rotate(-.5deg)}.result-header.invalid{background:#ffe3e3;color:#c92a2a;border-color:var(--error-color);transform:rotate(.5deg)}.image-details{background:#fffef7;padding:1rem 1.25rem;border:3px solid var(--border-color);border-radius:15px;margin-bottom:1rem;box-shadow:3px 3px #00000080}.detail-item{padding:.5rem 0;border-bottom:1px dotted var(--border-color)}.detail-item:last-child{border-bottom:none}.error-list{background:#ffe3e3;padding:1rem 1.25rem;border:3px solid var(--error-color);border-radius:15px;box-shadow:3px 3px #00000080}.error-list h4{color:var(--error-color);margin-bottom:.75rem}.error-list ul{list-style:none;padding-left:0}.error-list li{padding:.5rem 0;color:#991b1b}.error-list li:before{content:"• ";color:var(--error-color);font-weight:700;margin-right:.5rem}.loading{text-align:center;font-size:1.125rem;color:var(--text-secondary);padding:2rem}.btn-reset{display:block;width:calc(100% - 3rem);margin:0 1.5rem 1.5rem;background:var(--primary-color);color:#fff;padding:.875rem 1.5rem;border:3px solid var(--border-color);border-radius:50px;font-size:16px;font-weight:900;cursor:pointer;transition:all .2s ease;box-shadow:4px 4px #000c;font-family:inherit;text-transform:uppercase;letter-spacing:.5px}.btn-reset:hover{background:var(--primary-hover);transform:translate(-2px,-2px);box-shadow:6px 6px #000c}.btn-reset:active{transform:translate(2px,2px);box-shadow:2px 2px #000c}@media (max-width: 768px){.mobile-text{display:inline}.desktop-text{display:none}body{padding:1rem .5rem;background-attachment:scroll}header{margin-bottom:2rem;padding:1.5rem 1rem}header h1{font-size:1.75rem;line-height:1.2}header p{font-size:1rem}.upload-area{padding:2rem 1rem}.upload-area h2{font-size:1.25rem}.upload-area svg{width:48px;height:48px}.preview-section{padding:1.5rem}.preview-section h3{font-size:1.25rem}.preview-container{min-height:200px}.preview-container img{max-height:400px}.image-info,.image-details{padding:1rem;font-size:.875rem}.result-header{padding:.875rem 1rem;font-size:1rem}.btn-upload,.btn-reset{padding:.875rem 1.5rem;font-size:.9375rem}}@media (max-width: 480px){body{padding:.75rem .5rem}header h1{font-size:1.5rem}header p{font-size:.9375rem}.upload-area{padding:1.5rem .75rem}.upload-area svg{width:40px;height:40px}.preview-section{padding:1rem}}@media (hover: none) and (pointer: coarse){.btn-upload,.btn-reset{min-height:44px;padding:.875rem 1.5rem}.upload-area{border-width:2px}.upload-area:hover{border-color:var(--border-color);background:var(--surface)}.btn-upload:hover,.btn-reset:hover{background:var(--primary-color)}.upload-area:active{border-color:var(--primary-color);background:#eff6ff}.btn-upload:active,.btn-reset:active{background:var(--primary-hover)}}@media (max-width: 968px) and (orientation: landscape){body{padding:1rem}header{margin-bottom:1.5rem}.upload-area{padding:1.5rem}.preview-container{max-height:50vh}.preview-container img{max-height:45vh}}.logo-watermark{position:fixed;bottom:1.5rem;left:1.5rem;z-index:1000;opacity:.9;transition:opacity .3s ease}.logo-watermark img{height:60px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.logo-watermark:hover{opacity:1}@media (max-width: 768px){.logo-watermark{bottom:1rem;left:1rem}.logo-watermark img{height:40px}}@media (max-width: 480px){.logo-watermark{bottom:.75rem;left:.75rem}.logo-watermark img{height:35px}}