* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.yoru {
	--bg: #2a3450;
	--bg0: #18203a;
	--bg1: #1e2840;
	--bg2: #303c5c;
	--raised: #303c5c;
	--hover: #3a4868;
	--active: #445278;
	--border: #6070a0;
	--border2: #6070a0;
	--select: #7080b0;
	--match: #8090c0;
	--faint: #9098c0;
	--muted: #b0bcd8;
	--text: #d0daf0;
	--Lantern: #f2d4b8;
	--Blush: #d8aac4;
	--Petal: #b898d0;
	--Iris: #9080c0;
	--Wisteria: #8898c8;
	--Indigo: #6080b8;
	--Harbour: #507098;
	--Sky: #7ab0c8;
	--Seafoam: #609098;
	--Moss: #7aa898;
	--Starlight: #e8d870;
	--Amber: #d0a870;
	--Ember: #b07888;
	--Crimson: #c07888;
	--Bloom: #e098a0;
	--Moon: #e8eef8;
}
body.hiru {
	--bg: #f0e8f5;
	--bg0: #d4c4e0;
	--bg1: #ddd0ea;
	--bg2: #ead8f2;
	--raised: #ead8f2;
	--hover: #e0d0ec;
	--active: #d4c4e4;
	--border: #c0b0d8;
	--border2: #c0b0d8;
	--select: #a898c4;
	--match: #9080b0;
	--faint: #7868a0;
	--muted: #4e3e6e;
	--text: #2a1848;
	--Lantern: #a86018;
	--Blush: #a03868;
	--Petal: #8830a0;
	--Iris: #6030a0;
	--Wisteria: #4840b0;
	--Indigo: #2858b8;
	--Harbour: #286890;
	--Sky: #2878a8;
	--Seafoam: #187870;
	--Moss: #287848;
	--Starlight: #887018;
	--Amber: #985818;
	--Ember: #884058;
	--Crimson: #983040;
	--Bloom: #a02868;
	--Moon: #402870;
}
body {
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	transition:
		background 0.35s var(--ease),
		color 0.35s var(--ease);
}
.app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.main {
	flex: 1;
	padding: 0 0 80px;
}
.topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border2);
	background: var(--bg1);
	position: sticky;
	top: 0;
	z-index: 100;
	gap: 10px;
	flex-wrap: wrap;
}
.nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.logo-svg {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	filter: drop-shadow(0 0 8px rgba(184, 152, 208, 0.7))
		drop-shadow(0 0 18px rgba(144, 128, 192, 0.45))
		drop-shadow(0 0 32px rgba(122, 176, 200, 0.25));
}
.brand-text h1 {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1;
}
.brand-text p {
	font-size: 0.55rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 2px;
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.nav-tabs {
	display: flex;
	gap: 2px;
	background: var(--bg2);
	border-radius: 10px;
	padding: 3px;
}
.ntab {
	padding: 6px 14px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}
.ntab.active {
	background: var(--raised);
	color: var(--text);
	box-shadow: 0 1px 4px #0002;
}
.toggle {
	display: inline-flex;
	border: 1px solid var(--border2);
	border-radius: 8px;
	overflow: hidden;
}
.tbtn {
	padding: 6px 12px;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--muted);
	transition:
		background 0.2s,
		color 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.tbtn.on {
	background: var(--border2);
	color: var(--text);
}
.page {
	display: none;
	padding: 20px;
}
.page.active {
	display: block;
}

/* OVERVIEW */
.overview-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 28px;
}
.ov-card {
	border-radius: 10px;
	padding: 10px 6px;
	border: 1px solid var(--border2);
	background: var(--raised);
	cursor: pointer;
	transition: all 0.18s;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}
