.city-dashboard { position: relative; color: #222; background: #f2f3ed; border-radius: 10px; overflow: hidden; }
.city-viewport { width: 100%; height: 400px; display: grid; place-items: center; font-size: 13px; color: #777; }
.city-viewport canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }.city-viewport canvas:active { cursor: grabbing; }
.city-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }.city-tools button { width: 32px; height: 32px; border: 1px solid #ddded7; border-radius: 6px; background: #fffffff2; color: #222; font-size: 16px; cursor: pointer; }
.city-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; padding: 10px 14px; background: #fff; color: #555; }.city-caption b { font-weight: 500; }.city-caption b::before { content: ''; width: 9px; height: 9px; display: inline-block; margin-right: 5px; background: #edd332; }
.city-picker { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; font-size: 12px; }.city-picker select { flex: 1; min-width: 0; padding: 8px; border: 1px solid #ddd; border-radius: 5px; font: inherit; background: #fff; color: #222; }
@media(max-width:700px){.city-viewport { height: 320px; }}
/* Fit the interactive scene inside the workspace's bounded panel. */
.ops-panel > .city-dashboard { display: flex; flex-direction: column; min-height: 0; }
.ops-panel .city-viewport { flex: 1; height: auto; min-height: 100px; }
.ops-panel .city-caption, .ops-panel .city-picker { flex-shrink: 0; }
.showcase .solution-shell:has(.city-dashboard) { min-height: 720px; }
@media(max-width:767px){
 .showcase .solution-shell:has(.city-dashboard) { min-height: 760px; }
 .ops-panel > .city-dashboard { min-height: 340px; }
}