:root{--primary-color:#4f46e5;--primary-hover:#4338ca;--bg-color:#f3f4f6;--card-bg:#fff;--text-main:#1f2937;--text-muted:#6b7280;--border-color:#e5e7eb;--success-color:#10b981;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--radius-md:.5rem;--radius-lg:1rem;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}@media (prefers-color-scheme:dark){:root{--bg-color:#111827;--card-bg:#1f2937;--text-main:#f9fafb;--text-muted:#9ca3af;--border-color:#374151}}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-main);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;transition:background-color .3s;display:flex}#app{box-sizing:border-box;width:100%;max-width:800px;padding:2rem}.app-header{text-align:center;margin-bottom:3rem;animation:.6s ease-out forwards slideDown}.app-header h1{background:linear-gradient(135deg, var(--primary-color), #8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.app-header p{color:var(--text-muted);margin:0;font-size:1.125rem}.card{background-color:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);padding:2.5rem;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.btn{border-radius:var(--radius-md);cursor:pointer;background-color:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm);border:none;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed}.status-badge{color:var(--text-muted);background-color:#6b72801a;border-radius:9999px;margin-bottom:1.5rem;padding:.35rem .75rem;font-size:.875rem;font-weight:500;transition:all .3s;display:inline-block}.status-badge.connected{color:var(--success-color);background-color:#10b9811a}.status-badge.error{color:#ef4444;background-color:#ef44441a}.qr-wrapper{border-radius:var(--radius-md);box-shadow:var(--shadow-md);background-color:#fff;margin:2rem 0;padding:1.5rem;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards popIn;display:inline-block}.file-input-wrapper{margin-bottom:1.5rem}.file-input-wrapper input[type=file]{width:100%;color:var(--text-main);background-color:var(--bg-color);border:1px dashed var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:.75rem;font-size:.875rem;transition:border-color .2s;display:block}.file-input-wrapper input[type=file]:hover{border-color:var(--primary-color)}.progress-container{background-color:var(--bg-color);border-radius:9999px;width:100%;height:.5rem;margin-top:1rem;overflow:hidden}.progress-bar{background-color:var(--primary-color);width:0%;height:100%;transition:width .2s ease-out}.progress-text{color:var(--text-muted);margin-top:.5rem;font-size:.875rem;display:block}.section-title{border-bottom:1px solid var(--border-color);margin:1.5rem 0 1rem;padding-bottom:.5rem;font-size:1.25rem;font-weight:600}.fade-in{animation:.8s ease-out forwards fadeIn}.slide-up{animation:.5s ease-out forwards slideUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}