.ov-card:hover {
	transform: translateY(-2px);
	border-color: var(--select);
}
.ov-card.today {
	box-shadow: 0 0 0 2px var(--select);
}
.ov-emoji {
	font-size: 1.1rem;
	display: block;
	margin-bottom: 4px;
}
.ov-day {
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ov-type {
	font-size: 0.52rem;
	color: var(--faint);
	margin-top: 2px;
}
.ov-bar {
	height: 3px;
	border-radius: 2px;
	margin-top: 6px;
	opacity: 0.7;
}
.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 28px;
}
.stat-card {
	border-radius: 12px;
	padding: 16px;
	border: 1px solid var(--border2);
	background: var(--raised);
	text-align: center;
}
.stat-num {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--text);
}
.stat-label {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 4px;
}
.streak-section {
	border-radius: 14px;
	padding: 18px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 20px;
}
.streak-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.habit-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.habit-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.habit-name {
	font-size: 0.62rem;
	color: var(--muted);
	min-width: 110px;
	flex-shrink: 0;
}
.habit-dots {
	display: flex;
	gap: 4px;
}
.hdot {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	cursor: pointer;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	-webkit-tap-highlight-color: transparent;
}
.hdot.done {
	border-color: transparent;
}
.hdot.today-dot {
	box-shadow: 0 0 0 2px var(--select);
}
.day-initial {
	font-size: 0.5rem;
	color: var(--faint);
}
/* habit stats */
.habit-row-wrap {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 4px;
}
.habit-main-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.habit-stat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 120px;
}
@media (max-width: 699px) {
	.habit-stat-row {
		padding-left: 100px;
	}
}
.habit-stat {
	font-size: 0.54rem;
	color: var(--faint);
	display: flex;
	align-items: center;
	gap: 3px;
	letter-spacing: 0.03em;
}
.habit-stat-val {
	font-weight: 500;
}
.habit-stat-sep {
	color: var(--border2);
	margin: 0 2px;
}

/* ROUTINE */
.day-tabs {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.dtab {
	padding: 6px 12px;
	border-radius: 20px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--muted);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.62rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.18s;
	-webkit-tap-highlight-color: transparent;
}
.dtab.active {
	font-weight: 500;
}
.day-header {
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.day-name {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
}
.day-type-badge {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 8px;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
}
.day-count {
	font-size: 0.58rem;
	color: var(--faint);
}
.filters {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.fpill {
	padding: 3px 10px;
	border-radius: 10px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--muted);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.58rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.fpill.active {
	background: var(--border2);
	color: var(--text);
}
.timeline {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.trow {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.ttime {
	min-width: 40px;
	font-size: 0.6rem;
	color: var(--faint);
	font-weight: 500;
	padding-top: 9px;
	text-align: right;
	flex-shrink: 0;
}
.tline-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.tdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-top: 11px;
	flex-shrink: 0;
}
.tline {
	width: 1px;
	flex: 1;
	background: var(--border2);
	opacity: 0.4;
	margin-top: 2px;
}
.tcard {
	flex: 1;
	border-radius: 8px;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: transform 0.12s;
	cursor: default;
}
.tcard:hover {
	transform: translateX(2px);
}
.tcard-label {
	font-size: 0.72rem;
	color: var(--text);
	line-height: 1.45;
	flex: 1;
}
.tcard-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.tdur {
	font-size: 0.52rem;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 600;
	background: var(--border2);
	color: var(--faint);
	border: 1px solid var(--border2);
}
.ttag {
	font-size: 0.55rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 500;
	border: 1px solid transparent;
}

/* DIET */
.diet-day-tabs {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.diet-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 24px;
}
.meal-card {
	border-radius: 12px;
	padding: 14px 16px;
	border: 1px solid var(--border2);
	background: var(--raised);
}
.meal-time-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.meal-icon {
	font-size: 1rem;
}
.meal-time {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.meal-name {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
	flex: 1;
}
.meal-items {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.meal-item {
	font-size: 0.62rem;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--bg2);
	color: var(--muted);
	border: 1px solid var(--border2);
}
.meal-note {
	font-size: 0.6rem;
	color: var(--faint);
	margin-top: 8px;
	font-style: italic;
	line-height: 1.5;
}
.section-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	margin: 24px 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.sect-line {
	flex: 1;
	height: 1px;
	background: var(--border2);
	opacity: 0.5;
}
.tips-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}
.tip-card {
	border-radius: 10px;
	padding: 14px;
	border: 1px solid var(--border2);
	background: var(--raised);
}
.tip-icon {
	font-size: 1.1rem;
	margin-bottom: 6px;
}
.tip-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 5px;
}
.tip-text {
	font-size: 0.63rem;
	color: var(--muted);
	line-height: 1.65;
}
.problem-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}
.prob-card {
	border-radius: 10px;
	padding: 14px 16px;
	border: 1px solid var(--border2);
	background: var(--raised);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: start;
}
.prob-label {
	font-size: 0.65rem;
	color: var(--Crimson);
	font-weight: 500;
	margin-bottom: 3px;
}
.prob-fix {
	font-size: 0.63rem;
	color: var(--muted);
	line-height: 1.6;
}
.prob-badge {
	font-size: 0.55rem;
	padding: 3px 9px;
	border-radius: 8px;
	background: var(--Moss) 18;
	color: var(--Moss);
	border: 1px solid var(--Moss) 40;
	white-space: nowrap;
	height: fit-content;
}
.snack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
	margin-bottom: 24px;
}
.snack-card {
	border-radius: 10px;
	padding: 12px;
	border: 1px solid var(--border2);
	background: var(--raised);
	text-align: center;
}
.snack-emoji {
	font-size: 1.4rem;
	display: block;
	margin-bottom: 6px;
}
.snack-name {
	font-size: 0.68rem;
	color: var(--text);
	font-weight: 500;
	margin-bottom: 3px;
}
.snack-why {
	font-size: 0.58rem;
	color: var(--muted);
	line-height: 1.5;
}

