:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;height:100%;overflow:hidden}#root{height:100%}*{box-sizing:border-box;margin:0;padding:0}.app{display:flex;flex-direction:column;height:100vh;background:#1a1a2e;color:#eee}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#16213e;border-bottom:1px solid #0f3460}.app-header h1{font-size:1.5rem;font-weight:600;color:#fff}.reset-button{padding:.5rem 1rem;background:#0f3460;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;transition:background .2s}.reset-button:hover{background:#1a4a7a}.app-main{flex:1;display:flex;overflow:hidden;position:relative}.upload-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.progress-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;max-width:800px;margin:0 auto}.progress-stages{display:flex;justify-content:space-between;width:100%;position:relative}.progress-stages:before{content:"";position:absolute;top:8px;left:20px;right:20px;height:2px;background:#0f3460;z-index:0}.stage{display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:1}.stage-dot{width:18px;height:18px;border-radius:50%;background:#0f3460;border:2px solid #0f3460;transition:all .3s ease}.stage.done .stage-dot{background:#4ade80;border-color:#4ade80}.stage.active .stage-dot{background:#4a9fff;border-color:#4a9fff;box-shadow:0 0 10px #4a9fff80;animation:pulse 1.5s ease-in-out infinite}.stage.pending .stage-dot{background:#1a1a2e;border-color:#0f3460}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.stage-label{font-size:.65rem;color:#666;text-align:center;max-width:70px;transition:color .3s ease}.stage.done .stage-label{color:#4ade80}.stage.active .stage-label{color:#4a9fff;font-weight:600}.progress-bar-container{width:100%;height:8px;background:#0f3460;border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4a9fff,#4ade80);border-radius:4px;transition:width .3s ease}.progress-message{color:#aaa;font-size:.9rem;text-align:center}.progress-reconnecting{color:#f59e0b;font-size:.8rem;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.viewer-layout{flex:1;display:flex;overflow:hidden}.sidebar{width:280px;background:#16213e;border-right:1px solid #0f3460;display:flex;flex-direction:column;overflow:hidden}.sidebar-right{border-right:none;border-left:1px solid #0f3460}.sidebar h2{padding:1rem;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888;border-bottom:1px solid #0f3460}.viewer-container{flex:1;position:relative;background:#0d1117}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2ee6;z-index:100}.loading-spinner{width:48px;height:48px;border:3px solid #0f3460;border-top-color:#4a9fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{margin-top:1rem;color:#888}.error-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem}.error-container p{color:#ff6b6b;text-align:center;max-width:400px}