/* Beast Nutrition – Health Tools v2: account tabs, progress log, public pages */
.bnht-app,
.bnhc {
	--bnht-p: #007a5e;
	--bnht-p-soft: rgba(0, 122, 94, .06);
	--bnht-p-line: rgba(0, 122, 94, .18);
	--bnht-b: #e3e6ea;
	--bnht-t: #1b0820;
	--bnht-m: #667085;
	--bnht-good: #12a26b;
	--bnht-bad: #e5484d;
	color: var(--bnht-t);
}
.bnht-app *,
.bnhc * { box-sizing: border-box; }

/* ---------- Account: tabs ---------- */
.bnht-app-lead { margin: 0 0 14px; font-size: .92em; color: var(--bnht-m); }
.bnht-tabs {
	position: relative;
	display: flex;
	gap: 6px;
	margin: 0 0 22px;
	padding: 5px;
	overflow-x: auto;
	background: #f4f5f7;
	border-radius: 14px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.bnht-tabs::-webkit-scrollbar { display: none; }
.bnht-tabs [role="tab"] {
	display: inline-flex;
	flex: 1 0 auto;
	gap: 7px;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0;
	padding: 0 14px;
	font-size: .9em;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--bnht-m);
	background: transparent;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.bnht-tabs [role="tab"]:hover { color: var(--bnht-t); background: rgba(255, 255, 255, .6); }
.bnht-tabs [role="tab"][aria-selected="true"] {
	color: var(--bnht-p);
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
}
.bnht-tabs [role="tab"]:focus-visible { outline: 2px solid var(--bnht-p); outline-offset: 1px; }
.bnht-tabs svg { flex: none; }
.bnht-app [hidden] { display: none !important; }

.bnht-pane-h { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.bnht-pane-h h2 { margin: 0; font-size: 1.3em; }
.bnht-pane-h a { font-size: .85em; font-weight: 600; color: var(--bnht-p); }

/* ---------- Account: progress log ---------- */
.bnht-hist {
	margin: 4px 0 24px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--bnht-b);
	border-radius: 16px;
}
.bnht-hist-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bnht-hist-head h3 { margin: 0; font-size: 1.05em; }
.bnht-hist-status { margin: 2px 0 0; font-size: .8em; color: var(--bnht-m); }
.bnht-hist-head select { width: auto; height: 38px; margin: 0; padding: 0 30px 0 10px; font-size: .88em; border: 1px solid var(--bnht-b); border-radius: 8px; }
.bnht-save {
	height: 38px;
	margin: 0;
	padding: 0 14px;
	font-size: .85em;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bnht-p);
	background: var(--bnht-p-soft);
	border: 1px solid var(--bnht-p-line);
	border-radius: 9px;
	cursor: pointer;
}
.bnht-save:hover:not(:disabled) { background: var(--bnht-p); color: #fff; }
.bnht-save:disabled { opacity: .45; cursor: not-allowed; }
.bnht-hist-empty { margin: 0; font-size: .88em; color: var(--bnht-m); }
.bnht-hist-sum { margin: 0 0 8px; font-size: .9em; }
.bnht-hist .up { color: var(--bnht-good); }
.bnht-hist .down { color: #c2780b; }

.bnht-spark { margin: 0 0 14px; }
.bnht-spark svg { display: block; width: 100%; height: 90px; overflow: visible; }
.bnht-spark .l { fill: none; stroke: var(--bnht-p); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bnht-spark .a { fill: var(--bnht-p); opacity: .08; }
.bnht-spark circle { fill: #fff; stroke: var(--bnht-p); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bnht-spark-ax { display: flex; justify-content: space-between; margin-top: 4px; font-size: .72em; color: var(--bnht-m); }

.bnht-hist-t { width: 100%; margin: 0; font-size: .88em; border-collapse: collapse; }
.bnht-hist .bnht-hist-t th,
.bnht-hist .bnht-hist-t td { padding: 9px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bnht-b); }
.bnht-hist-t th { font-size: .74em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--bnht-m); }
.bnht-hist-t tr:last-child td { border-bottom: 0; }
.bnht-hist-t td:last-child { width: 36px; text-align: right; }
.bnht-del {
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--bnht-m);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.bnht-del:hover { color: var(--bnht-bad); background: #fdecec; }

/* ---------- Public pages ---------- */
.bnhc { font-variant-numeric: tabular-nums; }
.bnhc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.bnhc-hero {
	margin-bottom: 28px;
	padding: 34px 0 32px;
	background: linear-gradient(135deg, #f1faf6 0%, #f7f4fb 100%);
	border-bottom: 1px solid var(--bnht-b);
}
.bnhc-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: .82em; color: var(--bnht-m); }
.bnhc-crumb a { color: var(--bnht-m); }
.bnhc-crumb a:hover { color: var(--bnht-p); }
.bnhc-crumb [aria-current] { color: var(--bnht-t); font-weight: 600; }
.bnhc h1 { margin: 0 0 8px; font-size: clamp(1.7em, 3.6vw, 2.5em); line-height: 1.12; letter-spacing: -.02em; }
.bnhc-lead { max-width: 680px; margin: 0; font-size: 1.05em; line-height: 1.55; color: #475467; }
.bnhc-hero-t { display: flex; gap: 16px; align-items: flex-start; }
.bnhc-hero-i,
.bnhc-card-i {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--bnht-p);
	background: #fff;
	border: 1px solid var(--bnht-p-line);
	border-radius: 14px;
}
.bnhc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.bnhc-badges li { margin: 0; padding: 6px 12px; font-size: .82em; font-weight: 600; background: #fff; border: 1px solid var(--bnht-b); border-radius: 99px; }
.bnhc-badges li::before { content: "✓ "; color: var(--bnht-p); }

.bnhc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; }
@media (max-width: 849px) { .bnhc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 549px) { .bnhc-grid { grid-template-columns: 1fr; } }
.bnhc-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	color: var(--bnht-t) !important;
	background: #fff;
	border: 1px solid var(--bnht-b);
	border-radius: 16px;
	text-decoration: none !important;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bnhc-card:hover { border-color: var(--bnht-p-line); box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .25); transform: translateY(-2px); }
.bnhc-card .bnhc-card-i { width: 46px; height: 46px; margin-bottom: 4px; background: var(--bnht-p-soft); border: 0; }
.bnhc-card h2,
.bnhc-card h3 { margin: 0; font-size: 1.12em; }
.bnhc-card p { margin: 0; font-size: .9em; line-height: 1.5; color: var(--bnht-m); }
.bnhc-card ul { margin: 4px 0 0; padding: 0; list-style: none; }
.bnhc-card li { margin: 0; padding: 2px 0 2px 20px; font-size: .84em; position: relative; }
.bnhc-card li::before { content: ""; position: absolute; left: 3px; top: .65em; width: 7px; height: 7px; background: var(--bnht-p); border-radius: 50%; opacity: .7; }
.bnhc-card-go { margin-top: auto; padding-top: 8px; font-size: .88em; font-weight: 700; color: var(--bnht-p); }

.bnhc-sec { margin: 40px 0 0; }
.bnhc-sec h2 { margin: 0 0 14px; font-size: 1.45em; letter-spacing: -.01em; }
.bnhc-sec h3 { margin: 22px 0 8px; font-size: 1.08em; }
.bnhc-sec p,
.bnhc-sec li { line-height: 1.65; }

.bnhc-calc {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--bnht-b);
	border-radius: 20px;
	box-shadow: 0 12px 32px -18px rgba(16, 24, 40, .25);
}
@media (max-width: 549px) { .bnhc-calc { padding: 16px; border-radius: 16px; } }
.bnhc-calc .bnht { margin: 0; }

.bnhc-toc {
	position: sticky;
	top: var(--bnhc-sticky, 64px);
	z-index: 5;
	display: flex;
	gap: 6px;
	margin: 28px 0 0;
	padding: 8px 0;
	overflow-x: auto;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	scrollbar-width: none;
}
.bnhc-toc::-webkit-scrollbar { display: none; }
.bnhc-toc a { flex: none; padding: 7px 14px; font-size: .85em; font-weight: 600; color: var(--bnht-t); background: #f4f5f7; border-radius: 99px; }
.bnhc-toc a:hover { color: #fff; background: var(--bnht-p); }
.bnhc-body { max-width: 820px; }
.bnhc-body .bnhc-sec { scroll-margin-top: 130px; }

.bnhc-formula { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 12px 0; padding: 14px 16px; background: #f7f8fa; border-left: 3px solid var(--bnht-p); border-radius: 0 10px 10px 0; }
.bnhc-formula span { flex: none; min-width: 64px; font-size: .74em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bnht-m); }
.bnhc-formula code { padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; white-space: normal; color: var(--bnht-t); background: none; }

.bnhc-table { width: 100%; margin: 12px 0 14px; font-size: .92em; border: 1px solid var(--bnht-b); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.bnhc .bnhc-table th,
.bnhc .bnhc-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--bnht-b); }
.bnhc-table tr:last-child td { border-bottom: 0; }
.bnhc-table th { font-size: .78em; letter-spacing: .03em; text-transform: uppercase; color: var(--bnht-m); background: #fafbfc; }
.bnhc-pill { display: inline-block; padding: 3px 10px; font-size: .86em; font-weight: 600; border-radius: 99px; }
.bnhc-pill.is-good { color: #067a52; background: #e3f6ee; }
.bnhc-pill.is-warn { color: #a15c07; background: #fdf1dc; }
.bnhc-pill.is-bad { color: #b42318; background: #fdecec; }

.bnhc-steps,
.bnhc-list,
.bnhc-tips { margin: 10px 0 14px; padding-left: 1.3em; }
.bnhc-steps li,
.bnhc-list li { margin: 0 0 8px; }
.bnhc-tips { padding: 0; list-style: none; }
.bnhc-tips li { position: relative; margin: 0 0 10px; padding: 12px 14px 12px 44px; background: #f7f8fa; border-radius: 12px; }
.bnhc-tips li::before { content: "✓"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; color: #fff; background: var(--bnht-p); border-radius: 50%; }

.bnhc-path { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 849px) { .bnhc-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 549px) { .bnhc-path { grid-template-columns: 1fr; } }
.bnhc-path li { counter-increment: s; position: relative; margin: 0; padding: 18px 18px 18px 58px; background: #f7f8fa; border-radius: 14px; }
.bnhc-path li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; font-weight: 700; line-height: 28px; text-align: center; color: #fff; background: var(--bnht-p); border-radius: 50%; }
.bnhc-path a { display: block; margin-bottom: 4px; color: var(--bnht-t); }
.bnhc-path a:hover { color: var(--bnht-p); }
.bnhc-path span { display: block; font-size: .88em; line-height: 1.5; color: var(--bnht-m); }

.bnhc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 849px) { .bnhc-cols { grid-template-columns: 1fr; } }
.bnhc-cols h3 { margin-top: 0; }
.bnhc-cols p { margin: 0; color: #475467; }

.bnhc-track {
	display: flex;
	gap: 20px;
	align-items: center;
	margin: 40px 0 0;
	padding: 22px 24px;
	color: #fff;
	background: linear-gradient(135deg, #0b5d49 0%, #1b0820 100%);
	border-radius: 18px;
}
.bnhc-track h3 { margin: 0 0 4px; font-size: 1.15em; color: #fff; }
.bnhc-track p { margin: 0; font-size: .92em; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.bnhc-track > div { flex: 1; }
.bnhc-track-art { flex: none; width: 92px; height: 50px; color: #6ee7b7; }
.bnhc-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 12px 18px;
	font-size: .92em;
	font-weight: 700;
	color: #1b0820 !important;
	background: #fff;
	border-radius: 10px;
	text-decoration: none !important;
	white-space: nowrap;
}
.bnhc-btn:hover { background: #e9fbf3; }
@media (max-width: 649px) {
	.bnhc-track { flex-direction: column; align-items: flex-start; }
	.bnhc-track-art { width: 72px; height: 40px; }
	.bnhc-btn { white-space: normal; }
}

.bnhc-faq { border-top: 1px solid var(--bnht-b); }
.bnhc-faq details { border-bottom: 1px solid var(--bnht-b); }
.bnhc-faq summary { position: relative; padding: 16px 36px 16px 0; font-weight: 600; list-style: none; cursor: pointer; }
.bnhc-faq summary::-webkit-details-marker { display: none; }
.bnhc-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; font-size: 1.4em; font-weight: 400; line-height: 1; color: var(--bnht-p); transform: translateY(-50%); transition: transform .2s; }
.bnhc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bnhc-faq details > div { padding: 0 0 16px; color: #475467; }
.bnhc-faq p { margin: 0; }

.bnhc-all { margin: 14px 0 0; font-weight: 600; }
.bnhc-all a { color: var(--bnht-p); }
.bnhc-disclaimer { margin: 36px 0 48px; padding-top: 16px; font-size: .8em; color: var(--bnht-m); border-top: 1px solid var(--bnht-b); }

@media (prefers-reduced-motion: reduce) {
	.bnhc *, .bnht-app * { transition: none !important; }
}