* { box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family:Segoe UI, Roboto, Arial, sans-serif; }
#viewer{ width:100%; height:100vh; display:block; }
#ui{ position: absolute; left: 12px; top: 12px; z-index: 10; color:#222; }
#controls{ background: rgba(255,255,255,0.9); padding:8px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.tab-btn{ margin-right:6px; padding:6px 10px; border-radius:4px; background:#eee; border:1px solid #ddd; cursor:pointer; }
.tab-btn.active{ background:#1976d2; color:#fff; border-color:#135ba1; }
#tabs{ display:inline-block; margin-right:10px; }

.tree-label{
	background: rgba(0,0,0,0.65);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	transform: translate(-50%, -100%);
	pointer-events: none;
}
.btn{ display:inline-block; margin-right:8px; padding:6px 10px; border-radius:4px; background:#1976d2; color: #fff; cursor:pointer; }
.btn input{ display:none; }
#instructions{ margin-top:6px; font-size:12px; color:#444; background:rgba(255,255,255,0.85); padding:6px; border-radius:6px; }
#tooltip{ position: absolute; pointer-events:none; padding:6px 8px; background:rgba(0,0,0,0.75); color:#fff; border-radius:4px; font-size:13px; transform:translate(-50%,-120%); white-space:nowrap; }
.hidden{ display:none; }
#legend{ font-size:12px; margin-top:6px; color:#333; }
label{ font-size:13px; }
input[type=range]{ vertical-align:middle; }

/* style for the visual scale slider label to keep UI compact */
#controls label { margin-left:8px; }