*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:linear-gradient(135deg,#0f172a,#312e81,#000);color:#fff;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:24px}.header{text-align:center;margin-bottom:48px}.title{font-size:3rem;font-weight:700;margin-bottom:16px;background:linear-gradient(to right,#fff,#dbeafe,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#cbd5e1;font-size:1.125rem;max-width:600px;margin:0 auto;line-height:1.6}.grid{display:grid;gap:32px}@media (min-width: 1024px){.grid{grid-template-columns:1fr 1fr}}.card{background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:24px;box-shadow:0 20px 25px -5px #0000001a}.card-title{font-size:1.25rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%}.dot-blue{background-color:#60a5fa}.dot-green{background-color:#34d399}.upload-area{border:2px dashed rgba(255,255,255,.3);border-radius:12px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s ease;margin-bottom:24px}.upload-area:hover{border-color:#fff9;background:#ffffff0d}.upload-area.drag-active{border-color:#60a5fa;background:#60a5fa1a}.upload-icon{width:64px;height:64px;margin:0 auto 16px;color:#94a3b8}.upload-text{color:#cbd5e1;font-size:1.125rem;font-weight:500;margin-bottom:8px}.upload-subtext{color:#94a3b8;font-size:.875rem}.image-preview{border-radius:12px;overflow:hidden;background:#1e293b80;margin-bottom:16px}.image-preview img{width:100%;height:auto;max-height:384px;-o-object-fit:contain;object-fit:contain}.file-info{font-size:.875rem;color:#94a3b8;margin-bottom:24px}.button-group{display:flex;flex-wrap:wrap;gap:12px}.btn{padding:8px 16px;border-radius:12px;border:none;font-weight:500;cursor:pointer;transition:all .2s ease;font-size:.875rem;display:inline-flex;align-items:center;gap:8px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4f46e5;color:#fff}.btn-primary:hover:not(:disabled){background:#4338ca}.btn-secondary{background:#334155;color:#fff}.btn-secondary:hover:not(:disabled){background:#475569}.btn-success{background:#059669;color:#fff;flex:1}.btn-success:hover:not(:disabled){background:#047857}.btn-download{background:#0d9488;color:#fff;width:100%}.btn-download:hover{background:#0f766e}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{margin-top:16px;padding:12px;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:8px;color:#fca5a5;font-size:.875rem}.result-placeholder{height:256px;display:flex;align-items:center;justify-content:center;color:#94a3b8;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#1e293b33;text-align:center;margin-bottom:16px}.loading-container{display:flex;flex-direction:column;align-items:center;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid #475569;border-top:4px solid #34d399;border-radius:50%;animation:spin 1s linear infinite}.footer{text-align:center;color:#94a3b8;margin-top:48px;padding:24px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.875rem}.hidden{display:none}@media (max-width: 640px){.title{font-size:2rem}.card{padding:16px}.upload-area{padding:32px 16px}.btn-success{flex:none;width:100%}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#64748b}