/* TUITION */
.subj-header {
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.subj-icon {
	font-size: 1.6rem;
	flex-shrink: 0;
}
.subj-full {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}
.subj-abbr {
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 3px;
}
.topic-section {
	margin-bottom: 20px;
}
.topic-section-label {
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.topic-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border2);
	opacity: 0.4;
}
.topic-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.topic-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: var(--raised);
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.topic-row:hover {
	transform: translateX(2px);
}
.topic-row.done-topic {
	opacity: 0.6;
}
.topic-check {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	transition: all 0.15s;
}
.topic-check.checked {
	border-color: transparent;
}
.topic-name {
	font-size: 0.7rem;
	color: var(--text);
	flex: 1;
	line-height: 1.4;
}
.topic-unit {
	font-size: 0.55rem;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--bg2);
	color: var(--faint);
	border: 1px solid var(--border2);
	white-space: nowrap;
}
.subj-meta-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 18px;
}
.subj-meta-card {
	border-radius: 9px;
	padding: 11px 12px;
	border: 1px solid var(--border2);
	background: var(--raised);
	text-align: center;
}
.subj-meta-val {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
}
.subj-meta-lbl {
	font-size: 0.54rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 2px;
}
.subj-day-tabs {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.exam-tip {
	border-radius: 10px;
	padding: 13px 15px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 8px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.exam-tip-icon {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 1px;
}
.exam-tip-text {
	font-size: 0.65rem;
	color: var(--muted);
	line-height: 1.6;
}
.exam-tip-title {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 3px;
}

/* ── ENHANCED PROGRESS TRACKER ── */
.rt-progress-panel {
	border-radius: 14px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 16px;
	overflow: hidden;
}
.rt-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 0;
}
.rt-progress-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text);
}
.rt-progress-subtitle {
	font-size: 0.58rem;
	color: var(--faint);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.rt-progress-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	padding: 14px 16px;
}
/* ring */
.rt-ring-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.rt-ring {
	position: relative;
	width: 88px;
	height: 88px;
}
.rt-ring svg {
	width: 88px;
	height: 88px;
	transform: rotate(-90deg);
}
.rt-ring-track {
	fill: none;
	stroke-width: 8;
}
.rt-ring-fill {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.6s var(--ease);
}
.rt-ring-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rt-ring-pct {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}
.rt-ring-label {
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-top: 2px;
}
.rt-ring-sublabel {
	font-size: 0.55rem;
	color: var(--faint);
	margin-top: 2px;
}
/* right side */
.rt-progress-right {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* big bar */
.rt-main-bar-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rt-main-bar-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.rt-main-bar-lbl {
	font-size: 0.6rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
}
.rt-main-bar-count {
	font-size: 0.65rem;
	font-weight: 500;
}
.rt-main-track {
	height: 8px;
	border-radius: 4px;
	background: var(--bg2);
	overflow: hidden;
}
.rt-main-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.5s var(--ease);
}
/* category bars */
.rt-cats {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rt-cat-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.rt-cat-name {
	font-size: 0.56rem;
	color: var(--faint);
	min-width: 54px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.rt-cat-track {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--bg2);
	overflow: hidden;
}
.rt-cat-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.5s var(--ease);
}
.rt-cat-count {
	font-size: 0.56rem;
	color: var(--faint);
	min-width: 28px;
	text-align: right;
}
/* completion timeline strip */
.rt-timeline-strip {
	padding: 0 16px 14px;
}
.rt-strip-label {
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 6px;
}
.rt-strip-dots {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}
.rt-sdot {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	transition: all 0.2s;
	cursor: default;
	position: relative;
}
.rt-sdot.done {
	border-color: transparent;
}
.rt-sdot.skipped {
	opacity: 0.35;
}
/* status badge */
.rt-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 8px;
	border: 1px solid;
}
/* not-today notice */
.rt-not-today {
	padding: 10px 16px 14px;
	font-size: 0.6rem;
	color: var(--faint);
	font-style: italic;
	text-align: center;
}

