html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #071018; font-family: "Segoe UI", "Noto Sans TC", Arial, sans-serif; color: #eef5fb; }
.panel { position: fixed; z-index: 10; background: rgba(7,12,18,.76); border: 1px solid rgba(220,235,245,.18); box-shadow: 0 12px 32px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.title { top: 16px; left: 16px; padding: 14px 18px; }
.title h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.title p { margin: 4px 0 0; color: #aabccc; font-size: 14px; }
.layers { top: 16px; right: 16px; width: 176px; padding: 12px; display: grid; gap: 8px; font-size: 14px; }
.layers label { display: flex; gap: 8px; align-items: center; }
.controls { left: 16px; bottom: 18px; display: flex; gap: 10px; padding: 12px; }
button { height: 36px; border: 1px solid rgba(255,255,255,.18); background: #1d2a36; color: #f2f6fa; font: inherit; padding: 0 14px; cursor: pointer; }
button:hover { background: #273847; }
.info { right: 16px; top: 222px; width: 250px; padding: 14px; }
.info .mode { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.info dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 12px 0 0; font-size: 13px; }
.info dt { color: #9db1c4; }
.info dd { margin: 0; }
.status { position: fixed; left: 16px; top: 116px; z-index: 12; color: #ffd3d3; background: rgba(70,15,18,.78); padding: 10px 12px; max-width: 520px; display: none; }
.disclaimer { position: fixed; right: 16px; bottom: 18px; z-index: 10; color: rgba(238,244,250,.78); font-size: 12px; text-shadow: 0 1px 2px #000; }
.cesium-viewer-bottom { display: none; }
.delta-legend { position: fixed; left: 16px; bottom: 72px; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(7,12,18,.76); border: 1px solid rgba(220,235,245,.18); color: #d7e4ef; font-size: 12px; }
.delta-legend div { width: 86px; height: 11px; background: linear-gradient(90deg,#5c2e1f,#9d6747,#c7c0aa); }
.delta-legend div.pos { background: linear-gradient(90deg,#c7c0aa,#c9965c,#d9aa70); }
#multiplierSelect { height: 36px; border: 1px solid rgba(255,255,255,.18); background: #1d2a36; color: #f2f6fa; padding: 0 10px; }

.time-panel { left: 16px; right: 16px; bottom: 72px; display: grid; grid-template-columns: 42px minmax(260px, 1fr) 56px; align-items: center; gap: 12px; padding: 10px 14px; color: #d7e4ef; font-size: 13px; }
.time-panel input { width: 100%; }
.controls { bottom: 128px; }
.delta-legend { bottom: 182px; }


/* excavate animation */
.time-panel { left: 16px; right: 16px; bottom: 86px; display: grid; grid-template-columns: 36px minmax(260px,1fr) 48px; align-items:center; gap:10px; padding:10px 14px; color:#d7e4ef; font-size:13px; }
.time-panel input { width:100%; }