*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%}body{font-family:system-ui,-apple-system,sans-serif;background-color:#fff;color:#000}#root{width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:column;padding:24px}.header{text-align:center;margin-bottom:24px}.header h1{display:flex;align-items:center;justify-content:center;gap:8px;font-size:32px;font-weight:700;color:#111827;margin-bottom:8px}.header-icon{width:32px;height:32px}.header h2{font-size:16px;font-weight:400;color:#6b7280}.drop-zone{flex:1;display:flex;align-items:center;justify-content:center;border:3px dashed #d1d5db;border-radius:12px;background-color:#fafafa;transition:all .2s ease;cursor:pointer}.drop-zone.dragging{border-color:#3b82f6;background-color:#eff6ff}.drop-zone.has-image{border-style:solid;border-color:#e5e7eb;background-color:#fff;cursor:default}.drop-message{display:flex;flex-direction:column;align-items:center;gap:16px;color:#9ca3af}.drop-icon{opacity:.6}.drop-message p{font-size:18px;font-weight:500}.image-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px;max-width:100%;max-height:100%}.image-preview{max-width:100%;max-height:50vh;display:flex;align-items:center;justify-content:center;cursor:pointer}.image-preview img{max-width:100%;max-height:50vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.original-size{font-size:14px;color:#6b7280;background-color:#f3f4f6;padding:8px 16px;border-radius:6px}.size-inputs{display:flex;gap:24px}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:14px;font-weight:500;color:#374151}.input-wrapper{display:flex;align-items:center;gap:8px}.input-wrapper input{width:120px;padding:10px 12px;font-size:16px;border:2px solid #e5e7eb;border-radius:8px;outline:none;transition:border-color .2s ease}.input-wrapper input:focus{border-color:#3b82f6}.input-wrapper input::-webkit-outer-spin-button,.input-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrapper input[type=number]{-moz-appearance:textfield}.copy-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:6px;background-color:#f3f4f6;color:#6b7280;cursor:pointer;transition:all .2s ease}.copy-button:hover{background-color:#e5e7eb;color:#374151}.copy-button.copied{background-color:#dcfce7;color:#16a34a}