/* MODAL */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: #00000088;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-backdrop.hidden {
	display: none;
}
.modal {
	background: var(--bg1);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 24px 60px #00000060;
}
.modal-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.modal-logo svg {
	width: 28px;
	height: 28px;
	color: var(--text);
}
.modal-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
}
.modal-sub {
	font-size: 0.62rem;
	color: var(--muted);
	line-height: 1.7;
	margin-bottom: 20px;
}
.modal-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}
.modal-step {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.step-num {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--border2);
	color: var(--text);
	font-size: 0.58rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.step-text {
	font-size: 0.63rem;
	color: var(--muted);
	line-height: 1.6;
}
.step-text a {
	color: var(--Sky);
	text-decoration: none;
}
.step-text a:hover {
	text-decoration: underline;
}
.modal-input-wrap {
	margin-bottom: 14px;
}
.modal-input-label {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 6px;
	display: block;
}
.modal-input {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.72rem;
	outline: none;
	transition: border-color 0.2s;
}
.modal-input:focus {
	border-color: var(--select);
}
.modal-input::placeholder {
	color: var(--faint);
}
.modal-btn {
	width: 100%;
	padding: 11px;
	border-radius: 8px;
	border: none;
	background: var(--select);
	color: #fff;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-bottom: 8px;
}
.modal-btn:hover {
	opacity: 0.85;
}
.modal-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.modal-btn-sec {
	width: 100%;
	padding: 9px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--muted);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}
