model-viewer{--hotspot-opacity: 1;--min-hotspot-opacity: 0}.hotspot,.dimension-point,.dimension-line-segment,.dimension-label,.dimension-group{transition:opacity .3s,visibility .3s}model-viewer::part(hotspot){display:block;transform-origin:center;border-radius:50%}[data-visible=false],[data-visible=false] *{opacity:0!important;pointer-events:none!important;visibility:hidden!important}[data-visible=true],[data-visible=true] *{opacity:1;pointer-events:all;visibility:visible}.dimension-group{--group-opacity: 1}.dimension-group[data-visible=false]{--group-opacity: 0}.dimension-group>*{opacity:var(--group-opacity, 1);visibility:var(--group-visibility, visible);transition:opacity .3s,visibility .3s}model-viewer{--min-hotspot-opacity: 0}.dimension-point{width:8px;height:8px;border-radius:50%;background-color:var(--dimension-point-color);border:none;transform:translate3d(-30%,-70%,0);z-index:10;cursor:default}.dimension-point.dimension-width,.dimension-point.dimension-height,.dimension-point.dimension-depth{background-color:var(--dimension-point-color)}.dimension-line-segment{width:8px;height:8px;border-radius:50%;background-color:var(--dimension-line-color);transform:translate3d(-50%,-50%,0);z-index:5}.dimension-line-segment.dimension-width,.dimension-line-segment.dimension-height,.dimension-line-segment.dimension-depth{background-color:var(--dimension-line-color)}.dimension-label{z-index:15;cursor:pointer;font-family:Arial,sans-serif;font-size:12px;box-shadow:0 1px 4px #00000026;background-color:var(--dimension-label-bg);color:var(--dimension-label-color);padding:4px 8px;border-radius:4px}:root{--primary-color: #e51f5c;--secondary-color: #787878;--background-color: #0c0c0c;--text-color: #ffffff;--border-color: #333333;--sidebar-width: 320px;--sidebar-background: #0c1c25;--blue-accent: #63c4dc;--card-background: rgba(20, 20, 20, .85);--input-background: #1a1a1a;--model-background: #ffffff;--primary-color-rgb: 229, 31, 92;--hotspot-color: #e51f5c;--hotspot-border-color: #ffffff;--hotspot-dot-color: #ffffff;--hotspot-size: 24px;--hotspot-active-color: #1f79ff;--hotspot-active-border-color: #ffffff;--hotspot-active-border-color-rgb: 255, 255, 255;--tooltip-background-color: rgba(0, 0, 0, .8);--tooltip-text-color: #ffffff;--tooltip-border-color: transparent;--dimension-point-color: #1f79ff;--dimension-line-color: rgba(31, 121, 255, .6);--dimension-label-bg: #ffffff;--dimension-label-color: #333333}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.5}button{cursor:pointer;font-family:inherit}.app-container{display:flex;height:100vh;overflow:hidden}.model-container{flex-grow:1;height:100%;position:relative;overflow:hidden}.sidebar-container{display:flex;flex-direction:column;height:100%;background-color:var(--sidebar-background);border-left:1px solid rgba(255,255,255,.1);overflow:hidden}.sidebar{padding:20px;flex-shrink:0}.sidebar h2,.sidebar h3{color:#fff}.sidebar label,.sidebar p{color:#e2e8f0}.logo-container{margin-bottom:1.5rem;text-align:center}.logo{height:30px;width:auto}.hotspot{display:block;width:var(--hotspot-size);height:var(--hotspot-size);border-radius:50%;background-color:var(--hotspot-color);border:2px solid var(--hotspot-border-color);box-shadow:0 2px 8px #0000004d;cursor:pointer;transition:all .3s ease;position:relative;animation:pulse 2s infinite;transform-origin:center}@keyframes pulse{0%{box-shadow:0 0 #535353b3;transform:scale(1)}70%{box-shadow:0 0 0 10px #e51f5c00;transform:scale(1)}to{box-shadow:0 0 #e51f5c00;transform:scale(1)}}.hotspot:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:var(--hotspot-dot-color);border-radius:50%;transition:all .2s ease;z-index:5}model-viewer .hotspot:before{background-color:var(--hotspot-dot-color)!important}.hotspot:before{content:none}.hotspot-connector{position:absolute;top:50%;left:50%;width:2px;height:30px;background-color:#fff;transform-origin:top;transform:translate(-50%) rotate(45deg);opacity:0;transition:opacity .3s}.hotspot:hover .hotspot-connector{opacity:1}.hotspot:hover:before{opacity:0;visibility:hidden}.hotspot.active{background-color:var(--hotspot-active-color)!important;border-color:var(--hotspot-active-border-color)!important;animation:activePulse 2s infinite;transform:scale(1);z-index:10}@keyframes activePulse{0%{box-shadow:0 0 0 0 rgba(var(--hotspot-active-border-color-rgb),.7);transform:scale(1.1)}70%{box-shadow:0 0 0 10px rgba(var(--hotspot-active-border-color-rgb),0);transform:scale(1.1)}to{box-shadow:0 0 0 0 rgba(var(--hotspot-active-border-color-rgb),0);transform:scale(1.1)}}.form-group{margin-bottom:1rem}label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-color)}input,textarea{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-family:inherit;background-color:var(--input-background);color:var(--text-color)}textarea{min-height:100px;resize:vertical}.btn{display:inline-block;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-weight:500;transition:background-color .2s ease}.btn:hover{background-color:#c71a4e}.btn-secondary{background-color:var(--secondary-color)}.btn-secondary:hover{background-color:var(--primary-color)}.btn-outline{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}.sidebar .btn-outline{border-color:#fff;color:#fff}.btn-outline:hover{background-color:var(--primary-color);color:#fff}.hotspot-list{margin-top:1rem}.hotspot-item{padding:.75rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;margin-bottom:.75rem;cursor:pointer;background-color:#ffffff0d;display:flex;align-items:center;gap:12px;transition:all .2s ease}.hotspot-item.active{border-color:var(--primary-color);background-color:#e51f5c26;box-shadow:0 4px 12px #e51f5c33}.hotspot-item-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background-color:var(--primary-color);color:#fff;border-radius:50%;font-weight:700;font-size:14px;flex-shrink:0}.hotspot-item-content{flex:1}.hotspot-item-title{font-weight:500;margin-bottom:4px}.hotspot-item-position{font-size:.8rem;color:#ffffffb3}.file-upload-page{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:var(--background-color);position:relative;overflow:hidden}.file-drop{border:2px dashed var(--blue-accent);border-radius:6px;padding:2rem;text-align:center;margin-bottom:1rem;cursor:pointer;transition:all .2s ease;background-color:#1e1e1e80}.file-drop:hover{background-color:#63c4dc1a}.file-drop.active{border-color:var(--primary-color);background-color:#e51f5c1a}.export-section{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)}.code-block{background-color:#0000004d;color:#f8fafc;padding:1rem;border-radius:4px;font-family:monospace;overflow-x:auto;margin-top:.5rem}.copy-btn{margin-top:.5rem;font-size:.875rem}.instructions{margin-bottom:1rem;padding:.75rem;background-color:#1e1e1eb3;border-radius:4px;font-size:.875rem;color:#ffffffe6}.error-message{color:#ff6b6b;margin-top:.25rem;font-size:.875rem}.model-viewer-container{width:100%;height:100%;background-color:var(--model-background);position:relative}model-viewer:hover .hotspot-annotation{opacity:1}.hotspot-label{display:flex;flex-direction:column;gap:5px}.hotspot-label h3{margin:0;font-size:16px;color:#fff}.hotspot-label p{margin:0;font-size:14px;color:#fffc}.adding-hotspot-indicator{position:absolute;top:20px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;z-index:100;pointer-events:none;animation:fadeInOut 2s infinite}@keyframes fadeInOut{0%,to{opacity:.7}50%{opacity:1}}model-viewer::part(default-progress-bar){display:none}model-viewer::part(default-progress-mask){display:none}.hotspot:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:#fff;border-radius:50%}.hotspot:hover:after{opacity:1}model-viewer>.hotspot{transform:translate3d(-50%,-50%,0);transform-style:preserve-3d}model-viewer::part(hotspot){display:block;width:var(--hotspot-size);height:var(--hotspot-size);border-radius:50%;background-color:var(--hotspot-color);border:2px solid var(--hotspot-border-color);box-shadow:0 2px 4px #0003;cursor:pointer;transition:transform .2s ease,background-color .3s ease,border-color .3s ease;position:relative;animation:pulse 2s infinite;transform:translate(-50%,-50%)}model-viewer::part(hotspot) [data-selected=true]{background-color:var(--hotspot-active-color)!important;border-color:var(--hotspot-active-border-color)!important;animation:activePulse 2s infinite;z-index:10}model-viewer::part(hotspot):hover{transform:translate(-50%,-50%) scale(1.2)}model-viewer::part(hotspot):focus{outline:none}model-viewer::part(hotspot-dot){display:block!important;width:10px!important;height:10px!important;border-radius:50%!important;background-color:var(--hotspot-dot-color)!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate3d(-50%,-50%,0)!important;z-index:10!important;opacity:1!important;visibility:visible!important}.hotspot-annotation{background-color:#000c;border-radius:4px;box-shadow:0 2px 10px #00000080;color:#fff;display:none;font-family:sans-serif;font-size:14px;max-width:250px;overflow-wrap:break-word;padding:10px;position:absolute;width:max-content;z-index:999;transition:opacity .3s;transform:translate3d(-50%,-100%,0);margin-top:-10px;pointer-events:none}.hotspot:hover+.hotspot-annotation{display:block;opacity:1}.hotspot-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;z-index:2;pointer-events:none}.hotspot-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--tooltip-background-color);color:var(--tooltip-text-color);padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;margin-bottom:8px;z-index:10;min-width:150px;text-align:left;border:1px solid var(--tooltip-border-color);box-shadow:0 2px 10px #0000004d}.hotspot-title{font-weight:700;margin-bottom:4px;color:var(--tooltip-text-color)}.hotspot-description{font-size:11px;white-space:normal;max-width:200px;color:var(--tooltip-text-color)}.hotspot:hover .hotspot-tooltip{opacity:1;visibility:visible}.hotspot-number{display:none}.hotspot.active .hotspot-tooltip{opacity:1;visibility:visible}.active-hotspot-info{position:absolute;bottom:20px;left:20px;background-color:#000c;color:#fff;padding:15px 20px;border-radius:8px;max-width:300px;z-index:100;box-shadow:0 4px 12px #0000004d;border-left:4px solid var(--primary-color);animation:fadeIn .3s ease-in-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.active-hotspot-title{font-size:18px;font-weight:600;margin-bottom:8px;color:#fff}.active-hotspot-description{font-size:14px;line-height:1.5;color:#ffffffe6}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dimension-point{width:8px;height:8px;border-radius:50%;background-color:var(--dimension-point-color);border:none;transform:translate3d(-30%,-70%,0);z-index:10;pointer-events:none}.dimension-line-segment{width:6px;height:6px;border-radius:50%;background-color:var(--dimension-line-color);transform:translate3d(-50%,-50%,0);z-index:5;pointer-events:none}.dimension-line-segment.active{background-color:var(--primary-color);opacity:1}.dimension-line-container{position:absolute;width:100px;height:1px;background-color:#000;transform-origin:center;pointer-events:none;background:repeating-linear-gradient(to right,#000,#000 5px,transparent 5px,transparent 10px)}.dimension-line-container.active{background-color:#000;height:1px}.dimension-line-container:before,.dimension-line-container:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background-color:#000;top:50%;transform:translateY(-50%)}.dimension-line-container:before{left:0}.dimension-line-container:after{right:0}.dimension-line{stroke-width:2px;stroke:var(--secondary-color);stroke-dasharray:4;pointer-events:none}.dimension-line.active{stroke-width:3px;stroke-dasharray:none}.dimension-line.dimension-width,.dimension-line.dimension-height,.dimension-line.dimension-depth{stroke:var(--dimension-line-color)}.dimension-width,.dimension-height,.dimension-depth{background-color:var(--dimension-point-color)}.dimension-label{background-color:var(--dimension-label-bg);color:var(--dimension-label-color);padding:4px 8px;border-radius:4px;font-weight:700;font-size:14px;box-shadow:0 2px 4px #00000026;transform:translate3d(-50%,-50%,0);z-index:15;pointer-events:none}.dimension-label.active{color:var(--primary-color);transform:translate(-50%,-50%) scale(1.1)}.dimension-label.dimension-width,.dimension-label.dimension-height,.dimension-label.dimension-depth{background-color:var(--dimension-label-bg);color:var(--dimension-label-color)}.adding-dimension-indicator{position:absolute;top:20px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:10px 15px;border-radius:4px;z-index:10}.dimension-controls-panel{padding:20px;height:100%;overflow-y:auto}.dimensions-header{margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2)}.dimensions-header h3{margin:0;font-size:16px;font-weight:500;color:#fff}.dimensions-list{display:flex;flex-direction:column;gap:12px}.dimension-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;background-color:#ffffff0d}.dimension-item:hover{background-color:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.dimension-item.selected{border-color:var(--primary-color);background-color:#e51f5c26;box-shadow:0 4px 12px #e51f5c33}.dimension-info{display:flex;align-items:center;gap:8px}.dimension-type{display:inline-block;padding:4px 8px;border-radius:4px;font-size:14px;color:#fff}.dimension-type.dimension-width{background-color:var(--primary-color)}.dimension-type.dimension-height{background-color:#4caf50}.dimension-type.dimension-depth{background-color:#2196f3}.dimension-type.dimension-custom{background-color:#9c27b0}.dimension-value-controls{display:flex;align-items:center;gap:8px}.dimension-value-controls input{width:70px;padding:6px;border:1px solid var(--border-color);border-radius:4px;text-align:right;background-color:var(--input-background);color:#fff}.dimension-value-controls select{padding:6px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--input-background);color:#fff}.dimensions-info{padding:10px;background-color:#0000004d;border-radius:4px;font-size:14px;color:#ffffffe6}.no-dimensions{padding:16px;text-align:center;color:#ffffffe6;font-style:italic;background-color:#0000004d;border-radius:4px}.btn-sm{padding:4px 8px;font-size:14px}.btn-danger{background-color:var(--primary-color);color:#fff;border:none}.btn-danger:hover{background-color:#c71a4e}.toolbar{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem;background-color:var(--card-background);padding:.5rem;border-radius:4px;box-shadow:0 2px 10px #0000004d;z-index:10}.sidebar-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:0;background-color:var(--sidebar-background)}.tab-button{flex:1;padding:12px 20px;background:none;border:none;color:#ffffffb3;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}.tab-button:hover{color:#fff;background-color:#ffffff1a}.tab-button.active{color:#fff;background-color:#ffffff0d}.tab-button.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--primary-color)}.tab-content{flex:1;overflow-y:auto;background-color:var(--sidebar-background)}.hotspot-controls-panel,.dimension-controls-panel{padding:20px;height:100%;overflow-y:auto}.dimensions-header,.hotspots-header{margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2)}.dimensions-header h3,.hotspots-header h3{margin:0;font-size:16px;font-weight:500;color:#fff}.hotspots-list{display:flex;flex-direction:column;gap:12px}.hotspot-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;transition:all .2s ease}.hotspot-item:hover{background-color:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.hotspot-item.selected{border-color:var(--primary-color);background-color:#e51f5c26;box-shadow:0 4px 12px #e51f5c33}.hotspot-info{flex:1;display:flex;flex-direction:column;gap:8px;margin-right:12px}.hotspot-info input,.hotspot-info textarea{width:100%;padding:8px;background-color:#0003;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:14px}.hotspot-info input{font-weight:500}.hotspot-info textarea{height:60px;resize:vertical;min-height:60px;font-size:13px}.hotspot-info input:focus,.hotspot-info textarea:focus{outline:none;border-color:var(--blue-accent);background-color:#0000004d}.no-hotspots{padding:16px;text-align:center;color:#ffffffb3;background-color:#0003;border-radius:6px;font-size:14px}.no-hotspots p:first-child{margin-top:0}.no-hotspots p:last-child{margin-bottom:0;opacity:.7}.btn-danger.btn-sm{padding:6px;font-size:16px;line-height:1;background-color:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#ffffffb3;cursor:pointer;transition:all .2s ease}.tab-button.active:after{background-color:var(--primary-color)}.hotspot-item.selected,.dimension-item.selected{border-color:var(--primary-color);background-color:#e51f5c26;box-shadow:0 4px 12px #e51f5c33}.toolbar .btn{background-color:var(--card-background);color:var(--text-color);border:none}.toolbar .btn:hover,.toolbar .btn.active{background-color:var(--primary-color)}.hotspot-info input:focus,.hotspot-info textarea:focus{border-color:var(--blue-accent);background-color:#0000004d}.copy-btn{background-color:var(--card-background);color:var(--text-color);border:1px solid var(--border-color)}.copy-btn:hover{background-color:var(--primary-color);border-color:var(--primary-color)}.btn-danger.btn-sm:hover{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.style-config-panel{padding:20px;height:100%;overflow-y:auto;color:#fff}.style-config-panel h3{margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2);font-size:18px;font-weight:500}.style-section{margin-bottom:24px;padding:16px;background-color:#0003;border-radius:4px}.style-section h4{margin:0 0 12px;font-size:16px;font-weight:500;color:#ffffffe6}.style-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.style-control{margin-bottom:12px}.style-control label{display:block;margin-bottom:4px;font-size:14px;color:#fffc}.style-control input[type=text],.style-control input[type=number]{width:100%;padding:8px 10px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background-color:#0003;color:#fff;font-size:14px}.style-control input[type=number]{width:80px}.color-picker{display:flex;align-items:center;gap:8px}.color-picker input[type=color]{width:36px;height:36px;border:none;border-radius:4px;cursor:pointer}.color-picker input[type=text]{flex:1}.style-section pre{margin:12px 0;padding:12px;background-color:#0000004d;border-radius:4px;font-family:monospace;font-size:13px;white-space:pre-wrap;color:#ffffffe6;overflow-x:auto}.style-section button{margin-top:8px;padding:8px 12px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease}.style-section button:hover{background-color:#c71a4e}model-viewer::part(hotspot):before{background-color:var(--hotspot-dot-color)!important}model-viewer::part(hotspot):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:var(--hotspot-dot-color)!important;border-radius:50%;opacity:1!important;visibility:visible!important}model-viewer .hotspot{background-color:var(--hotspot-color)!important;border-color:var(--hotspot-border-color)!important}model-viewer .hotspot.active,model-viewer::part(hotspot) [data-selected=true]{background-color:var(--hotspot-active-color)!important;border-color:var(--hotspot-active-border-color)!important;animation:activePulse 2s infinite;z-index:10}model-viewer .hotspot.active:after,model-viewer::part(hotspot) [data-selected=true]:before,model-viewer::part(hotspot) [data-selected=true]:after{background-color:var(--hotspot-dot-color)!important}.hotspot-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:var(--hotspot-dot-color);border-radius:50%;z-index:10;pointer-events:none}