.viewer-container{display:flex;height:100vh;width:100%;background-color:#0b1220;color:#fff;overflow:hidden}.viewer-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.viewer-header{background-color:#121a2b;border-bottom:1px solid #2a2f3d;display:flex;justify-content:space-between;padding:10px 20px;font-size:14px}.viewer-screen{position:relative;width:90%;height:90%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;margin:20px auto}.viewer-screen p{color:#888;text-align:center}.orientation{position:absolute;color:#888;font-size:12px}.orientation.top{top:5px;left:50%;transform:translate(-50%)}.orientation.left{left:5px;top:50%;transform:translateY(-50%)}.orientation.right{right:5px;top:50%;transform:translateY(-50%)}.viewer-sidebar{width:250px;background-color:#121a2b;border-left:1px solid #2a2f3d;display:flex;flex-direction:column;justify-content:space-between;padding:20px}.sidebar-title{font-size:18px;font-weight:700;margin-bottom:15px}.sidebar-section{margin-bottom:20px}.sidebar-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sidebar-btn{background-color:#1a2338;border:none;color:#ccc;border-radius:6px;padding:10px 5px;font-size:12px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:background-color .2s ease}.sidebar-btn:hover{background-color:#1f2d48;color:#fff}.sidebar-btn.active{background-color:#0b394a;color:#fff}.upload-box{border:1px solid #444;border-radius:6px;background-color:#1b253a;color:#ccc;padding:10px;font-size:12px;cursor:pointer}.empty-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}.empty-box{border:1px dashed #5a6b7d;border-radius:8px;padding:16px 24px;text-align:center;background-color:#0000004d}.empty-box h3{color:#b7cfe3;margin:0 0 6px;font-size:16px}.empty-box p{color:#8ea5b7;font-size:13px;margin:0}.viewer-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:100%;height:100%;background:transparent}.viewer-cell{position:relative;background-color:#000;border:1px solid #2a2f3d;display:flex;align-items:center;justify-content:center;overflow:hidden}.viewer-cell canvas.overlay{position:absolute;top:0;left:0;pointer-events:none}.view-label{position:absolute;top:6px;left:8px;background-color:#121a2bbf;color:#b7cfe3;font-size:12px;font-weight:500;padding:3px 8px;border-radius:4px;letter-spacing:.5px;pointer-events:none;z-index:6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{font-family: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;color-scheme:light}a{font-weight:500;color:#06c;text-decoration:none;transition:color .2s ease}a:hover{color:#004da0}html,body,#root{height:100%;width:100%;margin:0;padding:0}body{color:#0f172a;background-color:#fff;min-width:320px;min-height:100vh;display:flex;flex-direction:column}h1{font-size:2.5rem;line-height:1.1;margin:0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:all .25s ease}button:hover{background-color:#333}button:focus,button:focus-visible{outline:3px solid #0066cc}@media (max-width: 768px){h1{font-size:2rem}}.viewer-container{background-color:#0b1220!important;color:#fff!important}.viewer-sidebar,.viewer-header{background-color:#121a2b!important;color:#fff!important}.viewer-screen{background-color:#000!important}.viewer-button{background-color:#1a1a1a!important;color:#fff!important;border:none!important}