:root{--primary-color: #2563EB;--primary-hover: #1d4ed8;--secondary-color: #64748b;--bg-color: #f8fafc;--card-bg: #ffffff;--text-main: #0f172a;--text-muted: #64748b;--border-color: #e2e8f0;--error-color: #ef4444;--success-color: #22c55e;--radius-md: 12px;--radius-sm: 8px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);padding:10px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-main);min-height:100vh;padding:20px;line-height:1.5}.app-container{max-width:100%;background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;position:relative;display:flex;flex-direction:column}.header{background:#fff;padding:24px;border-bottom:1px solid var(--border-color)}.header h1{font-size:1.25rem;font-weight:700;text-align:center;margin-bottom:24px;color:var(--text-main)}.progress-bar{display:flex;align-items:center;justify-content:space-between;padding:0 10px}.step-indicator{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:2;color:var(--text-muted)}.step-circle{width:32px;height:32px;border-radius:50%;background:#e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;transition:all .3s ease}.step-indicator.active .step-circle{background:var(--primary-color);color:#fff;box-shadow:0 0 0 4px #2563eb33}.step-indicator.completed .step-circle{background:var(--success-color);color:#fff}.step-indicator span{font-size:11px;font-weight:500}.line{flex:1;height:2px;background:var(--border-color);margin:0 10px 20px;position:relative;top:-12px;z-index:1}main{padding:24px;flex:1}h2{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:var(--text-main)}.description{font-size:.9rem;color:var(--text-muted);margin-bottom:20px}.form-group{margin-bottom:16px}.grid-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:500;color:var(--text-main)}.required:after{content:"*";color:var(--error-color);margin-left:4px}.form-control{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.95rem;transition:border-color .2s,box-shadow .2s;outline:none;background:#fff}.form-control:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}textarea.form-control{resize:vertical}.error-message{color:var(--error-color);font-size:.85rem;margin-top:6px;min-height:20px}.file-group{margin-bottom:20px}.upload-box{border:1px dashed var(--border-color);border-radius:var(--radius-sm);padding:12px;background:#fcfcfc}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;cursor:pointer;color:var(--text-muted);transition:background .2s}.upload-placeholder:hover{background:#f1f5f9}.upload-placeholder .icon{font-size:24px;margin-bottom:4px}.file-list{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.file-item{position:relative;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.file-item img{width:100%;height:100%;object-fit:cover}.file-item .file-info{padding:8px;text-align:center;font-size:.8rem;color:var(--text-muted);word-break:break-all}.file-item .remove{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:background .2s}.file-item .remove:hover{background:var(--error-color)}.actions{margin-top:32px;display:flex;justify-content:flex-end;gap:12px}.btn{padding:10px 24px;border-radius:var(--radius-sm);font-weight:500;font-size:.95rem;cursor:pointer;border:none;transition:all .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:#f1f5f9;color:var(--text-main)}.btn-secondary:hover:not(:disabled){background:#e2e8f0}#loading-overlay{position:absolute;inset:0;background:#ffffffe6;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:3px solid rgba(37,99,235,.3);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite;margin-bottom:12px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.step-content{animation:fadeIn .4s ease;max-width:100%;width:100%}.result-message{text-align:center;padding:32px 24px;border-radius:var(--radius-md);margin-bottom:24px}.result-success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:2px solid var(--success-color)}.result-error{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid var(--error-color)}.result-icon{font-size:48px;margin-bottom:12px;font-weight:700}.result-success .result-icon{color:var(--success-color)}.result-error .result-icon{color:var(--error-color)}.result-message h3{font-size:1.3rem;margin-bottom:8px;color:var(--text-main)}.result-message p{color:var(--text-muted);font-size:.95rem}.data-display{font-family:Courier New,monospace;font-size:.9rem;background:#f8fafc;white-space:pre-wrap;word-wrap:break-word}.copy-button{width:100%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px}@media(max-width:640px){body{padding:0}.header{padding:16px}.header h1{font-size:1.1rem;margin-bottom:16px}.progress-bar{padding:0}.step-indicator span{font-size:10px;max-width:60px;text-align:center;line-height:1.2}.step-circle{width:28px;height:28px;font-size:12px}.line{margin:0 4px}main{padding:16px}h2{font-size:1rem}.description{font-size:.85rem}.grid-row{grid-template-columns:1fr;gap:12px}.form-group{margin-bottom:14px}label{font-size:.85rem}.form-control{padding:9px 11px;font-size:.9rem}.actions{margin-top:24px;flex-direction:column-reverse;gap:10px}.btn{width:100%;padding:12px 24px}.file-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.upload-placeholder{padding:16px}.upload-placeholder .icon{font-size:20px}}@media(max-width:480px){.step-indicator span{font-size:9px;max-width:50px}.step-circle{width:24px;height:24px;font-size:11px}.step-indicator.active .step-circle{box-shadow:0 0 0 3px #2563eb33}.line{margin:0 2px}.header h1{font-size:1rem}main{padding:12px}.form-control{font-size:16px}.file-list{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}}@media(max-width:360px){.header{padding:12px}.step-indicator span{font-size:8px;max-width:45px}.progress-bar{padding:0}}