body { font-family: "Segoe UI", sans-serif; margin: 0; background: #f6f8fb; color: #1f2937; }
.container { max-width: 1080px; margin: 24px auto; padding: 0 16px; }
.container.narrow { max-width: 760px; }
h1 { margin-bottom: 16px; }
.card { background: #fff; border: 1px solid #dbe2ea; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #e5e7eb; text-align: left; padding: 8px; font-size: 14px; }
.ellipsis { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-row { display: grid; grid-template-columns: 2fr 1fr 1.4fr auto; gap: 8px; }
.form-row.single { grid-template-columns: 1fr auto; }
.form-col { display: grid; grid-template-columns: 1fr; gap: 8px; }
input, button { padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
button { background: #0f766e; color: #fff; cursor: pointer; }
button + button { margin-left: 6px; }
pre { background: #f3f4f6; padding: 8px; border-radius: 6px; overflow: auto; }
.top-nav { display: flex; gap: 8px; margin: 8px 0 16px; flex-wrap: wrap; }
.top-nav a {
	color: #334155;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid #dbe2ea;
	border-radius: 999px;
	padding: 6px 12px;
	background: #fff;
}
.top-nav a:hover { color: #fff; border-color: #0f766e; background: #0f766e; }
.iframe-wrap { min-height: 70vh; }
.iframe-wrap iframe { width: 100%; min-height: 68vh; border: 1px solid #d1d5db; border-radius: 8px; }
.viz-box { position: relative; width: 100%; min-height: 220px; max-height: 360px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.viz-box.tall { min-height: 320px; max-height: 460px; }
.viz-box canvas { width: 100% !important; height: 100% !important; display: block; }
.map-box { position: relative; width: 100%; min-height: 320px; max-height: 460px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; }
.map-box #mapContainer { width: 100%; height: 420px; max-height: 460px; }
.tab-head { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn { background: #e2e8f0; color: #1f2937; border: 1px solid #cbd5e1; }
.tab-btn.is-active { background: #0f766e; color: #fff; border-color: #0f766e; }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

.global-nav {
	position: sticky;
	top: 0;
	z-index: 300;
	border-bottom: 1px solid #dbe2ea;
	background: linear-gradient(90deg, #ffffff 0%, #f3f8f6 100%);
	backdrop-filter: blur(4px);
}
.global-nav-inner {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 12px;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.brand-wrap { display: flex; align-items: center; gap: 10px; }
.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0f766e;
	text-decoration: none;
	font-weight: 700;
}
.brand-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #0f766e;
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}
.brand-sub { font-size: 12px; color: #64748b; }
.global-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.global-links a {
	text-decoration: none;
	color: #334155;
	font-weight: 600;
	border: 1px solid #dbe2ea;
	border-radius: 999px;
	padding: 6px 12px;
	background: #fff;
}
.global-links a.active,
.global-links a:hover {
	color: #fff;
	border-color: #0f766e;
	background: #0f766e;
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.section-head h2 { margin: 0; }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.metric-chip {
	border: 1px solid #dbe2ea;
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
}
.metric-chip .k { font-size: 12px; color: #64748b; }
.metric-chip .v { font-size: 18px; font-weight: 700; margin-top: 4px; }

@media (max-width: 900px) {
	.global-nav-inner { flex-direction: column; align-items: flex-start; }
	.global-links { width: 100%; }
}