:root{--primary: #3b82f6;--primary-hover: #2563eb;--bg: #0f172a;--card-bg: rgba(30, 41, 59, .7);--text: #f8fafc;--text-dim: #94a3b8;--border: rgba(51, 65, 85, .5);--success: #22c55e;--error: #ef4444;--gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}#app{max-width:900px;margin:0 auto;padding:2rem;width:100%}header{margin-bottom:2rem}.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1rem;border:1px solid var(--border)}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem}h1{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}.device-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-dim)}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-dim)}.status-dot.connected{background-color:var(--success);box-shadow:0 0 8px var(--success)}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:var(--card-bg);padding:.25rem;border-radius:.75rem;width:fit-content}.tab-btn{padding:.5rem 1.5rem;border-radius:.5rem;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-weight:500;transition:all .2s}.tab-btn.active{background:#ffffff1a;color:var(--text)}.tab-content{display:none}.tab-content.active{display:block;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1rem;border:1px solid var(--border);padding:1.5rem;margin-bottom:1.5rem}.card h2{font-size:1.125rem;margin-bottom:1.25rem;color:var(--text)}.hidden{display:none!important}.form-group{margin-bottom:1.5rem}label{display:block;font-size:.875rem;color:var(--text-dim);margin-bottom:.5rem}select,input[type=text],input[type=file]{width:100%;background:#0f172a80;border:1px solid var(--border);border-radius:.5rem;padding:.75rem;color:var(--text);font-family:inherit}select:focus,input:focus{outline:none;border-color:var(--primary)}.btn-primary,.btn-flash,.btn-secondary{padding:.75rem 1.25rem;border-radius:.5rem;border:none;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-flash{width:100%;background:var(--gradient);color:#fff;margin-top:1rem;font-size:1rem}.btn-flash:disabled{opacity:.5;cursor:not-allowed;background:#334155}.btn-secondary{background:#ffffff0d;color:var(--text);border:1px solid var(--border)}.firmware-select-row{display:flex;gap:.5rem;align-items:center}.firmware-select-row select{flex:1}.btn-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:.5rem;border:1px solid var(--border);background:#ffffff0d;color:var(--text-dim);cursor:pointer;transition:all .2s;flex-shrink:0}.btn-icon:hover{background:#ffffff1a;color:var(--text);border-color:var(--primary)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-icon.loading svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.flashing-steps{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}.step{display:flex;align-items:center;gap:1rem;color:var(--text-dim)}.step.active{color:var(--text)}.step-num{width:24px;height:24px;border-radius:50%;background:#ffffff0d;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:1px solid var(--border)}.step.completed .step-num{background:var(--success);border-color:var(--success);color:#fff}.progress-container{margin:1.5rem 0}.progress-bar{height:8px;background:#ffffff0d;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-bar-fill{height:100%;background:var(--primary);width:0%;transition:width .3s ease}#progressText{font-size:.75rem;color:var(--text-dim);float:right}.console-output{height:300px;background:#020617;border-radius:.5rem;padding:1rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8125rem;overflow-y:auto;white-space:pre-wrap;margin-bottom:1rem;border:1px solid var(--border)}.console-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.console-input-group{display:flex;gap:.5rem}.console-input-group input{flex:1}footer{margin-top:auto;padding:2rem 0;text-align:center;font-size:.75rem;color:var(--text-dim)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.info-item label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.info-item span{font-family:JetBrains Mono,monospace;font-weight:600;color:var(--primary)}