body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{align-items:center;background-color:#f0f0f0;background-image:linear-gradient(#e0e0e0 1px,#0000 0),linear-gradient(90deg,#e0e0e0 1px,#0000 0);background-size:10px 10px;display:flex;justify-content:center;min-height:100vh}.main-container{align-items:flex-start;display:flex;gap:40px;max-width:1200px;padding:40px 20px;width:100%}.image-card{align-items:center;display:flex;flex:2 1;flex-direction:column;justify-content:center;min-height:500px}.image-card,.steps-panel{background-color:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;padding:30px}.steps-panel{flex:1 1;min-width:300px}.steps-title{color:#333;font-size:20px;font-weight:600;margin:0 0 30px;text-align:left}.step-list{display:flex;flex-direction:column;gap:20px}.step-header,.step-item{transition:all .3s ease}.step-header{color:#d8d8d8;font-size:16px;font-weight:400;margin-bottom:5px}.step-header.active{color:#333;font-weight:700}.step-header.completed{color:#666;font-weight:500}.step-header{align-items:center;display:flex;justify-content:space-between}.modify-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:14px;font-weight:400;margin:0;padding:0;text-decoration:underline;transition:all .2s ease}.modify-button:hover{color:#0056b3;text-decoration:none}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #fff;border-radius:50%;border-top-color:#0000;display:inline-block;height:14px;margin-right:8px;width:14px}@keyframes spin{to{transform:rotate(1turn)}}.step-content{max-height:0;opacity:0;overflow:hidden;transition:all .4s ease}.step-content.active{margin-top:15px;max-height:400px;opacity:1}.step-description{color:#666;font-size:13px;line-height:1.4;margin-bottom:15px}.upload-area{border:2px dashed #ccc;border-radius:12px;cursor:pointer;max-width:400px;padding:40px 20px;text-align:center;transition:all .3s ease;width:100%}.upload-area:hover{background-color:#f8f9ff;border-color:#007bff}.upload-icon{opacity:.6}.upload-text{color:#666;font-size:16px;font-weight:500;margin:0}.image-display{border-radius:12px;box-shadow:0 4px 16px #0000001a;max-height:500px;max-width:600px;width:100%}.controls-group{gap:15px}.controls-group,.input-row{display:flex;flex-direction:column}.input-row{gap:8px}.input-row label{color:#333;font-size:13px;font-weight:600}.control-buttons{display:flex;gap:10px;margin-top:15px}.pixel-stats{background-color:#f8f9fa;border-radius:8px;margin-bottom:15px;padding:15px}.pixel-stats-title{color:#333;font-size:14px;font-weight:600;margin:0 0 8px}.pixel-stats-info{display:flex;flex-direction:column;gap:5px}.pixel-stats-info span{color:#666;font-size:13px}.selection-info{background-color:#e8f5e8;border-radius:8px;margin-top:10px;padding:12px}.selection-info strong{color:#2d5a2d;font-size:14px}.file-input{display:none}.btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;justify-content:center;min-width:120px;padding:10px 18px;text-decoration:none;transition:all .2s ease}.btn-primary{background-color:#393939;color:#fff}.btn-primary:hover:not(:disabled){background-color:#066fdf}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#545b62;box-shadow:0 4px 12px #6c757d40;transform:translateY(-1px)}.btn:disabled{background-color:#e9ecef;box-shadow:none;color:#6c757d;cursor:not-allowed;transform:none}.btn-outline{background-color:initial;border:2px solid #d7d7d7;color:#000}.btn-outline:hover{background-color:#d7d7d7}.input{background-color:#fff;border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px 12px;transition:border-color .2s ease}.input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40;outline:none}.measurement-controls,.pixelation-controls,.selection-controls{align-items:center;display:flex;flex-wrap:wrap;gap:15px}.distance-input{align-items:center;display:flex;gap:10px}.hint{color:#666;font-size:12px;font-style:italic}.pixelation-controls label{align-items:center;color:#555;display:flex;font-size:14px;gap:8px}.selection-info{background-color:#e7f3ff;border-radius:4px;color:#06c;font-size:14px;font-weight:500;padding:6px 12px}.canvas-container{align-items:flex-start;display:flex;flex:1 1;justify-content:center;overflow:auto;padding:20px}.main-canvas{border:2px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #0000001a;cursor:crosshair;max-height:calc(100vh - 200px)}.placeholder{align-items:center;background-color:#f8f9fa;border:3px dashed #dee2e6;border-radius:12px;color:#6c757d;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:400px;transition:all .3s ease}.placeholder:hover{background-color:#e9ecef;border-color:#adb5bd}.upload-icon{font-size:48px;margin-bottom:15px;opacity:.7}.placeholder p{font-weight:500;margin:0}.main-canvas{background-color:#fff;border:3px solid #dee2e6;border-radius:12px;box-shadow:0 8px 24px #0000001a;max-height:calc(100vh - 300px);max-width:100%;transition:all .2s ease}.main-canvas:hover{box-shadow:0 12px 32px #00000026}.cursor-grab{cursor:grab!important}.cursor-crosshair{cursor:crosshair!important}@media (max-width:768px){.App{padding:20px 10px}.main-container{flex-direction:column;gap:20px}.image-card,.steps-panel{min-height:auto;padding:20px}.steps-panel{min-width:auto}.upload-area{max-width:100%;padding:30px 15px}.upload-icon{font-size:36px}.control-buttons{flex-direction:column}.btn,.input{width:100%}}.image-container{align-items:center;display:flex;flex-direction:column;width:100%}.color-palette-section{margin-bottom:20px;width:100%}.palette-tabs{margin-bottom:15px}.tab-buttons{display:flex;gap:10px;justify-content:center}.tab-button{background-color:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;color:#666;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease}.tab-button.active{background-color:#007bff;border-color:#007bff;color:#fff}.tab-button:hover:not(.active){background-color:#e9ecef;border-color:#adb5bd}.color-palette{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(8,1fr);justify-content:center;margin:0 auto;max-width:640px;padding:0 10px}.color-item{flex-direction:column;gap:6px}.color-circle,.color-item{align-items:center;display:flex}.color-circle{border:1px solid #ccc;border-radius:50%;box-shadow:0 2px 8px #00000026;color:#fff;font-size:12px;font-weight:700;height:40px;justify-content:center;text-shadow:0 0 3px #000c;transition:transform .2s ease;width:40px}.color-circle:hover{transform:scale(1.1)}.color-letter{font-family:Arial,sans-serif;font-weight:700}.color-count{color:#333;font-size:12px;font-weight:600}.color-hex{color:#666;font-family:Courier New,monospace;font-size:10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.measurement-controls,.pixelation-controls,.selection-controls{animation:fadeIn .3s ease}.color-palette-section{animation:fadeIn .4s ease}.color-info-note{margin-top:10px;opacity:.7;text-align:center}.color-info-note small{color:#666;font-size:11px;font-style:italic}.navigation-buttons{display:flex;gap:8px;justify-content:left;margin-top:10px}.nav-button{align-items:center;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;cursor:pointer;display:flex;font-size:12px;gap:4px;justify-content:center;min-width:60px;padding:6px 12px;transition:all .2s ease}.nav-button:hover:not(:disabled){background-color:#e9ecef;border-color:#adb5bd;transform:translateY(-1px)}.nav-button:disabled{background-color:#f8f9fa;border-color:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.6}.nav-icon{line-height:10px}.nav-icon,.nav-label{font-size:14px;font-weight:700}.nav-label{color:#666}.nav-button:hover:not(:disabled) .nav-label{color:#495057}
/*# sourceMappingURL=main.72a76024.css.map*/