.modal-btn-sec:hover {
	background: var(--hover);
	color: var(--text);
}
.modal-error {
	font-size: 0.62rem;
	color: var(--Crimson, #c07888);
	margin-bottom: 10px;
	display: none;
}
.modal-error.show {
	display: block;
}
.sync-indicator {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.55rem;
	color: var(--faint);
	margin-left: auto;
}
.sync-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--Moss);
}
.sync-dot.syncing {
	background: var(--Amber);
	animation: pulse 0.8s infinite;
}
.sync-dot.error {
	background: var(--Crimson);
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.rt-progress-bar-wrap {
	display: none;
}

.tcard {
	position: relative;
}
.tcard.done-block {
	opacity: 0.55;
}
.tcard.done-block .tcard-label {
	text-decoration: line-through;
}
.block-check {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 2px solid var(--border);
	background: var(--bg1);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	margin-right: 4px;
	color: var(--muted);
}
.block-check.checked {
	border-color: transparent;
}
.strip {
	display: flex;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
	margin-top: 28px;
}
.strip div {
	flex: 1;
}
.div {
	height: 1px;
	background: var(--border2);
	opacity: 0.25;
	margin: 24px 0;
}
.sect-label {
	font-size: 0.58rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 12px;
}
.bottom-nav {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg1);
	border-top: 1px solid var(--border2);
	z-index: 200;
	padding: 0 4px env(safe-area-inset-bottom, 0);
}
.bnav-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px 8px;
	border: none;
	background: transparent;
	color: var(--faint);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.5rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.18s;
	-webkit-tap-highlight-color: transparent;
}
.bnav-btn.active {
	color: var(--text);
}
.bnav-btn .bnav-icon {
	font-size: 1.1rem;
	transition: transform 0.2s var(--ease-spring);
}
.bnav-btn.active .bnav-icon {
	transform: scale(1.15);
}
@media (min-width: 700px) {
	.bottom-nav {
		display: none;
	}
	.topnav {
		padding: 14px 32px;
	}
	.page {
		padding: 28px 32px;
	}
	.main {
		padding: 0 0 40px;
	}
	.overview-grid {
		grid-template-columns: repeat(7, 1fr);
	}
	.stat-row {
		grid-template-columns: repeat(3, 1fr);
	}
	.diet-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.nav-tabs {
		display: flex;
	}
	.rt-progress-body {
		grid-template-columns: auto 1fr;
	}
}
@media (max-width: 699px) {
	.nav-tabs {
		display: none;
	}
	.topnav {
		padding: 10px 14px;
	}
	.logo-svg {
		width: 52px;
		height: 52px;
	}
	.page {
		padding: 14px;
	}
	.overview-grid {
		grid-template-columns: repeat(7, 1fr);
		gap: 4px;
	}
	.ov-card {
		padding: 7px 3px;
	}
	.ov-emoji {
		font-size: 0.9rem;
	}
	.ov-day {
		font-size: 0.46rem;
	}
	.ov-type {
		display: none;
	}
	.stat-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.stat-num {
		font-size: 1.4rem;
	}
	.toggle .tbtn {
		padding: 5px 9px;
		font-size: 0.55rem;
	}
	.habit-name {
		min-width: 90px;
		font-size: 0.58rem;
	}
	.hdot {
		width: 16px;
		height: 16px;
	}
	.ttag {
		display: none;
	}
	.tcard-label {
		font-size: 0.68rem;
	}
	.rt-progress-body {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.rt-ring-wrap {
		flex-direction: row;
		gap: 16px;
	}
	.rt-ring {
		width: 72px;
		height: 72px;
	}
	.rt-ring svg {
		width: 72px;
		height: 72px;
	}
	.rt-ring-pct {
		font-size: 1.15rem;
	}
}

/* ── HOMEWORK ── */
.hw-wrap {
	border-radius: 12px;
	padding: 14px 16px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 24px;
}
.hw-textarea {
	width: 100%;
	min-height: 110px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.7rem;
	line-height: 1.7;
	outline: none;
	resize: vertical;
	transition: border-color 0.2s;
}
.hw-textarea:focus {
	border-color: var(--select);
}
.hw-textarea::placeholder {
	color: var(--faint);
}
.hw-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.hw-save-btn {
	padding: 6px 18px;
	border-radius: 8px;
	border: 1px solid;
	background: transparent;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.62rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}
.hw-save-btn:hover {
	opacity: 0.75;
}
.hw-saved-msg {
	font-size: 0.6rem;
	color: var(--Moss);
	letter-spacing: 0.06em;
}

/* ── GYM ── */
.gym-header {
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gym-focus {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1rem;
	font-weight: 700;
}
.gym-day-badge {
	font-size: 0.56rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 8px;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
}
.gym-section {
	border-radius: 12px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 12px;
	overflow: hidden;
}
.gym-section-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border2);
}
.gym-section-icon {
	font-size: 0.95rem;
}
.gym-section-name {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text);
}
.gym-section-count {
	font-size: 0.56rem;
	color: var(--faint);
	margin-left: auto;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.gym-exercises {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.gym-ex-row {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border2);
	opacity: 0.92;
}
.gym-ex-row:last-child {
	border-bottom: none;
}
.gym-ex-top {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}
.gym-ex-names {
	flex: 1;
}
.gym-ex-name {
	font-size: 0.72rem;
	color: var(--text);
	line-height: 1.4;
}
.gym-ex-name-b {
	font-size: 0.68rem;
	color: var(--muted);
	line-height: 1.4;
	margin-top: 1px;
}
.gym-ss-badge {
	font-size: 0.5rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 5px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 2px;
	border: 1px solid;
}
.gym-ex-reps {
	font-size: 0.58rem;
	color: var(--faint);
	white-space: nowrap;
	flex-shrink: 0;
	padding-top: 2px;
}
.gym-sets {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.gym-set-dot {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	border: 1.5px solid var(--border2);
	background: var(--bg2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.58rem;
	color: var(--faint);
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}
.gym-set-dot.done {
	border-color: transparent;
	color: #fff;
}
.gym-set-dot:hover {
	transform: scale(1.08);
}
.gym-stretch-list {
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gym-stretch-item {
	font-size: 0.68rem;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 8px;
}
.gym-stretch-item::before {
	content: "—";
	color: var(--faint);
	font-size: 0.5rem;
}
.gym-core-list {
	padding: 4px 0;
}
.gym-core-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--border2);
}
.gym-core-row:last-child {
	border-bottom: none;
}
.gym-core-label {
	font-size: 0.68rem;
	color: var(--text);
	flex: 1;
	line-height: 1.4;
}
.gym-warmup-body {
	padding: 12px 14px;
	font-size: 0.68rem;
	color: var(--faint);
	font-style: italic;
	line-height: 1.7;
}
@media (min-width: 700px) {
	.gym-exercises {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
}

/* ── NOTIFICATIONS ───────────────────────────────────────── */
.notif-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: all 0.2s;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	flex-shrink: 0;
}
.notif-btn:hover {
	background: var(--bg2);
	color: var(--text);
}
.notif-btn.enabled {
	border-color: var(--Petal);
	color: var(--Petal);
	background: var(--Petal) 18;
}
.notif-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--Crimson);
	border: 2px solid var(--bg1);
	display: none;
}
.notif-badge.visible {
	display: block;
}
/* ── bottom sheet ── */
.notif-overlay {
	position: fixed;
	inset: 0;
	z-index: 450;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.notif-overlay.hidden {
	display: none;
}
.notif-scrim {
	position: absolute;
	inset: 0;
	background: #00000070;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.notif-sheet {
	position: relative;
	width: 100%;
	max-width: 500px;
	background: var(--bg1);
	border: 1px solid var(--border2);
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	padding: 20px 20px 32px;
	max-height: 88vh;
	overflow-y: auto;
	z-index: 1;
	box-shadow: 0 -16px 48px #00000044;
}
@media (min-width: 600px) {
	.notif-overlay {
		justify-content: center;
	}
	.notif-sheet {
		border-radius: 16px;
		border: 1px solid var(--border2);
		margin: 16px;
		max-height: 82vh;
		padding: 24px;
	}
}
.notif-handle {
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--border2);
	margin: 0 auto 18px;
}
.notif-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.notif-sheet-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}
.notif-sheet-close {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--faint);
	font-size: 0.9rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.notif-sheet-sub {
	font-size: 0.62rem;
	color: var(--muted);
	line-height: 1.7;
	margin-bottom: 18px;
}
/* ── toggle row ── */
.notif-toggle-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.notif-toggle-text {
	flex: 1;
}
.notif-toggle-label {
	font-size: 0.68rem;
	color: var(--text);
	font-weight: 500;
}
.notif-toggle-sub {
	font-size: 0.58rem;
	color: var(--faint);
	margin-top: 2px;
	line-height: 1.4;
}
.notif-switch {
	width: 40px;
	height: 23px;
	border-radius: 12px;
	background: var(--bg2);
	border: 1.5px solid var(--border2);
	cursor: pointer;
	transition:
		background 0.22s,
		border-color 0.22s;
	position: relative;
	flex-shrink: 0;
}
.notif-switch.on {
	background: var(--Petal);
	border-color: var(--Petal);
}
.notif-switch::after {
	content: "";
	position: absolute;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	top: 1px;
	left: 1px;
	transition: transform 0.22s;
	box-shadow: 0 1px 3px #0004;
}
.notif-switch.on::after {
	transform: translateX(17px);
}
/* ── lead time ── */
.notif-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 10px;
}
.notif-setting-label {
	font-size: 0.65rem;
	color: var(--muted);
}
.notif-select {
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.62rem;
	outline: none;
	cursor: pointer;
}
/* ── section label ── */
.notif-sec-label {
	font-size: 0.56rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 14px 0 6px;
}
/* ── upcoming list ── */
.notif-upcoming {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 14px;
}
.notif-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 7px;
	background: var(--bg2);
	font-size: 0.63rem;
}
.notif-item-time {
	color: var(--faint);
	min-width: 40px;
	font-size: 0.6rem;
	font-weight: 500;
	flex-shrink: 0;
}
.notif-item-label {
	flex: 1;
	color: var(--muted);
	line-height: 1.35;
}
.notif-item-tag {
	font-size: 0.52rem;
	padding: 1px 7px;
	border-radius: 5px;
	white-space: nowrap;
	border: 1px solid transparent;
	flex-shrink: 0;
}
.notif-item.done-item {
	opacity: 0.4;
}
.notif-empty {
	font-size: 0.63rem;
	color: var(--faint);
	text-align: center;
	padding: 16px 0;
	font-style: italic;
}
/* ── permission banner ── */
.notif-perm {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border-radius: 10px;
	border: 1px solid var(--Amber) 50;
	background: var(--Amber) 14;
	margin-bottom: 14px;
}
.notif-perm-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}
.notif-perm-text {
	flex: 1;
	font-size: 0.62rem;
	color: var(--muted);
	line-height: 1.5;
}
.notif-perm-btn {
	padding: 5px 12px;
	border-radius: 7px;
	border: 1px solid var(--Amber);
	background: transparent;
	color: var(--Amber);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.6rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.notif-perm-btn:hover {
	background: var(--Amber) 20;
}
.notif-denied {
	font-size: 0.6rem;
	color: var(--Crimson);
	padding: 8px 10px;
	border-radius: 7px;
	border: 1px solid var(--Crimson) 30;
	background: var(--Crimson) 10;
	margin-bottom: 12px;
}
/* ── hw section enhanced ── */
.hw-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 13px;
	border-radius: 9px;
	border: 1px solid var(--border2);
	background: var(--raised);
	margin-bottom: 8px;
}
.hw-item-text {
	flex: 1;
	font-size: 0.68rem;
	color: var(--text);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}
