/* purpose: MD Step Tracker — 3D sneaker ring, trail scene, history, report, settings
   author: MD Hub
   date: 2026-09-16 */
#md_steps_root{
	--mds-accent:#059669;
	--mds-accent-hi:#34d399;
	--mds-gold:#fbbf24;
	--mds-ink:var(--bo-text,#0f172a);
	--mds-muted:var(--bo-text-muted,#64748b);
	--mds-card:var(--bo-bg-elevated,#fff);
	--mds-line:var(--bo-border,#e2e8f0);
	--mds-page:var(--bo-bg-page,#f8fafc);
	--mds-navy:#042f2e;
	width:100%;
	min-height:36rem;
	height:min(78vh,52rem);
	color:var(--mds-ink);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	position:relative;
	gap:.5rem;
	overflow:hidden;
}
html.dark #md_steps_root{
	--mds-card:#111827;
	--mds-page:#0b1220;
	--mds-line:#1f2937;
}
#md_steps_root *{box-sizing:border-box}
#md_steps_root .hidden,#md_steps_root [hidden]{display:none!important}
#md_steps_root .mds-tabs{
	display:flex;gap:.35rem;overflow-x:auto;flex-shrink:0;
	padding:.05rem .05rem .1rem;scrollbar-width:none;
}
#md_steps_root .mds-tabs::-webkit-scrollbar{display:none}
#md_steps_root .mds-tab{
	appearance:none;flex:1 1 0;display:inline-flex;flex-direction:column;
	align-items:center;justify-content:center;gap:.12rem;
	border:1px solid var(--mds-line);background:var(--mds-card);color:var(--mds-ink);
	border-radius:1rem;padding:.32rem .45rem .38rem;font-size:.72rem;font-weight:750;
	cursor:pointer;min-height:3.15rem;white-space:nowrap;
	box-shadow:0 .35rem .7rem rgba(15,23,42,.06);
}
#md_steps_root .mds-ico{
	width:1.85rem;height:1.85rem;object-fit:contain;display:block;
	filter:drop-shadow(0 .2rem .35rem rgba(0,0,0,.28));
	pointer-events:none;
}
#md_steps_root .mds-tab.on{
	background:linear-gradient(180deg,#059669,#047857);
	color:#fff;border-color:transparent;
	box-shadow:0 .45rem 1rem rgba(5,150,105,.32);
}
#md_steps_root .mds-tab.on .mds-ico{filter:drop-shadow(0 .15rem .3rem rgba(0,0,0,.35)) brightness(1.08)}
#md_steps_root .mds-panel{
	flex:1;min-height:0;overflow:auto;display:none;padding:.1rem .05rem .35rem;
}
#md_steps_root .mds-panel.on{display:flex;flex-direction:column}
#md_steps_root .mds-today-scene{
	flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:.32rem;padding:.85rem .6rem .9rem;
	border-radius:1.35rem;color:#f8fafc;overflow:hidden;position:relative;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1.1rem 2rem rgba(2,24,22,.28);
}
#md_steps_root .mds-trail{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transform:scale(1.06);pointer-events:none;
	filter:saturate(1.08) contrast(1.05);
}
#md_steps_root .mds-haze{
	position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(90% 70% at 50% 18%, rgba(16,185,129,.22), transparent 58%),
		linear-gradient(180deg, rgba(4,47,46,.28) 0%, rgba(4,47,46,.18) 38%, rgba(2,24,22,.78) 100%);
}
#md_steps_root .mds-sparks{
	position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
