/* =========================
   Health Z-index
========================= */

.page{
  position:relative;
  z-index:10;
}

.page > *{
  position:relative;
  z-index:20;
}

/* =========================
   Header
========================= */



/* =========================
   Section
========================= */



/* =========================
   Grid
========================= */

.card-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(240px,1fr));

  gap:20px;
}

/* =========================
   Card
========================= */

.card{

  position:relative;
  z-index:20;

  overflow:hidden;

  padding:28px;

  border-radius:24px;

  background:
    rgba(120,255,180,0.05);

  border:
    1px solid rgba(120,255,180,0.10);

  backdrop-filter:blur(8px);

  transition:0.25s;
}

.card:hover{

  transform:
    translateY(-4px);

  background:
    rgba(255,255,255,0.08);
}

/* =========================
   Card Title
========================= */

.card h3{

  margin-bottom:12px;

  font-size:18px;

  color:rgba(255,255,255,0.92);

  font-weight:600;
}

/* =========================
   Metric
========================= */



/* =========================
   Sub Text
========================= */

.sub{

  font-size:14px;

  color:rgba(255,255,255,0.68);

  letter-spacing:0.2px;
}

/* =========================
   Health Accent
========================= */

.card:nth-child(1) .metric{
  color:#ff6b6b;
}

.card:nth-child(2) .metric{
  color:#00d2ff;
}

.card:nth-child(3) .metric{
  color:#6effa7;
}

/* =========================
   Responsive
========================= */

@media(max-width:768px){

  .card{
    padding:22px;
  }

}

.health-graphs-card{
  margin:16px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.health-graphs-head h3{
  margin:0;
  font-size:20px;
}

.health-graphs-head p{
  margin:4px 0 14px;
  opacity:.75;
  font-size:13px;
}

.health-graph-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.health-graph-grid canvas{
  width:100%;
  height:140px;
  display:block;
  border-radius:14px;
  background:rgba(0,0,0,.18);
}

.graph-subtitle{

	font-size:11px;
	opacity:.6;
	margin-left:10px;

}

.graph-axis-note{

	display:flex;
	justify-content:space-between;

	margin-top:4px;
	margin-bottom:10px;

	font-size:11px;
	opacity:.55;

	padding:0 12px;

	color:
		rgba(255,255,255,.7);

}

.health-summary-cards{

	display:grid;
	grid-template-columns:
		repeat(auto-fit,minmax(140px,1fr));

	gap:12px;
	margin-bottom:18px;

}

.summary-card{

	background:
		rgba(255,255,255,.06);

	border:
		1px solid rgba(255,255,255,.12);

	border-radius:12px;

	padding:12px;

	backdrop-filter: blur(6px);

}

.summary-title{

	font-size:13px;
	opacity:.8;
	margin-bottom:6px;

}

.summary-current{

	font-size:26px;
	font-weight:bold;

}

.summary-row{

	font-size:12px;
	opacity:.75;

	margin-top:4px;

}

.summary-trend{

	font-size:14px;
	font-weight:700;

	margin-top:4px;
	margin-bottom:4px;

	text-align:center;

	opacity:.9;

}

.trend-good{

	color:#66ff99;

}

.trend-bad{

	color:#ff7777;

}

.trend-neutral{

	color:#cccccc;

}

.summary-status{

	display:block;

	font-size:11px;

	margin-top:2px;

	font-weight:600;

}

.health-score-card{

	background:
		rgba(255,255,255,.08);

	border:
		1px solid rgba(255,255,255,.15);

	border-radius:16px;

	padding:20px;

	text-align:center;

	margin-bottom:16px;

}

.health-score-title{

	font-size:14px;

	opacity:.8;

}

.health-score-value{

	font-size:52px;

	font-weight:700;

	margin-top:8px;

}

.health-score-rank{

	font-size:18px;

	font-weight:600;

	margin-top:6px;

}

.health-insight{

	margin-top:16px;

	padding-top:12px;

	border-top:
		1px solid rgba(255,255,255,.12);

	font-size:14px;

	line-height:1.8;

	text-align:left;

	opacity:.9;

}

.health-score-subrank{

	font-size:13px;
	opacity:.65;

	margin-top:4px;

}

.health-summary{

	margin-top:14px;

	padding-top:12px;

	border-top:
		1px solid rgba(255,255,255,.12);

	font-size:14px;

	line-height:1.8;

	color:
		rgba(255,255,255,.85);

}

.health-score-excellent{
	color:#66ccff;
}

.health-score-good{
	color:#66ff99;
}

.health-score-fair{
	color:#ffd966;
}

.health-score-care{
	color:#ffb366;
}

.health-score-alert{
	color:#ff7777;
}

.health-score-diff{

	font-size:18px;

	font-weight:700;

	margin-top:8px;

	opacity:.85;

}

.score-up{

	color:#66ff99;

}

.score-down{

	color:#ff7777;

}

.score-flat{

	color:#cccccc;

}

.health-score-diff-text{

	font-size:12px;
	opacity:.75;

	margin-top:2px;

}

.summary-trait{

	margin-top:6px;

	font-size:12px;

	font-weight:600;

	color:#66ff99;

}

.summary-trait.good{

	color:#66ff99;

}

.summary-trait.bad{

	color:#ff8888;

}

.trait-good{

	color:#66ff99;

	font-weight:600;

}

.trait-bad{

	color:#ff8888;

	font-weight:600;

}

.trait-flat{

	color:#cccccc;

}



.info-btn{

	cursor:pointer;

	font-size:12px;

	margin-left:6px;

	color:#ffcc66;

	font-weight:bold;

}

.info-btn:hover{

	color:#ffffff;

}

.info-modal{

	display:none;

	position:fixed;

	inset:0;

	background:
		rgba(0,0,0,.7);

	z-index:9999;

}

.info-modal-content{

	width:min(500px,90%);

	margin:10vh auto;

	padding:20px;

	border-radius:16px;

	background:#2d3155;

}

.info-modal-content button{

	background:#4f8cff;

	color:white;

	border:none;

	padding:10px 18px;

	border-radius:10px;

	cursor:pointer;

	margin-top:16px;

	font-weight:600;

}

.info-modal-content button:hover{

	opacity:.9;

}

.health-badge-card{
	margin:0 0 18px 0;
	padding:16px;
	border-radius:16px;
	background:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.14);
}

.badge-title{
	font-size:16px;
	font-weight:700;
	margin-bottom:10px;
}

.badge-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.health-badge{
	padding:8px 12px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	font-size:13px;
	font-weight:600;
}