body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#1a1a1a;color:#fff;height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.top-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#2a2a2a;border-bottom:1px solid #444;min-height:48px;z-index:100}.nav-left{display:flex;align-items:center}.nav-title{margin:0 24px 0 0;font-size:18px;font-weight:500;color:#fff}.nav-center{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.nav-right,.control-group{display:flex;align-items:center;gap:8px}.nav-btn{padding:6px 12px;background:#3a3a3a;color:#fff;border:1px solid #555;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease;white-space:nowrap}.nav-btn:hover{background:#4a4a4a;border-color:#666}.nav-btn.primary{background:#007acc;border-color:#007acc}.nav-btn.primary:hover{background:#005c99}.nav-btn.danger{background:#dc3545;border-color:#dc3545}.nav-btn.danger:hover{background:#c82333}.nav-btn.info{background:#17a2b8;border-color:#17a2b8;font-weight:700;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.nav-btn.info:hover{background:#138496}.upload-btn{display:inline-flex;align-items:center;gap:4px}#imageUpload{display:none}.nav-label{font-size:13px;color:#ccc;font-weight:500}.nav-select{padding:4px 8px;background:#3a3a3a;color:#fff;border:1px solid #555;border-radius:4px;font-size:13px;min-width:60px}.nav-select:focus{outline:none;border-color:#007acc}.nav-range{width:80px;height:4px;background:#555;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.nav-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#007acc;border-radius:50%;cursor:pointer}.nav-range::-moz-range-thumb{width:14px;height:14px;background:#007acc;border-radius:50%;cursor:pointer;border:none}.depth-value{font-size:13px;color:#ccc;min-width:12px;text-align:center}.nav-checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:#ccc;cursor:pointer}.nav-checkbox input[type=checkbox]{margin:0;transform:scale(1.1)}.nav-color{width:32px;height:24px;padding:0;border:1px solid #555;border-radius:4px;background:transparent;cursor:pointer}.nav-color:focus{outline:none;border-color:#007acc}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#2a2a2a;border-radius:12px;border:1px solid #444;min-width:400px;max-width:500px;box-shadow:0 20px 40px #0009}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid #444}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:#fff}.modal-close{background:none;border:none;color:#ccc;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.modal-close:hover{background:#3a3a3a;color:#fff}.modal-body{padding:20px 24px}.option-group{margin-bottom:20px}.option-group:last-child{margin-bottom:0}.option-label{display:block;font-size:14px;font-weight:500;color:#ccc;margin-bottom:8px}.option-label select{width:100%;padding:8px 12px;margin-top:6px;background:#3a3a3a;color:#fff;border:1px solid #555;border-radius:6px;font-size:14px}.option-label select:focus{outline:none;border-color:#007acc}.option-label input[type=range]{width:100%;margin:8px 0 4px;height:4px;background:#555;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.option-label input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#007acc;border-radius:50%;cursor:pointer}.option-label input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#007acc;border-radius:50%;cursor:pointer;border:none}.option-label span{font-size:13px;color:#999;float:right}.modal-footer{display:flex;gap:12px;padding:16px 24px 20px;border-top:1px solid #444;justify-content:flex-end}.modal-btn{padding:8px 16px;border:1px solid #555;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.modal-btn.secondary{background:#3a3a3a;color:#ccc}.modal-btn.secondary:hover{background:#4a4a4a;color:#fff}.modal-btn.primary{background:#007acc;color:#fff;border-color:#007acc}.modal-btn.primary:hover{background:#005c99}.debug-section{position:fixed;top:70px;right:20px;width:200px;padding:15px;background:#333;border-radius:8px;border:1px solid #555;z-index:50}.debug-section h3{margin:0 0 15px;font-size:14px;color:#ccc;text-transform:uppercase}#debugCanvas{width:100%;max-width:200px;height:auto;border:1px solid #555;border-radius:4px;background:#222;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.main-content{flex:1;display:flex;align-items:center;justify-content:center;background:#1a1a1a;position:relative}.image-display{display:flex;align-items:center;justify-content:center;min-height:60vh;width:100%;padding:20px}.image-display img{max-width:90vw;max-height:80vh;object-fit:contain;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;border-radius:8px;box-shadow:0 4px 20px #0000004d}.scene{perspective:8000px;perspective-origin:center center;display:flex;justify-content:center;align-items:center;min-height:60vh;margin-top:40px;transition:transform .5s ease}.scene *{transform-style:preserve-3d}.floor{transform:rotateX(65deg) rotate(45deg) translate(300px) translateY(600px);width:600px;height:600px;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr);gap:2px}.voxel-layer{position:absolute;width:100%;height:100%;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr)}.voxel{position:relative;width:40px;height:40px}.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d}.face{position:absolute;width:40px;height:40px;border:1px solid rgba(255,255,255,.2)}.face.top{background:#ff6b6b;transform:translateZ(20px)}.face.bottom{background:#333;transform:rotateX(0) translateZ(-20px)}.face.front{background:#e74c3c;transform:rotateX(90deg) translateZ(-20px)}.face.back{background:#c0392b;transform:rotateY(180deg) translateZ(20px)}.face.left{background:#e74c3c;transform:rotateY(-90deg) translateZ(20px)}.face.right{background:#c0392b;transform:rotateY(270deg) translateZ(-20px)}.info-tooltip{position:fixed;bottom:20px;right:20px;width:300px;z-index:1000}.tooltip-content{background:#2a2a2a;border-radius:8px;border:1px solid #444;box-shadow:0 10px 25px #0009}.tooltip-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;border-bottom:1px solid #444}.tooltip-header h3{margin:0;font-size:16px;font-weight:600;color:#fff}.tooltip-close{background:none;border:none;color:#ccc;font-size:20px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.tooltip-close:hover{background:#3a3a3a;color:#fff}.tooltip-body{padding:12px 16px;font-size:14px;line-height:1.4;color:#ccc}