*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #f8f9fa;--text-color: #212529;--border-color: #dee2e6;--hover-color: #e9ecef;--active-color: #0d6efd;--panel-bg: rgba(255, 255, 255, .95)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-color);color:var(--text-color);height:100vh;width:100vw}.no-scroll{overflow:hidden}#viewer{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);z-index:1}.drop-zone{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:#f8f9fafa;z-index:10;transition:opacity .3s ease}.drop-zone.hidden{opacity:0;pointer-events:none}.drop-zone.drag-over{background:#0d6efd1a;border:3px dashed var(--active-color)}.drop-content{text-align:center;color:var(--text-color);cursor:pointer;padding:2rem}.drop-content svg{color:var(--active-color);margin-bottom:1rem}.drop-content h2{font-size:1.5rem;margin-bottom:.5rem;font-weight:500}.drop-content p{color:#6c757d;font-size:.9rem}#toolbar{position:fixed;top:0;left:0;right:0;height:50px;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;z-index:100}.toolbar-left{display:flex;align-items:center;gap:.5rem}.toolbar-left h1{font-size:1rem;font-weight:600;padding:.4rem .8rem;background:#fff;border:1px solid var(--border-color);border-radius:6px}#file-name{color:#6c757d;font-size:.85rem;padding:.4rem .8rem;background:#fff;border:1px solid var(--border-color);border-radius:6px}#file-name.hidden{display:none}.toolbar-right{display:flex;gap:.5rem}.toolbar-btn{background:#fff;border:1px solid var(--border-color);border-radius:6px;padding:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.toolbar-btn:hover{background:var(--hover-color);transform:translateY(-1px)}.toolbar-btn.active{background:var(--active-color);color:#fff;border-color:var(--active-color)}.toolbar-btn.active svg{stroke:#fff}.view-toggle{display:flex;background:#fff;border:1px solid var(--border-color);border-radius:6px;overflow:hidden}.view-toggle-btn{background:transparent;border:none;padding:.6rem .8rem;cursor:pointer;font-size:.75rem;font-weight:500;color:var(--text-color);transition:all .2s ease;min-width:32px}.view-toggle-btn:hover{background:var(--hover-color)}.view-toggle-btn.active{background:var(--active-color);color:#fff}.view-toggle-btn:first-child{border-right:1px solid var(--border-color)}.view-toggle-btn:first-child.active{border-right-color:var(--active-color)}.panel{position:fixed;top:70px;right:20px;width:280px;max-height:calc(100vh - 100px);background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:8px;z-index:50;transition:opacity .2s ease,transform .2s ease;overflow:hidden;display:flex;flex-direction:column}.panel.hidden{opacity:0;transform:translate(20px);pointer-events:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.panel-header h3{font-size:1rem;font-weight:600}.close-btn{background:none;border:none;font-size:1.5rem;color:#6c757d;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s ease}.close-btn:hover{background:var(--hover-color)}.panel-content{padding:1rem;overflow-y:auto}.panel-controls{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.layers-list{max-height:400px;overflow-y:auto}.layer-item{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .2s ease}.layer-item:hover{background:var(--hover-color)}.layer-checkbox{width:16px;height:16px;cursor:pointer}.layer-color{width:20px;height:20px;border-radius:3px;border:1px solid var(--border-color)}.layer-name{flex:1;font-size:.9rem}.placeholder{padding:2rem 1rem;text-align:center;color:#6c757d;font-size:.9rem}.measure-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.measure-btn{padding:.6rem 1rem;background:#fff;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.measure-btn:hover{background:var(--hover-color)}.measure-btn.active{background:var(--active-color);color:#fff;border-color:var(--active-color)}.unit-toggle{display:flex;gap:.5rem}.unit-toggle label{flex:1;display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#fff;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:.85rem}.unit-toggle input[type=radio]{cursor:pointer}.measure-result{background:var(--hover-color);padding:1rem;border-radius:6px;margin-bottom:1rem;min-height:60px}.measure-result p{font-size:.9rem;color:#6c757d}.measure-result .value{font-size:1.2rem;font-weight:600;color:var(--text-color);margin-top:.5rem}.export-btn{width:100%;padding:.8rem;margin-bottom:.5rem;background:#fff;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.export-btn:hover{background:var(--hover-color);transform:translateY(-1px)}.small-btn{padding:.5rem 1rem;background:#fff;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s ease}.small-btn:hover{background:var(--hover-color)}.loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:200;background:var(--panel-bg);padding:2rem 3rem;border-radius:8px;border:1px solid var(--border-color)}.loading.hidden{display:none}.spinner{border:3px solid var(--border-color);border-top:3px solid var(--active-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading p{color:#6c757d;font-size:.9rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#adb5bd}#view-cube{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;overflow:hidden;transition:opacity .2s ease,transform .1s ease;box-shadow:0 4px 6px #0000001a}#view-cube:hover{background:#ffffff26;transform:scale(1.02)}#view-cube canvas{display:block;border-radius:12px}.help-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.help-overlay.hidden{opacity:0;pointer-events:none}.help-content{background:#fff;border-radius:12px;max-width:700px;max-height:80vh;width:90%;overflow:hidden;display:flex;flex-direction:column}.help-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-color)}.help-header h2{font-size:1.5rem;font-weight:600;margin:0}.help-close-btn{background:none;border:none;font-size:2rem;color:#6c757d;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s ease}.help-close-btn:hover{background:var(--hover-color)}.help-body{padding:1.5rem;overflow-y:auto}.help-section{margin-bottom:2rem}.help-section:last-child{margin-bottom:0}.help-section h3{font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--text-color)}.shortcut-item{display:flex;align-items:center;gap:1rem;padding:.75rem;margin-bottom:.5rem;background:var(--hover-color);border-radius:6px}.shortcut-item kbd{background:#fff;border:1px solid var(--border-color);border-radius:4px;padding:.3rem .6rem;font-family:monospace;font-size:.85rem;min-width:60px;text-align:center;box-shadow:0 1px 2px #0000001a}.shortcut-item span{flex:1;font-size:.9rem}.touch-icon{font-size:1.5rem;min-width:60px;text-align:center}.help-description{font-size:.9rem;line-height:1.6;color:#6c757d}@media (max-width: 768px){.panel{width:calc(100% - 40px);right:20px}.toolbar-left h1{font-size:1rem}#file-name{display:none}.help-content{width:95%;max-height:90vh}.help-header,.help-body{padding:1rem}.shortcut-item{flex-direction:column;align-items:flex-start;gap:.5rem}.shortcut-item kbd{min-width:auto}}