#md_steps_root .mds-sparks i{
	position:absolute;width:.38rem;height:.38rem;border-radius:50%;
	background:#fde68a;box-shadow:0 0 .55rem #fbbf24;
	opacity:.0;animation:mds_spark 4.8s ease-in-out infinite;
}
#md_steps_root .mds-sparks i:nth-child(1){left:14%;top:22%;animation-delay:.2s}
#md_steps_root .mds-sparks i:nth-child(2){left:78%;top:18%;animation-delay:1.1s;width:.28rem;height:.28rem}
#md_steps_root .mds-sparks i:nth-child(3){left:22%;top:68%;animation-delay:1.8s}
#md_steps_root .mds-sparks i:nth-child(4){left:84%;top:62%;animation-delay:2.4s;width:.22rem;height:.22rem}
#md_steps_root .mds-sparks i:nth-child(5){left:8%;top:46%;animation-delay:3.1s}
#md_steps_root .mds-sparks i:nth-child(6){left:70%;top:78%;animation-delay:.7s}
@keyframes mds_spark{
	0%,100%{opacity:0;transform:translateY(0) scale(.6)}
	40%{opacity:.85;transform:translateY(-10px) scale(1)}
	70%{opacity:.2;transform:translateY(-16px) scale(.8)}
}
#md_steps_root .mds-date{
	font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	opacity:.9;z-index:2;text-shadow:0 .2rem .6rem rgba(0,0,0,.45);
}
#md_steps_root .mds-ring-wrap{
	perspective:1200px;width:min(17.2rem,72vw,38vh);aspect-ratio:1;flex:0 0 auto;z-index:2;
}
#md_steps_root .mds-ring-3d{
	width:100%;height:100%;transform-style:preserve-3d;
	transform:rotateX(10deg) rotateY(-12deg);
	transition:transform .18s ease-out;
}
#md_steps_root .mds-ring-bezel{
	width:100%;height:100%;border-radius:50%;position:relative;
	background:
		conic-gradient(from 0deg,
			#064e3b 0deg,#6ee7b7 40deg,#059669 90deg,#022c22 140deg,
			#a7f3d0 180deg,#047857 230deg,#d1fae5 280deg,#064e3b 360deg);
	box-shadow:
		0 1.6rem 2.4rem rgba(0,0,0,.5),
		0 0 0 .16rem rgba(167,243,208,.38),
		inset 0 0 0 .08rem rgba(255,255,255,.38);
	transform:translateZ(12px);
}
#md_steps_root .mds-ring-svg{
	position:absolute;inset:6.5%;width:auto;height:auto;transform:rotate(-90deg);
	filter:drop-shadow(0 0 10px rgba(52,211,153,.4));
}
#md_steps_root .mds-ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:7}
#md_steps_root .mds-ring-fg{
	fill:none;stroke:#6ee7b7;stroke-width:7;stroke-linecap:round;
	stroke-dasharray:326.73;stroke-dashoffset:326.73;
	transition:stroke-dashoffset .35s ease, stroke .3s ease;
}
#md_steps_root[data-goal="1"] .mds-ring-fg{stroke:#fbbf24;filter:drop-shadow(0 0 8px rgba(251,191,36,.7))}
#md_steps_root .mds-shoe-stage{
	position:absolute;inset:17%;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:radial-gradient(circle at 34% 28%, rgba(236,253,245,.42), rgba(6,78,59,.18) 70%);
	box-shadow:inset 0 0 1.4rem rgba(6,78,59,.28);
	overflow:visible;transform-style:preserve-3d;
}
#md_steps_root .mds-shoe{
	position:absolute;width:86%;height:auto;object-fit:contain;
	filter:drop-shadow(0 .7rem 1rem rgba(0,0,0,.42));
	transform:rotateZ(-16deg) translateZ(18px);
	animation:mds_float 3.4s ease-in-out infinite;
	pointer-events:none;
}
#md_steps_root .mds-shoe-gold{opacity:0}
#md_steps_root[data-goal="1"] .mds-shoe{opacity:0}
#md_steps_root[data-goal="1"] .mds-shoe-gold{opacity:1}
#md_steps_root[data-tracking="1"] .mds-shoe{
	animation-duration:.72s;
}
#md_steps_root[data-tracking="1"] .mds-ring-bezel{
	box-shadow:
		0 1.6rem 2.4rem rgba(0,0,0,.5),
		0 0 0 .16rem rgba(167,243,208,.5),
		0 0 1.8rem rgba(52,211,153,.35),
		inset 0 0 0 .08rem rgba(255,255,255,.38);
}
#md_steps_root[data-goal="1"] .mds-sparks i{
	animation-duration:2.2s;background:#fff7ed;box-shadow:0 0 .7rem #fbbf24;
}
@keyframes mds_float{
	0%,100%{transform:rotateZ(-16deg) translate3d(0,0,18px)}
	50%{transform:rotateZ(-10deg) translate3d(0,-9px,22px)}
}
#md_steps_root .mds-readout{
	z-index:2;text-align:center;text-shadow:0 .25rem .7rem rgba(0,0,0,.45);
	margin-top:.1rem;
}
#md_steps_root .mds-steps{
	font-size:clamp(2rem,9cqi,2.7rem);font-weight:850;font-variant-numeric:tabular-nums;line-height:1;
	letter-spacing:-.03em;
}
#md_steps_root[data-goal="1"] .mds-steps{color:#fde68a}
#md_steps_root .mds-steps-lab{
	font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.78;margin-top:.08rem;
}
#md_steps_root .mds-goal-lab{
	font-size:.8rem;font-weight:700;opacity:.88;margin-top:.06rem;
}
#md_steps_root .mds-pct{
	font-size:.82rem;font-weight:800;letter-spacing:.04em;opacity:.92;margin-top:.08rem;
}
#md_steps_root .mds-stats{
	display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;width:min(22.5rem,100%);z-index:2;
}
#md_steps_root .mds-stat{
	background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
	border-radius:1rem;padding:.5rem .35rem .48rem;text-align:center;
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	box-shadow:0 .55rem 1.1rem rgba(0,0,0,.18);
}
#md_steps_root .mds-stat-art{
	display:block;width:2.35rem;height:2.35rem;object-fit:contain;margin:0 auto .12rem;
	filter:drop-shadow(0 .25rem .45rem rgba(0,0,0,.4));
}
#md_steps_root .mds-stat strong{
	display:block;font-size:1.12rem;font-weight:850;font-variant-numeric:tabular-nums;
}
#md_steps_root .mds-stat span{font-size:.68rem;opacity:.8;font-weight:700}
#md_steps_root .mds-status{
	font-size:.78rem;opacity:.92;text-align:center;max-width:22rem;min-height:1.2rem;z-index:2;
	text-shadow:0 .15rem .5rem rgba(0,0,0,.45);
}
#md_steps_root .mds-actions{
	display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 0;z-index:2;
}
#md_steps_root .mds-btn{
	appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
	border:1px solid var(--mds-line);background:var(--mds-card);color:var(--mds-ink);
	border-radius:.9rem;padding:.5rem .95rem;font-weight:750;cursor:pointer;min-height:2.55rem;white-space:nowrap;
}
#md_steps_root .mds-btn.pri{background:var(--mds-accent);color:#fff;border-color:transparent}
#md_steps_root .mds-btn.ghost{background:transparent}
#md_steps_root .mds-today-scene .mds-btn.ghost{
	border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.1);
	backdrop-filter:blur(8px);
}
#md_steps_root .mds-today-scene .mds-btn.pri{
	min-width:8.4rem;background:#ecfdf5;color:#064e3b;font-weight:850;
	box-shadow:0 .45rem 1rem rgba(236,253,245,.28);
}
#md_steps_root[data-tracking="1"] .mds-today-scene .mds-btn.pri{
	background:#fbbf24;color:#422006;
}
#md_steps_root .mds-toolbar{
	display:flex;gap:.4rem;align-items:center;margin-bottom:.55rem;flex-shrink:0;
}
#md_steps_root .mds-head-art{
	width:2.1rem;height:2.1rem;object-fit:contain;flex-shrink:0;
	filter:drop-shadow(0 .25rem .4rem rgba(0,0,0,.2));
}
#md_steps_root .mds-head-art.lg{width:3.1rem;height:3.1rem}
#md_steps_root .mds-hero-row{
	display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
}
#md_steps_root .mds-hero-row strong{display:block;font-size:1.05rem}
#md_steps_root .mds-hero-row span{display:block;font-size:.75rem;color:var(--mds-muted);font-weight:650}
#md_steps_root .mds-chip{
	appearance:none;border:1px solid var(--mds-line);background:var(--mds-card);color:var(--mds-ink);
	border-radius:999px;padding:.38rem .75rem;font-size:.75rem;font-weight:750;cursor:pointer;min-height:2.1rem;
}
#md_steps_root .mds-chip.on{background:var(--mds-accent);color:#fff;border-color:transparent}
#md_steps_root .mds-chart{
	display:flex;align-items:flex-end;gap:.28rem;height:9.8rem;
	padding:.55rem .35rem .25rem;border:1px solid var(--mds-line);background:var(--mds-card);
	border-radius:1.1rem;margin-bottom:.7rem;
	box-shadow:0 .4rem 1rem rgba(15,23,42,.06);
}
#md_steps_root .mds-bar{
	flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;
	gap:.18rem;cursor:pointer;
}
#md_steps_root .mds-bar i{
	display:block;width:100%;max-width:1.6rem;border-radius:.45rem .45rem .18rem .18rem;
	background:linear-gradient(180deg,var(--mds-accent-hi),var(--mds-accent));
	min-height:4px;box-shadow:0 .2rem .45rem rgba(5,150,105,.28);
	position:relative;
}
#md_steps_root .mds-bar i::after{
	content:'';position:absolute;left:12%;right:12%;top:-.18rem;height:.22rem;border-radius:999px;
	background:linear-gradient(180deg,#fde68a,#d97706);
	opacity:.85;
}
#md_steps_root .mds-bar.on i{background:linear-gradient(180deg,#fde68a,#f59e0b)}
#md_steps_root .mds-bar span{font-size:.62rem;font-weight:700;color:var(--mds-muted)}
#md_steps_root .mds-day-list{display:flex;flex-direction:column;gap:.4rem}
#md_steps_root .mds-day{
	display:flex;align-items:center;gap:.7rem;border:1px solid var(--mds-line);
	background:var(--mds-card);border-radius:1rem;padding:.55rem .75rem;
	box-shadow:0 .25rem .7rem rgba(15,23,42,.05);
}
#md_steps_root .mds-day-art{
	width:2.4rem;height:2.4rem;object-fit:contain;flex-shrink:0;
	filter:drop-shadow(0 .2rem .35rem rgba(0,0,0,.2));
}
#md_steps_root .mds-day-art.dim{opacity:.42;filter:grayscale(.4)}
#md_steps_root .mds-day .t{font-weight:800}
#md_steps_root .mds-day .meta{font-size:.75rem;color:var(--mds-muted)}
#md_steps_root .mds-day .grow{flex:1;min-width:0}
#md_steps_root .mds-day .n{font-weight:850;font-variant-numeric:tabular-nums}
#md_steps_root .mds-report-grid{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.75rem;
}
#md_steps_root .mds-kpi{
	border:1px solid var(--mds-line);background:var(--mds-card);border-radius:1.05rem;padding:.75rem .7rem .7rem;
	display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
	box-shadow:0 .3rem .8rem rgba(15,23,42,.05);
}
#md_steps_root .mds-kpi-art{
	width:2.2rem;height:2.2rem;object-fit:contain;margin-bottom:.2rem;
	filter:drop-shadow(0 .2rem .35rem rgba(0,0,0,.2));
}
#md_steps_root .mds-kpi span{display:block;font-size:.72rem;font-weight:700;color:var(--mds-muted)}
#md_steps_root .mds-kpi strong{font-size:1.22rem;font-weight:850;font-variant-numeric:tabular-nums}
#md_steps_root .mds-badges{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;
}
#md_steps_root .mds-badge{
	border:1px solid var(--mds-line);background:var(--mds-card);border-radius:1rem;
	padding:.75rem .6rem .7rem;text-align:center;opacity:.48;
	filter:grayscale(.55);
}
#md_steps_root .mds-badge.on{
	opacity:1;filter:none;border-color:rgba(5,150,105,.45);
	box-shadow:0 0 0 1px rgba(5,150,105,.12),0 .4rem .9rem rgba(5,150,105,.12);
}
#md_steps_root .mds-badge-art{
	display:block;width:3.1rem;height:3.1rem;object-fit:contain;margin:0 auto .35rem;
	filter:drop-shadow(0 .3rem .45rem rgba(0,0,0,.22));
}
#md_steps_root .mds-badge strong{display:block;font-size:.82rem}
#md_steps_root .mds-badge small{display:block;font-size:.68rem;color:var(--mds-muted);margin-top:.15rem}
#md_steps_root .mds-card{
	border:1px solid var(--mds-line);background:var(--mds-card);border-radius:1.1rem;padding:1rem;
	display:flex;flex-direction:column;gap:.75rem;max-width:32rem;width:100%;margin:0 auto;
	box-shadow:0 .4rem 1.1rem rgba(15,23,42,.06);
}
#md_steps_root .mds-field{display:flex;flex-direction:column;gap:.28rem;position:relative}
#md_steps_root .mds-field label{font-size:.72rem;font-weight:700;color:var(--mds-muted)}
#md_steps_root .mds-field small{position:absolute;right:.7rem;bottom:.7rem;font-size:.7rem;color:var(--mds-muted)}
#md_steps_root .mds-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
#md_steps_root .mds-input{
	border:1px solid var(--mds-line);background:var(--mds-page);color:var(--mds-ink);
	border-radius:.75rem;min-height:2.45rem;padding:.4rem .7rem;font-size:.9rem;width:100%;
}
#md_steps_root .mds-seg{display:flex;flex-wrap:wrap;gap:.35rem}
#md_steps_root .mds-row-sw{
	display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.88rem;font-weight:700;
}
#md_steps_root .mds-sw{
	appearance:none;width:2.6rem;height:1.45rem;border-radius:999px;border:0;cursor:pointer;
	background:#cbd5e1;position:relative;flex-shrink:0;
}
#md_steps_root .mds-sw::after{
	content:'';position:absolute;top:.16rem;left:.16rem;width:1.12rem;height:1.12rem;
	border-radius:50%;background:#fff;transition:transform .15s ease;
}
#md_steps_root .mds-sw.on{background:var(--mds-accent)}
#md_steps_root .mds-sw.on::after{transform:translateX(1.15rem)}
#md_steps_root .mds-hint{font-size:.75rem;color:var(--mds-muted);margin:0}
#md_steps_root .mds-add-sheet{
	position:absolute;inset:0;z-index:30;background:rgba(4,47,46,.62);
	display:flex;align-items:center;justify-content:center;padding:1rem;
	backdrop-filter:blur(6px);
}
#md_steps_root .mds-add-card{
	background:var(--mds-card);color:var(--mds-ink);border-radius:1.25rem;padding:1.2rem 1.1rem 1rem;
	width:min(22rem,100%);box-shadow:0 24px 50px rgba(0,0,0,.35);
	display:flex;flex-direction:column;gap:.55rem;align-items:center;text-align:center;
}
#md_steps_root .mds-add-card p{margin:0;color:var(--mds-muted);font-size:.82rem}
#md_steps_root .mds-add-row{display:flex;gap:.4rem;width:100%}
#md_steps_root .mds-add-row button{
	flex:1;appearance:none;border:1px solid var(--mds-line);background:var(--mds-page);
	border-radius:.75rem;min-height:2.4rem;font-weight:800;cursor:pointer;color:var(--mds-ink);
}
#md_steps_root .mds-add-card .mds-input{text-align:center}
#md_steps_root .mds-add-card .mds-actions{width:100%}
#md_steps_root .mds-toast{
	position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);
	background:var(--mds-ink);color:#fff;border-radius:999px;padding:.45rem .9rem;
	font-size:.8rem;font-weight:700;z-index:40;white-space:nowrap;
}
@media (max-width:640px){
	#md_steps_root{height:auto;min-height:calc(100dvh - 5.5rem)}
	#md_steps_root .mds-tab span{display:none}
	#md_steps_root .mds-tab{flex:1;min-height:2.85rem;padding:.28rem}
	#md_steps_root .mds-ico{width:2rem;height:2rem}
	#md_steps_root .mds-ring-wrap{width:min(15.5rem,78vw,36vh)}
}
@media (prefers-reduced-motion:reduce){
	#md_steps_root .mds-shoe,#md_steps_root .mds-sparks i{animation:none}
}