@view-transition{navigation: auto;}::view-transition-old(root){animation:fade-out .15s ease-out}::view-transition-new(root){animation:fade-in .15s ease-in}@keyframes fade-out{to{opacity:0}}@keyframes fade-in{0%{opacity:0}}html{background:#0f0f1a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#0f0f1a,#1a1a2e,#16213e);min-height:100vh;color:#e4e4e7;line-height:1.6}.container{max-width:700px;margin:0 auto;padding:40px 20px}header{text-align:center;margin-bottom:32px}h1{font-size:28px;font-weight:700;background:linear-gradient(135deg,#00d4ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}h1.hero{font-size:32px;margin-bottom:12px}.subtitle{color:#71717a;font-size:14px}.subtitle.hero{font-size:16px}.callsign{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;font-family:Consolas,Monaco,monospace;letter-spacing:1px;padding:6px 12px;background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);border-radius:6px;background-clip:padding-box;color:#00d4ff;z-index:100;cursor:pointer;transition:all .3s ease}.callsign:hover{background:#00d4ff33;border-color:#00d4ff99;box-shadow:0 0 20px #00d4ff66;transform:scale(1.05)}.callsign:hover svg{animation:broadcast 1s ease-in-out infinite}.callsign:active{transform:scale(.95)}@keyframes broadcast{0%,to{opacity:1}50%{opacity:.5}}.callsign svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.back-link{display:inline-flex;align-items:center;gap:6px;color:#71717a;text-decoration:none;font-size:13px;margin-bottom:24px;transition:color .15s ease}.back-link:hover{color:#00d4ff}.back-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card{background:#1e2438;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;margin-bottom:16px}.card.disabled{opacity:.5;pointer-events:none}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.step-number{width:28px;height:28px;background:linear-gradient(135deg,#00d4ff,#0ea5e9);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#0f0f1a}.card-title{font-size:15px;font-weight:600;color:#e4e4e7}.card-title-group{display:flex;flex-direction:column;gap:2px}.status-subtitle{font-size:12px;color:#71717a}.status-subtitle.connected{color:#4ade80}.status-subtitle.disconnected{color:#71717a}button{font-family:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:10px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn-primary{background:linear-gradient(135deg,#00d4ff,#0ea5e9);color:#0f0f1a;box-shadow:0 4px 15px #00d4ff4d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #00d4ff66}.btn-secondary{background:#ffffff1a;color:#a1a1aa;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover:not(:disabled){background:#ffffff26;color:#e4e4e7}.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#052e16;box-shadow:0 4px 15px #22c55e4d}.btn-success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #22c55e66}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover:not(:disabled){background:#ef444440;color:#fca5a5}.btn-disconnect{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-disconnect:hover:not(:disabled){background:#ef444440;color:#fca5a5}.button-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.button-group button{flex:1}.status-badge{margin-left:auto;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}.status-badge:before{content:"";width:8px;height:8px;border-radius:50%}.status-badge.disconnected{background:#ef444426;color:#f87171}.status-badge.disconnected:before{background:#ef4444}.status-badge.connected{background:#22c55e26;color:#4ade80}.status-badge.connected:before{background:#22c55e;animation:pulse 2s infinite}.badge-experimental{display:inline-block;background:#f59e0b26;color:#fbbf24;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-left:8px;vertical-align:middle}.warning-box{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:14px 16px;font-size:13px;color:#d4d4d8;margin-bottom:16px;line-height:1.5}.warning-box strong{color:#fbbf24}.help-box{background:#00d4ff1a;border:1px solid rgba(0,212,255,.2);border-radius:8px;padding:12px 16px;font-size:13px;color:#a1a1aa;margin-bottom:16px}.help-box strong{color:#00d4ff}.file-input-wrapper{position:relative}.file-input{display:none}.drop-zone-wrapper{border:2px dashed rgba(255,255,255,.2);border-radius:12px;transition:all .2s ease}.drop-zone-wrapper:hover{border-color:#00d4ff80}.drop-zone-wrapper.has-file{border-color:#22c55e80;border-style:solid}.file-drop-zone{display:block;border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:background .2s ease;background:#00000040}.file-drop-zone:hover{background:#00d4ff1a}.drop-zone-wrapper.has-file .file-drop-zone{background:#22c55e1a}.file-icon{margin-bottom:8px}.file-icon svg{width:40px;height:40px;fill:#f59e0b}.file-text{color:#71717a;font-size:14px}.file-name{color:#4ade80;font-weight:600;font-size:14px}.file-size{color:#71717a;font-size:12px;margin-top:4px}.file-error{color:#f87171;font-size:13px;margin-top:8px}.notice{text-align:center;font-size:12px;color:#52525b;margin-top:16px}