*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;color:#333}#app{max-width:100%}.container{max-width:600px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:40px;padding-top:20px}header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px}header p{font-size:1.1rem;opacity:.9}main{background:#fff;border-radius:12px;padding:30px;box-shadow:0 10px 40px #0000001a}.token-section{margin-bottom:30px}.token-section label{display:block;font-weight:600;margin-bottom:8px;color:#333}.token-input-group{display:flex;gap:10px}.token-input-group input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.token-input-group input:focus{outline:none;border-color:#667eea}.toggle-btn{padding:12px 20px;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}.toggle-btn:hover{background:#e0e0e0}.hint{font-size:.85rem;color:#666;margin-top:6px}.upload-zone{border:3px dashed #d0d0d0;border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:all .3s;background:#fafafa;min-height:250px;display:flex;align-items:center;justify-content:center}.upload-zone:hover:not(.disabled){border-color:#667eea;background:#f0f4ff}.upload-zone.drag-over{border-color:#667eea;background:#e8eeff;transform:scale(1.02)}.upload-zone.disabled{opacity:.6;cursor:not-allowed}.upload-prompt{width:100%}.upload-prompt svg{color:#667eea;margin-bottom:16px}.upload-prompt p{font-size:1.1rem;color:#333;margin-bottom:8px;font-weight:500}.upload-prompt .error{color:#e53e3e}.file-limit{font-size:.85rem;color:#999}.preview-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.preview-image{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 4px 12px #0000001a}.preview-info{text-align:center}.filename{font-weight:600;color:#333;margin-bottom:4px;word-break:break-word}.filesize{font-size:.9rem;color:#666;margin-bottom:12px}.clear-btn{padding:8px 24px;background:#fff;border:2px solid #e53e3e;color:#e53e3e;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}.clear-btn:hover{background:#e53e3e;color:#fff}.error-message{background:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin-top:16px;border-left:4px solid #e53e3e}.upload-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:20px}.upload-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.upload-btn:disabled{opacity:.6;cursor:not-allowed}.result-section{margin-top:24px;padding:24px;background:#f0f9ff;border-radius:8px;border:2px solid #667eea}.result-section h3{color:#667eea;margin-bottom:16px;text-align:center}.url-display{display:flex;gap:10px;margin-bottom:16px}.url-display input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:.95rem;background:#fff}.copy-btn{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.copy-btn:hover{background:#5568d3}.reset-btn{width:100%;padding:12px;background:#fff;border:2px solid #667eea;color:#667eea;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.reset-btn:hover{background:#667eea;color:#fff}.transform-section{margin-top:24px;padding:24px;background:#f8f9fa;border-radius:8px;border:2px solid #e0e0e0}.transform-section h3{color:#667eea;margin-bottom:20px;text-align:center;font-size:1.3rem}.transform-group{margin-bottom:12px;background:#fff;border-radius:6px;border:1px solid #e0e0e0;overflow:hidden}.transform-group-header{width:100%;padding:14px 16px;background:#f5f5f5;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:#333;transition:background-color .2s}.transform-group-header:hover{background:#e8e8e8}.toggle-icon{font-size:1.2rem;font-weight:700;color:#667eea;width:24px;text-align:center}.transform-group-content{padding:16px;display:flex;flex-direction:column;gap:16px}.transform-control{display:flex;flex-direction:column;gap:6px}.transform-control label{font-size:.9rem;font-weight:500;color:#555}.transform-control input[type=number],.transform-control input[type=text],.transform-control select{padding:10px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:.95rem;transition:border-color .2s;background:#fff}.transform-control input[type=number]:focus,.transform-control input[type=text]:focus,.transform-control select:focus{outline:none;border-color:#667eea}.transform-control input[type=range]{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.transform-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;transition:background .2s}.transform-control input[type=range]::-webkit-slider-thumb:hover{background:#5568d3}.transform-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:background .2s}.transform-control input[type=range]::-moz-range-thumb:hover{background:#5568d3}.transform-output{margin-top:24px;padding:20px;background:#fff;border-radius:8px;border:2px solid #667eea}.transform-output h4{color:#667eea;margin-bottom:16px;font-size:1.1rem}.transform-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:16px}.reset-transform-btn{padding:10px 20px;background:#fff;border:2px solid #e53e3e;color:#e53e3e;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.reset-transform-btn:hover{background:#e53e3e;color:#fff}.preview-toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#555;cursor:pointer}.preview-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.transform-preview{margin-top:16px;text-align:center;padding:16px;background:#f8f9fa;border-radius:6px;border:1px solid #e0e0e0}.transform-preview img{max-width:100%;max-height:400px;border-radius:6px;box-shadow:0 4px 12px #0000001a}@media(max-width:640px){header h1{font-size:2rem}main{padding:20px}.upload-zone{padding:30px 20px;min-height:200px}.url-display{flex-direction:column}.copy-btn{width:100%}.transform-section{padding:16px}.transform-group-content{padding:12px;gap:12px}.transform-actions{flex-direction:column;align-items:stretch}.reset-transform-btn{width:100%}}