.hw-item-meta {
	font-size: 0.56rem;
	color: var(--faint);
	margin-top: 3px;
}
.hw-done-btn {
	padding: 4px 11px;
	border-radius: 6px;
	border: 1px solid var(--Moss);
	background: transparent;
	color: var(--Moss);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.58rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 1px;
	-webkit-tap-highlight-color: transparent;
}
.hw-done-btn:hover {
	background: var(--Moss) 20;
}
.hw-all-done {
	font-size: 0.62rem;
	color: var(--Moss);
	text-align: center;
	padding: 12px 0;
	font-style: italic;
}

/* ── TODO PAGE ─────────────────────────────────────────── */
.todo-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 10px;
}
.todo-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
}
.todo-stats {
	font-size: 0.58rem;
	color: var(--faint);
	letter-spacing: 0.06em;
}
/* filter pills */
.todo-filters {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.todo-fpill {
	padding: 4px 12px;
	border-radius: 10px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--muted);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.58rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.todo-fpill.active {
	background: var(--border2);
	color: var(--text);
}
/* add form */
.todo-add-card {
	border-radius: 14px;
	border: 1px solid var(--border2);
	background: var(--raised);
	padding: 16px;
	margin-bottom: 20px;
}
.todo-add-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 10px;
}
.todo-input {
	flex: 1;
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.72rem;
	outline: none;
	transition: border-color 0.2s;
	resize: none;
	min-height: 40px;
}
.todo-input:focus {
	border-color: var(--select);
}
.todo-input::placeholder {
	color: var(--faint);
}
.todo-add-btn {
	padding: 9px 16px;
	border-radius: 8px;
	border: none;
	background: var(--select);
	color: #fff;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.65rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.18s;
	white-space: nowrap;
	flex-shrink: 0;
}
.todo-add-btn:hover {
	opacity: 0.82;
}
.todo-add-btn:active {
	opacity: 0.7;
}
/* meta row inside add form */
.todo-meta-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
@media (max-width: 480px) {
	.todo-meta-row {
		grid-template-columns: 1fr 1fr;
	}
}
.todo-meta-label {
	font-size: 0.54rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 4px;
	display: block;
}
.todo-meta-select,
.todo-meta-input {
	width: 100%;
	padding: 6px 8px;
	border-radius: 7px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.64rem;
	outline: none;
	cursor: pointer;
	transition: border-color 0.2s;
}
.todo-meta-select:focus,
.todo-meta-input:focus {
	border-color: var(--select);
}
.todo-meta-input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(0.5);
}
/* task list */
.todo-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}
.todo-empty {
	text-align: center;
	padding: 36px 16px;
	font-size: 0.65rem;
	color: var(--faint);
	font-style: italic;
	border-radius: 12px;
	border: 1px dashed var(--border2);
}
/* individual task card */
.todo-card {
	border-radius: 12px;
	border: 1px solid var(--border2);
	background: var(--raised);
	padding: 12px 14px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	transition:
		opacity 0.2s,
		transform 0.15s;
}
.todo-card:hover {
	transform: translateY(-1px);
}
.todo-card.done-task {
	opacity: 0.45;
}
.todo-card.done-task .todo-task-text {
	text-decoration: line-through;
}
/* check circle */
.todo-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--border2);
	background: transparent;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	cursor: pointer;
	transition: all 0.18s;
	-webkit-tap-highlight-color: transparent;
	margin-top: 1px;
}
.todo-check.checked {
	border-color: transparent;
	color: #fff;
}
/* content */
.todo-card-body {
	flex: 1;
	min-width: 0;
}
.todo-task-text {
	font-size: 0.72rem;
	color: var(--text);
	line-height: 1.55;
	word-break: break-word;
	margin-bottom: 5px;
}
.todo-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.todo-priority-badge {
	font-size: 0.52rem;
	padding: 2px 8px;
	border-radius: 5px;
	border: 1px solid transparent;
	white-space: nowrap;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.todo-due-badge {
	font-size: 0.55rem;
	color: var(--faint);
	display: flex;
	align-items: center;
	gap: 3px;
}
.todo-due-badge.overdue {
	color: var(--Crimson);
}
.todo-due-badge.today {
	color: var(--Amber);
}
.todo-remind-badge {
	font-size: 0.52rem;
	color: var(--Petal);
	display: flex;
	align-items: center;
	gap: 3px;
}
/* action btns */
.todo-card-actions {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
	flex-direction: column;
	align-items: flex-end;
}
.todo-rm-btn {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--faint);
	font-size: 0.75rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.todo-rm-btn:hover {
	border-color: var(--Crimson);
	color: var(--Crimson);
	background: var(--Crimson) 14;
}
.todo-notif-btn {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--faint);
	font-size: 0.72rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.todo-notif-btn.has-notif {
	border-color: var(--Petal);
	color: var(--Petal);
	background: var(--Petal) 14;
}
/* ── inline time-picker popover on task cards ── */
.todo-time-popover {
	position: absolute;
	right: 0;
	top: 32px;
	z-index: 50;
	background: var(--bg1);
	border: 1px solid var(--border2);
	border-radius: 10px;
	padding: 10px 12px;
	box-shadow: 0 8px 24px #00000040;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 190px;
}
.todo-time-popover-label {
	font-size: 0.56rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
}
.todo-time-popover-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.todo-time-popover input[type="time"] {
	flex: 1;
	padding: 6px 8px;
	border-radius: 7px;
	border: 1px solid var(--border2);
	background: var(--bg2);
	color: var(--text);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.75rem;
	outline: none;
	transition: border-color 0.2s;
	min-width: 0;
}
.todo-time-popover input[type="time"]:focus {
	border-color: var(--select);
}
.todo-time-popover input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(0.5);
	cursor: pointer;
}
.todo-time-popover-set {
	padding: 5px 11px;
	border-radius: 6px;
	border: none;
	background: var(--select);
	color: #fff;
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s;
}
.todo-time-popover-set:hover {
	opacity: 0.82;
}
.todo-time-popover-cancel {
	padding: 5px 9px;
	border-radius: 6px;
	border: 1px solid var(--border2);
	background: transparent;
	color: var(--faint);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.6rem;
	cursor: pointer;
	transition: all 0.15s;
}
.todo-time-popover-cancel:hover {
	color: var(--text);
}
/* card needs position:relative for popover anchor */
.todo-card {
	position: relative;
}
/* section separator */
.todo-section-sep {
	font-size: 0.55rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 20px 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.todo-section-sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border2);
	opacity: 0.4;
}
/* progress mini bar */
.todo-progress-bar {
	height: 3px;
	border-radius: 2px;
	background: var(--bg2);
	overflow: hidden;
	margin-bottom: 18px;
}
.todo-progress-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.4s var(--ease);
}
/* remind-at display button (add form) */
.todo-remind-display {
	text-align: left;
	cursor: pointer;
	color: var(--faint);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
}
.todo-remind-display.has-time {
	color: var(--text);
}
/* due-date display button (add form) */
.todo-duedate-display {
	text-align: left;
	cursor: pointer;
	color: var(--faint);
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.todo-duedate-display.has-date {
	color: var(--text);
}

/* ── HEALTH PAGE ─────────────────────────────────────────── */
.health-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 0 14px;
}

