*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#f0f1f3;--text:#1a1a2e;--text-secondary:#6b7280;--border:#e5e7eb;--primary:#7c3aed;--primary-hover:#6d28d9;--primary-light:#7c3aed1a;--success:#10b981;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 30px #0000001f;--radius:12px;--radius-sm:8px;color:var(--text);background:var(--bg-secondary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.6}body{flex-direction:column;min-height:100svh;display:flex}#app{flex-direction:column;width:100%;max-width:720px;min-height:100svh;margin:0 auto;padding:40px 24px;display:flex}header{text-align:center;margin-bottom:32px}header h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--primary), #ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2.25rem;font-weight:700}.subtitle{color:var(--text-secondary);font-size:1.05rem}main{flex-direction:column;flex:1;display:flex}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--bg);padding:48px 24px;transition:all .25s}.upload-zone:hover{border-color:var(--primary);background:var(--primary-light)}.upload-zone.dragover{border-color:var(--primary);background:var(--primary-light);transform:scale(1.01)}.upload-content{flex-direction:column;align-items:center;gap:12px;display:flex}.upload-icon{color:var(--text-secondary);transition:color .25s}.upload-zone:hover .upload-icon{color:var(--primary)}.upload-text{color:var(--text-secondary);font-size:1.1rem}.upload-link{color:var(--primary);text-underline-offset:2px;font-weight:600;text-decoration:underline}.upload-hint{color:var(--text-secondary);opacity:.7;font-size:.85rem}.processing{background:var(--bg);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:16px;padding:48px 24px}.processing:not([hidden]){display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.progress-text{color:var(--text-secondary);font-size:.95rem}.progress-bar-track{background:var(--bg-tertiary);border-radius:3px;width:100%;max-width:320px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary), #ec4899);border-radius:3px;width:0%;height:100%;transition:width .3s}.result{background:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.result-tabs{border-bottom:1px solid var(--border);display:flex}.tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex:1;padding:12px;font-size:.9rem;font-weight:500;transition:all .2s;position:relative}.tab:hover{color:var(--text);background:var(--bg-secondary)}.tab.active{color:var(--primary)}.tab.active:after{content:"";background:var(--primary);border-radius:1px;height:2px;position:absolute;bottom:0;left:20%;right:20%}.result-viewport{background:repeating-conic-gradient(var(--bg-tertiary) 0% 25%, var(--bg) 0% 50%) 0 0 / 20px 20px;justify-content:center;align-items:center;min-height:300px;display:flex;position:relative}.panel{width:100%;display:none}.panel.active{justify-content:center;align-items:center;display:flex}.panel img{object-fit:contain;max-width:100%;max-height:500px;display:block}.result-actions{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px;display:flex}.image-info{color:var(--text-secondary);margin-right:auto;font-size:.85rem}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text)}.btn-secondary:hover{background:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}footer{text-align:center;margin-top:32px;padding:16px 0}footer p{color:var(--text-secondary);opacity:.7;font-size:.85rem}@media (max-width:600px){#app{padding:24px 16px}header h1{font-size:1.75rem}.upload-zone{padding:32px 16px}.result-actions{flex-direction:column;align-items:stretch}.image-info{text-align:center;margin-right:0}.btn{justify-content:center}}.hidden{display:none!important}