.health-tip-card {
	border-radius: 14px;
	border: 1px solid var(--border2);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.15s ease;
}
.health-tip-card:hover {
	transform: translateY(-1px);
}

.health-tip-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.health-tip-icon {
	font-size: 1.2rem;
}
.health-tip-cat {
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.52rem;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 5px;
	border: 1px solid;
	text-transform: uppercase;
}
.health-tip-title {
	font-family: "Kosugi Maru", "ComicShannsMono Nerd Font", ui-sans-serif, sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.3;
}
.health-tip-text {
	font-size: 0.67rem;
	color: var(--muted);
	line-height: 1.65;
}
.health-tip-linked {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--border2);
}
.health-tip-link {
	font-family: "ComicShannsMono Nerd Font", "Kosugi Maru", ui-monospace, "Cascadia Code", "Fira Mono", monospace;
	font-size: 0.55rem;
	opacity: 0.8;
}

/* ── HEALTH TAB ──────────────────────────────────────────── */
.health-cat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 16px 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.health-cat-tabs::-webkit-scrollbar {
	display: none;
}

#page-health #health-cat-header,
#page-health .tips-grid {
	padding-left: 16px;
	padding-right: 16px;
}

/* linked routine/diet note under health tip cards */
.tip-link {
	font-size: 0.55rem;
	color: var(--faint);
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid var(--border2);
	line-height: 1.6;
	opacity: 0.75;
}

/* xref chip row inside health cards */
.tip-xref-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid var(--border2);
}
.tip-xref-chip {
	font-size: 0.5rem;
	padding: 2px 7px;
	border-radius: 5px;
	border: 1px solid;
	cursor: pointer;
	transition: opacity 0.15s;
	white-space: nowrap;
}
.tip-xref-chip:hover {
	opacity: 0.75;
}