/* Additional variables not in critical.css */
:root {
	--td: 200ms;
	--tl: #ff8a7a;
	--green: #3fb950;
	--green-bg: rgba(63, 185, 80, .12);
	--green-bd: rgba(63, 185, 80, .25);
	--yellow: #cca700;
	--yellow-bg: rgba(204, 167, 0, .1);
	--yellow-bd: rgba(204, 167, 0, .2);
	--yt: #cca700;
	--red: #f44747;
	--sh-sm: 0 1px 3px rgba(0, 0, 0, .25);
	--sh-md: 0 4px 12px rgba(0, 0, 0, .35);
	--sh-lg: 0 10px 40px rgba(0, 0, 0, .5)
}

html[data-theme="light"] {
	--tl: #e94b5c;
	--green: #2ea043;
	--green-bg: rgba(46, 160, 67, .1);
	--green-bd: rgba(46, 160, 67, .2);
	--yt: #bf8803;
	--yellow-bg: rgba(191, 136, 3, .1);
	--yellow-bd: rgba(191, 136, 3, .2);
	--red: #cd3131;
	--sh-sm: 0 1px 4px rgba(0, 0, 0, .08);
	--sh-md: 0 4px 12px rgba(0, 0, 0, .1);
	--sh-lg: 0 10px 40px rgba(0, 0, 0, .15)
}

html.thm {
	transition: background-color var(--td) ease
}

html.thm body,
html.thm .gh-header,
html.thm .gh-card,
html.thm .sticky-footer,
html.thm .section-toggle-btn,
html.thm .denom-row,
html.thm .denom-input,
html.thm .step-btn,
html.thm .roll-btn,
html.thm .badge,
html.thm .mode-toggle,
html.thm .mode-toggle-pill,
html.thm .icon-btn,
html.thm .btn-calc,
html.thm .progress-track,
html.thm .drawer-card,
html.thm .sheet,
html.thm .trend-card,
html.thm .breakdown-btn,
html.thm .share-btn,
html.thm .target-input {
	transition: background-color var(--td) ease, border-color var(--td) ease, box-shadow var(--td) ease !important
}

html.thm,
html.thm .gh-header-title,
html.thm .section-label,
html.thm .denom-label,
html.thm .denom-input,
html.thm .badge,
html.thm .mode-btn,
html.thm .step-btn,
html.thm .icon-btn,
html.thm .footer-total-label,
html.thm .footer-total-value,
html.thm .target-label-group,
html.thm .target-status,
html.thm .trend-title,
html.thm .trend-value,
html.thm .history-time,
html.thm .stat-pill-value,
html.thm .breakdown-val,
html.thm .pull-denom,
html.thm .pull-value,
html.thm .drop-amount {
	transition: color var(--td) ease !important
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield
}

body,
* {
	-ms-overflow-style: none;
	scrollbar-width: none
}

body.modal-open {
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	overscroll-behavior: none
}

::-webkit-scrollbar {
	display: none
}

body {
	font-family: var(--font);
	color: var(--t0);
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
	min-height: 100vh;
	min-height: 100dvh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility
}

button,
input {
	-webkit-tap-highlight-color: transparent
}

button {
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none
}

input,
textarea {
	user-select: text;
	-webkit-user-select: text
}

button:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-sm)
}

input:focus {
	outline: none
}

img,
svg,
.gh-logo,
.install-banner-icon,
.about-logo {
	-webkit-touch-callout: none;
	pointer-events: none
}

button svg,
button img {
	pointer-events: none
}

svg {
	display: inline-block;
	vertical-align: middle
}

.icon-11 { font-size: 11px }
.icon-13 { font-size: 13px }
.icon-14 { font-size: 14px }
.icon-15 { font-size: 15px }
.icon-16 { font-size: 16px }
.icon-17 { font-size: 17px }
.icon-18 { font-size: 18px }
.icon-19 { font-size: 19px }
.icon-22 { font-size: 22px }

/* .sk, .sk::after, @keyframes skShim, .sk-row-inline — defined in critical.css */

html[data-theme="light"] .sk-row-inline {
	background: var(--bg2)
}

/* .sk-row-inline::after — defined in critical.css */

html[data-theme="light"] .sk-row-inline::after {
	background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 50%, transparent 100%)
}

.sk-scene {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.sk-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	overflow: hidden
}

.sk-card-header {
	background: var(--bg2);
	border-bottom: 1px solid var(--bd);
	height: 52px
}

.sk-card-body {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px
}

.sk-footer-ph {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg1);
	border-top: 1px solid var(--bd);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	z-index: 20
}

html[data-theme="light"] .sk::after {
	background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 50%, transparent 100%)
}

html[data-theme="light"] .sk {
	background: var(--bg2)
}

.app-reveal {
	animation: appRevealIn .5s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes appRevealIn {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(.98);
		filter: blur(3px)
	}
	60% {
		opacity: 1;
		filter: blur(0)
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0)
	}
}

@media(prefers-reduced-motion:reduce) {
	.app-reveal {
		animation: none !important
	}
}

.sk-hd {
	height: 44px;
	margin-bottom: 8px
}

.sk-row {
	height: 54px;
	margin-bottom: 4px
}

.sk-wrap {
	animation: skFadeIn .18s ease both
}

@keyframes skFadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.gh-header {
	background: rgba(37, 37, 38, .78);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	padding: 12px 16px;
	margin-top: -20px;
	padding-top: calc(32px + env(safe-area-inset-top));
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	will-change: transform;
	transform: translateZ(0);
	contain: layout style
}

html[data-theme="light"] .gh-header {
	background: rgba(243, 243, 243, .78);
	border-bottom-color: rgba(0, 0, 0, .1)
}

.gh-header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0
}

.gh-logo {
	width: 34px;
	height: 34px;
	background: transparent;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0
}

.gh-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

.gh-header-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--t0);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.gh-header-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	position: relative;
	z-index: 1
}

.icon-btn {
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--t1);
	font-size: 0;
	transition: background-color .15s ease, color .15s ease;
	-webkit-touch-callout: none
}

.icon-btn:hover {
	background: rgba(120, 120, 128, .12);
	color: var(--t0)
}

.icon-btn:active {
	background: rgba(120, 120, 128, .18);
	color: var(--t0);
	transition: background-color 0s
}

.icon-btn .header-icon {
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
	will-change: transform
}

.icon-btn:active .header-icon {
	transform: rotate(-15deg) scale(.9);
	transition: transform 0s
}

.header-icon.theme-spin {
	animation: themeSpin .4s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes themeSpin {
	0% { transform: rotate(0deg); opacity: .6 }
	50% { transform: rotate(-180deg); opacity: 1 }
	100% { transform: rotate(0deg); opacity: 1 }
}

.icon-btn.is-active {
	background: var(--brand-bg);
	color: var(--brand)
}

.gh-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: none
}

.section-toggle-btn {
	width: 100%;
	background: var(--bg2);
	border: none;
	border-bottom: 1px solid var(--bd);
	padding: 11px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1;
	user-select: none;
	-webkit-user-select: none
}

.section-toggle-btn.pressing {
	background: var(--bg3)
}

.section-toggle-left {
	display: flex;
	align-items: center;
	gap: 8px
}

.section-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--t1)
}

.badge {
	font-size: 13px;
	font-weight: 700;
	background: var(--bg0);
	border: none;
	border-radius: 20px;
	padding: 3px 10px;
	color: var(--t1);
	font-variant-numeric: tabular-nums
}

.section-toggle-right {
	display: flex;
	align-items: center;
	gap: 8px
}

.sec-chev {
	color: var(--t2);
	flex-shrink: 0;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1)
}

.sec-chev.open {
	transform: rotate(180deg)
}

.mode-toggle-wrap {
	position: relative;
	z-index: 2
}

.section-body-wrap {
	overflow: hidden;
	transition: max-height .35s cubic-bezier(.34, 1.1, .64, 1), opacity .25s ease
}

.section-body-wrap.closed {
	opacity: 0
}


.mode-toggle {
	display: flex;
	position: relative;
	background: var(--bg0);
	border: none;
	border-radius: var(--r-sm);
	padding: 3px;
	flex-shrink: 0
}

.mode-toggle-pill {
	position: absolute;
	top: 3px;
	bottom: 3px;
	background: var(--brand);
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	transition: left .2s cubic-bezier(.4, 0, .2, 1), width .2s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
	z-index: 0
}

.mode-btn {
	position: relative;
	z-index: 1;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 5px;
	cursor: pointer;
	border: none;
	background: transparent;
	min-height: 30px;
	transition: color .2s ease;
	color: var(--t2)
}

.mode-btn.active {
	color: #fff
}

.tap-hint {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 9px;
	font-weight: 700;
	color: var(--brand);
	background: var(--brand-bg);
	border: 1px solid var(--brand-bd);
	border-radius: 4px;
	padding: 2px 6px;
	pointer-events: none;
	white-space: nowrap;
	letter-spacing: .3px;
	display: flex;
	align-items: center;
	gap: 3px
}

.denom-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--r-md);
	min-height: 56px;
	transition: background-color .18s ease, outline-color .18s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
	animation: denomRowIn .35s cubic-bezier(.34, 1.4, .64, 1) both;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none
}

.denom-row:nth-child(1) { animation-delay: .02s }
.denom-row:nth-child(2) { animation-delay: .05s }
.denom-row:nth-child(3) { animation-delay: .08s }
.denom-row:nth-child(4) { animation-delay: .11s }
.denom-row:nth-child(5) { animation-delay: .14s }
.denom-row:nth-child(6) { animation-delay: .17s }
.denom-row:nth-child(7) { animation-delay: .20s }
.denom-row:nth-child(8) { animation-delay: .23s }

@keyframes denomRowIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(.98)
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

.denom-row.has-value {
	background: var(--green-bg);
	outline: 1px solid var(--green-bd);
	box-shadow: 0 0 0 0 rgba(63, 185, 80, 0);
	animation: denomRowIn .35s cubic-bezier(.34, 1.4, .64, 1) both
}

@keyframes rowValuePulse {
	0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .2) }
	50% { box-shadow: 0 0 0 4px rgba(63, 185, 80, .1) }
	100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0) }
}

.denom-row * {
	user-select: none;
	-webkit-user-select: none
}

.denom-row .denom-input {
	user-select: text;
	-webkit-user-select: text
}

.denom-row:not(.has-value):hover {
	background: var(--bg2)
}

.denom-label {
	width: 40px;
	text-align: center;
	font-size: 14px;
	pointer-events: none;
	font-weight: 800;
	color: var(--t1);
	flex-shrink: 0
}

.denom-label.active {
	color: var(--green)
}

.denom-input-wrap {
	position: relative;
	flex: 1;
	min-width: 0
}

.denom-prefix {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	font-weight: 600;
	color: var(--t2);
	pointer-events: none;
	user-select: none
}

.denom-input {
	width: 100%;
	background: var(--bg0);
	border: none;
	border-radius: var(--r-sm);
	height: 42px;
	padding: 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--t0);
	font-variant-numeric: tabular-nums;
	cursor: text;
	transition: background-color .18s ease, box-shadow .18s ease
}

.denom-input.has-prefix {
	padding-left: 26px
}

.denom-input:focus {
	background: var(--bg1);
	box-shadow: 0 0 0 3px var(--brand-bg)
}

.denom-input::placeholder {
	color: var(--t1);
	font-weight: 500;
	opacity: .7
}

.row-sub-inline {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	color: var(--t2);
	pointer-events: none;
	user-select: none;
	font-variant-numeric: tabular-nums;
	max-width: 52px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--bg0);
	padding-left: 2px
}

@media(max-width:380px) {
	.row-sub-inline {
		display: none
	}
}

.roll-input-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 56px
}

.roll-input-label {
	font-size: 9px;
	font-weight: 800;
	color: var(--t2);
	text-transform: uppercase;
	letter-spacing: .4px
}

.roll-input {
	width: 56px;
	height: 32px;
	background: var(--bg0);
	border: none;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 700;
	color: var(--t0);
	text-align: center;
	font-variant-numeric: tabular-nums
}

.roll-input:focus {
	background: var(--bg1);
	box-shadow: 0 0 0 3px var(--brand-bg)
}

.stepper {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
	align-items: stretch
}

.step-btn {
	width: 48px;
	min-height: 48px;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--t1);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	position: relative;
	transition: background-color .15s ease, color .15s ease, transform .12s cubic-bezier(.34, 1.56, .64, 1), box-shadow .12s ease
}

.step-btn::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: calc(var(--r-sm) + 6px)
}

.step-btn:active {
	transform: scale(.78);
	background: var(--bg3);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
	transition: transform 0s, box-shadow 0s, background-color 0s
}

.step-btn.plus.active {
	border-color: var(--green-bd);
	color: var(--green)
}

.step-btn.repeating {
	box-shadow: 0 0 0 2px var(--brand-bd)
}

.roll-btn {
	width: 64px;
	height: auto;
	min-height: 48px;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	cursor: pointer;
	color: var(--brand);
	padding: 0 8px;
	touch-action: manipulation;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
	flex-shrink: 0;
	align-self: stretch
}

.roll-btn:active {
	transform: scale(.94);
	box-shadow: none;
	transition: transform 0s, box-shadow 0s
}

.roll-btn.roll-holding {
	background: rgba(248, 81, 73, .12);
	border-color: rgba(248, 81, 73, .4);
	color: var(--red)
}

.roll-btn-icons {
	display: flex;
	align-items: center;
	gap: 2px
}

.roll-btn-label {
	font-size: 10px;
	font-weight: 700;
	opacity: .9;
	letter-spacing: .1px;
	white-space: nowrap;
	line-height: 1
}

.roll-btn-count {
	font-size: 11px;
	font-weight: 800;
	color: var(--green);
	line-height: 1;
	font-variant-numeric: tabular-nums
}

.sticky-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #252526;
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	z-index: 20;
	box-shadow: none;
	will-change: transform;
	transform: translateZ(0);
	transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.55, .64, 1)
}

html[data-theme="light"] .sticky-footer {
	background: #f3f3f3;
	border-top-color: rgba(0, 0, 0, .12)
}

.sticky-footer.keyboard-up {
	opacity: 0;
	transform: translateY(110%);
	pointer-events: none;
	transition: opacity .15s ease, transform .2s cubic-bezier(.4, 0, .2, 1)
}

.footer-floor {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--bg1);
	z-index: 19;
	pointer-events: none
}


.footer-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px
}

.footer-total-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--t1);
	margin-bottom: 2px
}

.footer-total-value {
	font-size: 30px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t0);
	line-height: 1.1;
	transition: color .3s ease
}

.footer-total-wrap.replay .footer-total-value {
	animation: totalReveal .4s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes totalReveal {
	0% { transform: scale(.92); opacity: .6 }
	50% { transform: scale(1.04) }
	100% { transform: scale(1); opacity: 1 }
}

.footer-total-value.over {
	color: var(--green)
}

.btn-calc {
	width: 100%;
	height: 52px;
	background: var(--green);
	border: none;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	border-radius: var(--r-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	box-shadow: none;
	transition: background-color .15s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease
}

.btn-calc:hover {
	opacity: .88
}

.btn-calc:active {
	transform: scale(.97);
	opacity: .75;
	transition: transform 0s, opacity 0s
}

.target-row {
	margin-top: 0
}

.target-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7px
}

.target-label-group {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--t1)
}

.target-input {
	width: 68px;
	background: var(--bg0);
	border: none;
	border-radius: var(--r-sm);
	padding: 4px 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--t0);
	font-variant-numeric: tabular-nums;
	height: 32px
}

.target-input:focus {
	box-shadow: 0 0 0 3px var(--brand-bg)
}

.target-status {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-variant-numeric: tabular-nums
}

.target-status.over {
	color: var(--green)
}

.target-status.under {
	color: var(--t2)
}

.progress-wrap {
	position: relative
}

.progress-track {
	height: 22px;
	background: var(--bg3);
	border-radius: 99px;
	overflow: hidden;
	position: relative
}

.progress-fill {
	position: absolute;
	inset: 0;
	right: auto;
	border-radius: 99px;
	background: var(--brand);
	transition: width .6s cubic-bezier(.4, 0, .2, 1), background .3s ease
}

.progress-fill.over {
	background: var(--green)
}

.progress-flag {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: flex;
	align-items: center;
	z-index: 2
}

.progress-flag-tag {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .25px;
	white-space: nowrap;
	background: #d4a017;
	color: #1a1000;
	border-radius: 99px;
	padding: 2px 8px;
	line-height: 1.4;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 0 1.5px rgba(255, 255, 255, .12);
	overflow: hidden
}

html[data-theme="light"] .progress-flag-tag {
	background: #d97706;
	color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 0 0 1.5px rgba(0, 0, 0, .08)
}

@keyframes flagPulse {

	0%,
	100% {
		box-shadow: 0 0 6px 2px rgba(212, 160, 23, .4), 0 0 0 1.5px rgba(255, 255, 255, .12)
	}

	50% {
		box-shadow: 0 0 10px 4px rgba(255, 220, 80, .5), 0 0 0 2px rgba(255, 220, 80, .3)
	}
}

.back-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--t1);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	min-height: 44px;
	touch-action: manipulation
}

.back-btn:hover {
	color: var(--t0)
}

.back-btn:active {
	opacity: .65;
	transition: opacity 0s
}

.rc {
	animation: rcIn .5s cubic-bezier(.22, 1, .36, 1) both
}

.rc:nth-child(2) {
	animation-delay: .1s
}

.rc:nth-child(3) {
	animation-delay: .2s
}

.rc:nth-child(4) {
	animation-delay: .28s
}

@keyframes rcIn {
	0% {
		opacity: 0;
		transform: translateY(32px) scale(.92);
		filter: blur(4px)
	}
	60% {
		opacity: 1;
		filter: blur(0px)
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0px)
	}
}

.pull-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	padding: 10px 14px;
	min-height: 52px;
	animation: prIn .45s cubic-bezier(.22, 1, .36, 1) both;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none
}

.pull-row * {
	user-select: none;
	-webkit-user-select: none
}

.pull-row:nth-child(1) {
	animation-delay: .06s
}

.pull-row:nth-child(2) {
	animation-delay: .12s
}

.pull-row:nth-child(3) {
	animation-delay: .18s
}

.pull-row:nth-child(4) {
	animation-delay: .24s
}

.pull-row:nth-child(5) {
	animation-delay: .30s
}

.pull-row:nth-child(6) {
	animation-delay: .36s
}

@keyframes prIn {
	0% {
		opacity: 0;
		transform: translateX(-18px) scale(.95)
	}
	60% {
		opacity: 1;
		transform: translateX(3px) scale(1.01)
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1)
	}
}

.drop-hero {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: none;
	animation: dropHeroIn .6s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes dropHeroIn {
	0% {
		opacity: 0;
		transform: translateY(40px) scale(.88);
		filter: blur(6px)
	}
	50% {
		opacity: 1;
		filter: blur(0px)
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0px)
	}
}

.drop-hero-top {
	padding: 18px 16px 14px;
	border-bottom: 1px solid var(--bd);
	background: var(--bg2)
}

.drop-eyebrow {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--t1);
	margin-bottom: 6px;
	animation: dropTextIn .4s .15s cubic-bezier(.22, 1, .36, 1) both
}

.drop-sub {
	animation: dropTextIn .4s .3s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes dropTextIn {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes dropAmountIn {
	0% {
		opacity: 0;
		transform: scale(.8) translateY(8px);
		filter: blur(2px)
	}
	70% {
		opacity: 1;
		transform: scale(1.03) translateY(-2px);
		filter: blur(0)
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: blur(0)
	}
}

.drop-amount {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	color: var(--t0);
	font-variant-numeric: tabular-nums;
	letter-spacing: -1px;
	animation: dropAmountIn .55s .2s cubic-bezier(.22, 1, .36, 1) both
}

.drop-sub {
	font-size: 12px;
	color: var(--t1);
	margin-top: 6px;
	font-variant-numeric: tabular-nums
}

.pull-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--t1);
	margin-bottom: 10px;
	animation: dropTextIn .35s .12s cubic-bezier(.22, 1, .36, 1) both
}

.pull-row-left {
	display: flex;
	align-items: center;
	gap: 10px
}

.pull-count {
	width: 32px;
	height: 32px;
	background: var(--green-bg);
	border: 1px solid var(--green-bd);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: var(--green)
}

.pull-times {
	font-size: 12px;
	color: var(--t2)
}

.pull-denom {
	font-size: 22px;
	font-weight: 800;
	color: var(--t0)
}

.pull-value {
	font-size: 18px;
	font-weight: 800;
	color: var(--green);
	font-variant-numeric: tabular-nums
}

.empty-state {
	text-align: center;
	padding: 32px 16px;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm)
}

.empty-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--green-bg);
	border: 1px solid var(--green-bd);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	color: var(--green)
}

.perfect-state {
	text-align: center;
	padding: 28px 16px 24px;
	background: var(--yellow-bg);
	border: 1px solid var(--yellow-bd);
	border-radius: var(--r-sm);
	animation: perfectIn .35s cubic-bezier(.34, 1.4, .64, 1) both
}

@keyframes perfectIn {
	from {
		opacity: 0;
		transform: scale(.96)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.perfect-emoji {
	font-size: 32px;
	line-height: 1;
	margin-bottom: 10px;
	display: block
}

.perfect-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--yt);
	margin-bottom: 5px
}

.perfect-sub {
	font-size: 13px;
	color: var(--yt);
	opacity: .75;
	line-height: 1.5
}

.warn-banner {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--yellow-bg);
	border: 1px solid var(--yellow-bd);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	margin-top: 10px
}

.warn-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 1px;
	background: rgba(210, 153, 34, .2);
	border: 1px solid var(--yellow-bd);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	color: var(--yt)
}

.warn-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--yt)
}

.warn-body {
	font-size: 12px;
	color: var(--yt);
	opacity: .7;
	margin-top: 3px
}

.drawer-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: none
}

.drawer-header {
	background: var(--bg2);
	border-bottom: 1px solid var(--bd);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.drawer-total {
	font-size: 32px;
	font-weight: 800;
	color: var(--t0);
	font-variant-numeric: tabular-nums;
	line-height: 1
}

.breakdown-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--t1);
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	padding: 8px 14px;
	min-height: 44px;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1)
}

.breakdown-btn:hover {
	background: var(--bg3);
	color: var(--t0)
}

.breakdown-btn:active {
	transform: scale(.93);
	transition: transform 0s
}

.breakdown-chev {
	transition: transform .25s cubic-bezier(.4, 0, .2, 1)
}

.breakdown-chev.open {
	transform: rotate(180deg)
}

.breakdown-collapse {
	overflow: hidden;
	transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .28s ease
}

.breakdown-collapse.closed {
	opacity: 0;
	max-height: 0 !important
}

.breakdown-body {
	padding: 18px 20px
}

.breakdown-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--t1);
	border-bottom: 1px solid var(--bd);
	padding-bottom: 10px;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
	align-items: baseline
}

.breakdown-subtotal {
	font-weight: 700;
	color: var(--green);
	font-size: 13px;
	font-variant-numeric: tabular-nums
}

.breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--bd-s);
	min-height: 48px
}

.breakdown-row:last-child {
	border-bottom: none
}

.breakdown-left {
	display: flex;
	align-items: center;
	gap: 12px
}

.chip-bill {
	height: 28px;
	min-width: 48px;
	padding: 0 10px;
	background: var(--bg3);
	border: none;
	border-radius: var(--r-sm);
	font-size: 12px;
	font-weight: 700;
	color: var(--t1);
	display: flex;
	align-items: center;
	justify-content: center
}

.chip-coin {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bg3);
	border: none;
	font-size: 10px;
	font-weight: 700;
	color: var(--t1);
	display: flex;
	align-items: center;
	justify-content: center
}

.breakdown-count {
	font-size: 13px;
	color: var(--t2)
}

.breakdown-val {
	font-size: 16px;
	font-weight: 800;
	color: var(--green);
	font-variant-numeric: tabular-nums
}

.breakdown-empty {
	font-size: 13px;
	font-style: italic;
	color: var(--t2);
	text-align: center;
	padding: 16px 0
}

.sheet-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 50;
	display: flex;
	align-items: flex-end;
	overscroll-behavior: none;
	backdrop-filter: blur(4px);
	animation: bdIn .22s ease both
}

.sheet-backdrop.closing {
	animation: bdOut .26s ease both
}

html[data-theme="light"] .sheet-backdrop {
	background: rgba(0, 0, 0, .3)
}

@keyframes bdIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes bdOut {
	from {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

.sheet {
	background: #252526;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	border-radius: 18px 18px 0 0;
	border: 1px solid rgba(255, 255, 255, .06);
	border-bottom: none;
	box-shadow: 0 -4px 30px rgba(0, 0, 0, .4);
	animation: shUp .32s cubic-bezier(.34, 1.15, .64, 1);
	overscroll-behavior: contain;
	touch-action: pan-y;
	will-change: transform;
	transition: transform .12s ease
}

html[data-theme="light"] .sheet {
	background: #ffffff;
	border-color: rgba(0, 0, 0, .12);
	box-shadow: 0 -4px 30px rgba(0, 0, 0, .12)
}

.sheet-backdrop.closing .sheet {
	animation: shDown .26s cubic-bezier(.4, 0, .8, 1) both
}

.sheet.scrollable {
	max-height: 82vh;
	display: flex;
	flex-direction: column
}

@keyframes shUp {
	0% {
		transform: translateY(100%);
		opacity: 0
	}
	60% {
		transform: translateY(-2%);
		opacity: 1
	}
	100% {
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes shDown {
	from {
		transform: translateY(0);
		opacity: 1
	}

	to {
		transform: translateY(100%);
		opacity: 0
	}
}

.sheet-handle {
	display: flex;
	justify-content: center;
	padding: 12px 0 4px
}

.sheet-handle-bar {
	width: 36px;
	height: 4px;
	background: var(--bg3);
	border-radius: 99px
}

.sheet-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 14px;
	border-bottom: 1px solid var(--bd)
}

.sheet-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--t1)
}

.sheet-body {
	overflow-y: auto;
	flex: 1;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch
}

.history-search-wrap {
	padding: 10px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid var(--bd-s)
}

.history-search-row {
	position: relative;
	display: flex;
	align-items: center
}

.history-search-icon {
	position: absolute;
	left: 10px;
	color: var(--t2);
	pointer-events: none;
	flex-shrink: 0
}

.history-search-input {
	width: 100%;
	background: var(--bg0);
	border: none;
	border-radius: var(--r-sm);
	height: 38px;
	padding: 0 32px 0 34px;
	font-size: 14px;
	font-weight: 500;
	color: var(--t0);
	user-select: text;
	-webkit-user-select: text
}

.history-search-input:focus {
	background: var(--bg1);
	box-shadow: 0 0 0 3px var(--brand-bg)
}

.history-search-input::placeholder {
	color: var(--t2)
}

.history-search-clear {
	position: absolute;
	right: 6px;
	width: 24px;
	height: 24px;
	border: none;
	background: var(--bg3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--t1)
}

.history-search-clear:active {
	transform: scale(.88);
	transition: transform 0s
}

.history-filter-chips {
	display: flex;
	gap: 6px;
	padding-bottom: 10px;
	overflow-x: auto
}

.history-filter-chip {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	border-radius: 20px;
	padding: 4px 12px;
	cursor: pointer;
	border: none;
	background: var(--bg2);
	color: var(--t1);
	white-space: nowrap;
	transition: background-color .12s, color .12s
}

.history-filter-chip.active {
	background: var(--brand);
	color: #fff
}

.history-filter-chip:active {
	transform: scale(.93);
	transition: transform 0s
}

.history-results-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--t2);
	padding: 8px 16px 0;
	text-transform: uppercase;
	letter-spacing: .5px
}

.history-list {
	padding: 8px 16px
}

.history-list .swipeable-row:last-child {
	margin-bottom: 0
}

.history-entry {
	padding: 14px 16px;
	border: none;
	border-radius: var(--r-md);
	margin-bottom: 8px;
	background: var(--bg1);
	box-shadow: var(--sh-sm);
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none
}

.history-entry * {
	user-select: none;
	-webkit-user-select: none
}

.history-entry.record {
	background: rgba(210, 153, 34, .06);
	border-color: var(--yt)
}

.history-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px
}

.history-time {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--t2)
}

.history-target {
	font-size: 11px;
	font-weight: 700;
	color: var(--t2);
	font-variant-numeric: tabular-nums
}

.record-badge {
	font-size: 9px;
	font-weight: 800;
	background: var(--yellow-bg);
	border: 1px solid var(--yellow-bd);
	color: var(--yt);
	border-radius: 3px;
	padding: 2px 6px;
	letter-spacing: .3px;
	text-transform: uppercase
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 10px
}

.stat-pill {
	border-radius: var(--r-sm);
	padding: 9px 10px;
	text-align: center;
	border: none
}

.stat-pill.neutral {
	background: var(--bg2)
}

.stat-pill.green {
	background: var(--green-bg);
	border-color: var(--green-bd)
}

.stat-pill.dark {
	background: var(--bg0)
}

.stat-pill-label {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--t2);
	margin-bottom: 3px
}

.stat-pill-value {
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--t0)
}

.stat-pill.green .stat-pill-value {
	color: var(--green)
}

.history-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px
}

.history-chip {
	font-size: 11px;
	font-weight: 700;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	padding: 3px 9px;
	color: var(--t1)
}

.history-empty {
	text-align: center;
	padding: 70px 20px;
	color: var(--t1)
}

.clear-btn {
	font-size: 14px;
	font-weight: 700;
	color: var(--red);
	cursor: pointer;
	border: none;
	background: transparent;
	min-height: 44px;
	padding: 0 4px;
	border-radius: var(--r-sm);
	transition: background-color .2s ease, color .2s ease
}

.clear-btn.confirming {
	background: var(--red);
	color: #fff
}

.history-trends {
	padding: 14px 16px;
	border-bottom: 1px solid var(--bd-s);
	display: flex;
	flex-direction: column;
	gap: 10px
}

.trend-card {
	background: var(--bg1);
	border: none;
	border-radius: var(--r-md);
	padding: 14px 16px;
	overflow: visible;
	position: relative
}

.trend-card-wide {
	padding-bottom: 8px
}

.trend-card-wide .sparkline {
	height: 80px;
	margin-top: 4px
}

.trend-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.trend-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--t2)
}

.trend-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--t0);
	margin: 4px 0 6px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.3px
}

.trend-card-wide .trend-value {
	font-size: 24px
}

.trend-value.up {
	color: var(--green)
}

.trend-value.down {
	color: var(--red)
}

.sparkline {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible
}

.sparkline-dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: dotPulse 2.4s ease-in-out infinite
}

.settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bd-s);
	min-height: 60px
}

.settings-row:last-child {
	border-bottom: none
}

.settings-row:active {
	background: var(--bg2)
}

.settings-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--t0)
}

.settings-sub {
	font-size: 12px;
	color: var(--t1);
	margin-top: 2px
}

.settings-action {
	font-size: 14px;
	font-weight: 600;
	color: var(--tl);
	background: none;
	border: none;
	cursor: pointer;
	min-height: 44px;
	padding: 0 4px
}

.toggle-track {
	width: 51px;
	height: 28px;
	border-radius: 99px;
	cursor: pointer;
	border: none;
	padding: 3px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	transition: background .2s ease
}

.toggle-track.on {
	background: var(--green)
}

.toggle-track.off {
	background: var(--bg3)
}

.toggle-thumb {
	width: 22px;
	height: 22px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	transition: transform .22s cubic-bezier(.34, 1.56, .64, 1)
}

.toggle-track.on .toggle-thumb {
	transform: translateX(23px)
}

.toggle-track.off .toggle-thumb {
	transform: translateX(0)
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	backdrop-filter: blur(6px);
	animation: bdIn .2s ease
}

.modal-card {
	background: #2d2d2d;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 20px;
	padding: 28px 24px;
	width: 100%;
	max-width: 320px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	animation: modalBounce .4s cubic-bezier(.34, 1.56, .64, 1)
}

html[data-theme="light"] .modal-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, .12);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .18)
}

@keyframes modalBounce {
	0% {
		transform: scale(.88) translateY(20px);
		opacity: 0
	}
	100% {
		transform: scale(1) translateY(0);
		opacity: 1
	}
}

@keyframes slUp {
	from {
		transform: translateY(30px);
		opacity: 0
	}

	to {
		transform: translateY(0);
		opacity: 1
	}
}

.modal-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--t0);
	margin-bottom: 8px;
	text-align: center
}

.modal-body {
	font-size: 13px;
	color: var(--t1);
	line-height: 1.6;
	text-align: center;
	margin-bottom: 22px
}

.modal-actions {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.modal-btn {
	width: 100%;
	height: 46px;
	border-radius: var(--r-md);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	border: none
}

.modal-btn.danger {
	background: var(--red);
	border-color: transparent;
	color: #fff
}

.modal-btn.danger:hover {
	opacity: .88
}

.modal-btn.cancel {
	background: var(--bg2);
	color: var(--t1)
}

.modal-btn.cancel:hover {
	background: var(--bg3);
	color: var(--t0)
}

.modal-btn:active {
	transform: scale(.97);
	transition: transform 0s
}

.about-logo {
	width: 64px;
	height: 64px;
	background: transparent;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin: 0 auto 14px
}

.about-tagline {
	font-size: 15px;
	font-style: italic;
	color: var(--brand);
	font-weight: 600;
	margin-bottom: 6px;
	text-align: center
}

.about-credit {
	font-size: 13px;
	color: var(--t1);
	text-align: center;
	line-height: 1.6
}

.changelog-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	padding: 0;
	width: 100%;
	max-width: 360px;
	box-shadow: var(--sh-lg);
	animation: slUp .3s cubic-bezier(.34, 1.3, .64, 1);
	display: flex;
	flex-direction: column;
	max-height: min(560px, 80vh)
}

.changelog-header {
	padding: 22px 24px 14px;
	border-bottom: 1px solid var(--bd);
	flex-shrink: 0
}

.changelog-icon-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px
}

.changelog-logo {
	width: 36px;
	height: 36px;
	background: transparent;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	overflow: hidden
}

.changelog-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

.changelog-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--t0)
}

.changelog-subtitle {
	font-size: 12px;
	color: var(--t1);
	margin-top: 1px
}

.changelog-body {
	overflow-y: auto;
	flex: 1;
	padding: 8px 0;
	-webkit-overflow-scrolling: touch
}

.changelog-commit {
	padding: 14px 24px;
	border-bottom: 1px solid var(--bd-s)
}

.changelog-commit:last-child {
	border-bottom: none
}

.changelog-commit-msg {
	font-size: 14px;
	font-weight: 600;
	color: var(--t0);
	line-height: 1.45;
	margin-bottom: 4px
}

.changelog-commit-body {
	font-size: 12px;
	color: var(--t1);
	line-height: 1.6;
	margin-bottom: 8px
}

.cl-md-p {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--t1);
	line-height: 1.6
}

.cl-md-p:last-child {
	margin-bottom: 0
}

.cl-md-heading {
	font-size: 12px;
	font-weight: 700;
	color: var(--t0);
	margin: 8px 0 3px;
	text-transform: uppercase;
	letter-spacing: .4px
}

.cl-md-list {
	margin: 4px 0 6px;
	padding-left: 16px;
	font-size: 12px;
	color: var(--t1);
	line-height: 1.7
}

.cl-md-list:last-child {
	margin-bottom: 0
}

.cl-md-code {
	font-family: monospace;
	font-size: 11px;
	background: var(--bg2);
	border: 1px solid var(--bd);
	border-radius: 3px;
	padding: 1px 5px;
	color: var(--t0)
}

.changelog-commit-meta {
	display: flex;
	align-items: center;
	gap: 8px
}

.changelog-sha {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--brand);
	background: var(--brand-bg);
	border: 1px solid var(--brand-bd);
	border-radius: 4px;
	padding: 1px 6px;
	font-family: monospace
}

.changelog-date {
	font-size: 11px;
	color: var(--t2)
}

.changelog-latest-badge {
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	background: var(--green-bg);
	border: 1px solid var(--green-bd);
	color: var(--green);
	border-radius: 4px;
	padding: 2px 6px
}

.changelog-footer {
	padding: 14px 24px;
	border-top: 1px solid var(--bd);
	flex-shrink: 0
}

.changelog-hide-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px
}

.changelog-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--brand);
	cursor: pointer;
	flex-shrink: 0
}

.changelog-hide-label {
	font-size: 13px;
	color: var(--t1);
	cursor: pointer;
	user-select: none;
	line-height: 1.4
}

.changelog-close-btn {
	width: 100%;
	height: 44px;
	background: var(--brand);
	border: none;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background .15s ease, transform .1s ease
}

.changelog-close-btn:hover {
	background: var(--brand-h)
}

.changelog-close-btn:active {
	transform: scale(.97);
	transition: transform 0s
}

.changelog-loading {
	padding: 40px 24px;
	text-align: center;
	color: var(--t2);
	font-size: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px
}

.changelog-spinner {
	width: 22px;
	height: 22px;
	border: 2px solid var(--bg3);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: spin .7s linear infinite
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.changelog-error {
	padding: 28px 24px;
	text-align: center;
	color: var(--t1);
	font-size: 13px
}

.record-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(6px);
	animation: bdIn .3s ease
}

.record-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: 24px;
	padding: 36px 28px;
	text-align: center;
	max-width: 300px;
	width: 90%;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	animation: recordBounce .5s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes recordBounce {
	0% {
		transform: translateY(40px) scale(.85);
		opacity: 0
	}
	60% {
		transform: translateY(-8px) scale(1.02);
		opacity: 1
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1
	}
}

.record-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--yt);
	margin-bottom: 8px
}

.record-amount {
	font-size: 48px;
	font-weight: 900;
	color: var(--t0);
	font-variant-numeric: tabular-nums;
	letter-spacing: -1px;
	line-height: 1
}

.record-sub {
	font-size: 13px;
	color: var(--t1);
	margin-top: 6px
}

.record-dismiss {
	margin-top: 24px;
	background: var(--yellow-bg);
	border: 1px solid var(--yellow-bd);
	color: var(--yt);
	font-size: 14px;
	font-weight: 700;
	padding: 12px 28px;
	border-radius: var(--r-md);
	cursor: pointer;
	width: 100%
}

.error-boundary {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px
}

.error-card {
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	padding: 26px 22px;
	width: 100%;
	max-width: 360px;
	text-align: center;
	box-shadow: var(--sh-lg)
}

.error-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--t0);
	margin-bottom: 6px
}

.error-body {
	font-size: 13px;
	color: var(--t1);
	line-height: 1.6
}

.error-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px
}

.error-btn {
	height: 44px;
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 700;
	border: none;
	background: var(--bg2);
	color: var(--t0);
	cursor: pointer
}

.error-btn:hover {
	background: var(--bg3)
}

.error-btn.danger {
	background: var(--red);
	border-color: transparent;
	color: #fff
}

.error-btn.danger:hover {
	opacity: .9
}

.tutorial-svg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: all
}

.tutorial-card {
	position: fixed;
	left: 50%;
	transition: bottom .35s cubic-bezier(.4, 0, .2, 1);
	transform: translateX(-50%);
	background: var(--bg1);
	border: 1px solid var(--bd);
	border-radius: var(--r-lg);
	padding: 20px;
	width: min(320px, calc(100vw - 32px));
	box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
	z-index: 101;
	pointer-events: all;
	animation: tutIn .3s cubic-bezier(.34, 1.2, .64, 1) both
}

@keyframes tutIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(16px) scale(.97)
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1)
	}
}

.tut-content {
	transition: opacity .18s ease
}

.tut-content.fading {
	opacity: 0
}

.tut-step-num {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--brand);
	margin-bottom: 6px
}

.tut-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--t0);
	margin-bottom: 6px
}

.tut-body {
	font-size: 13px;
	color: var(--t1);
	line-height: 1.6
}

.tut-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	gap: 8px
}

.tut-btn {
	height: 36px;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 0 16px;
	border: none
}

.tut-btn.primary {
	background: var(--brand);
	color: #fff;
	border-color: transparent
}

.tut-btn.primary:hover {
	background: var(--brand-h)
}

.tut-btn.secondary {
	background: var(--bg2);
	color: var(--t1)
}

.tut-btn.secondary:hover {
	background: var(--bg3)
}

.tut-skip {
	font-size: 12px;
	color: var(--t2);
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
	min-height: 36px
}

.tut-dots {
	display: flex;
	gap: 5px;
	align-items: center
}

.tut-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bg3);
	transition: all .25s cubic-bezier(.34, 1.4, .64, 1)
}

.tut-dot.active {
	background: var(--brand);
	width: 20px;
	border-radius: 3px
}

.page-root {
	position: relative;
	overflow: hidden
}

.page-slide.slide-exit-fwd,
.page-slide.slide-exit-back {
	position: absolute;
	top: 0;
	left: 0;
	right: 0
}

.page-slide {
	will-change: transform, opacity;
	transition: transform .32s cubic-bezier(.34, 1.15, .64, 1), opacity .24s ease
}

.page-slide.slide-enter-fwd {
	animation: slideInFwd .3s cubic-bezier(.2, .9, .3, 1) both
}

.page-slide.slide-exit-fwd {
	animation: slideOutFwd .25s cubic-bezier(.4, 0, .6, 1) both
}

.page-slide.slide-enter-back {
	animation: slideInBack .3s cubic-bezier(.2, .9, .3, 1) both
}

.page-slide.slide-exit-back {
	animation: slideOutBack .25s cubic-bezier(.4, 0, .6, 1) both
}

@keyframes slideInFwd {
	from {
		transform: translateX(16%);
		opacity: 0
	}

	to {
		transform: translateX(0);
		opacity: 1
	}
}

@keyframes slideOutFwd {
	from {
		transform: translateX(0);
		opacity: 1
	}

	to {
		transform: translateX(-10%);
		opacity: 0
	}
}

@keyframes slideInBack {
	from {
		transform: translateX(-16%);
		opacity: 0
	}

	to {
		transform: translateX(0);
		opacity: 1
	}
}

@keyframes slideOutBack {
	from {
		transform: translateX(0);
		opacity: 1
	}

	to {
		transform: translateX(10%);
		opacity: 0
	}
}

@media(prefers-reduced-motion:reduce) {

	.page-slide.slide-enter-fwd,
	.page-slide.slide-exit-fwd,
	.page-slide.slide-enter-back,
	.page-slide.slide-exit-back,
	.rc,
	.drop-hero,
	.drop-eyebrow,
	.drop-amount,
	.drop-sub,
	.pull-row,
	.pull-label {
		animation: none !important
	}
}

.main-content {
	max-width: 480px;
	margin: 0 auto;
	padding: 14px 14px 280px;
	padding-top: calc(58px + env(safe-area-inset-top) + 14px)
}

.section-body {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px
}

.hold-hint {
	text-align: center;
	font-size: 11px;
	color: var(--t2);
	padding-bottom: 4px;
	letter-spacing: .3px
}

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 160px);
	transform: translateX(-50%);
	background: rgba(45, 45, 45, .92);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 99px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 600;
	color: #cccccc;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
	z-index: 60;
	animation: toastIn .28s cubic-bezier(.34, 1.4, .64, 1);
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 48px)
}

html[data-theme="light"] .toast {
	background: rgba(255, 255, 255, .92);
	border-color: rgba(0, 0, 0, .1);
	color: #333333;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12)
}

.toast.above-footer {
	bottom: calc(200px + env(safe-area-inset-bottom, 0px))
}

.toast.success {
	color: var(--green)
}

html[data-theme="light"] .toast.success {
	color: var(--green)
}

.toast.error {
	color: var(--red)
}

html[data-theme="light"] .toast.error {
	color: var(--red)
}

.toast.neutral {
	color: #cccccc
}

html[data-theme="light"] .toast.neutral {
	color: #333333
}

.toast-action-btn {
	background: none;
	border: none;
	color: var(--brand);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--r-sm);
	white-space: nowrap;
	transition: background-color .12s ease
}

.toast-action-btn:active {
	background: var(--brand-bg)
}

@keyframes toastIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(12px) scale(.92)
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1)
	}
}

@keyframes bump {
	0% {
		transform: scale(1)
	}
	30% {
		transform: scale(1.08)
	}
	60% {
		transform: scale(.97)
	}
	100% {
		transform: scale(1)
	}
}

.bump {
	animation: bump .32s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes dotPulse {

	0%,
	100% {
		transform: scale(1);
		opacity: .85
	}

	50% {
		transform: scale(1.35);
		opacity: 1
	}
}

@keyframes spotGlow {

	0%,
	100% {
		opacity: .7
	}

	50% {
		opacity: 1
	}
}

/* Mascot animations */
.mascot {
	display: block;
	margin: 0 auto 8px;
	pointer-events: none
}

.mascot-idle {
	animation: mascotFloat 3s ease-in-out infinite
}

.mascot-search {
	animation: mascotLook 2.5s ease-in-out infinite
}

.mascot-success {
	animation: mascotBounce .6s cubic-bezier(.34, 1.56, .64, 1)
}

.mascot-sleep {
	animation: mascotFloat 4s ease-in-out infinite
}

.mascot-celebrate {
	animation: mascotCelebrate 1s ease-in-out infinite
}

@keyframes mascotFloat {
	0%, 100% { transform: translateY(0) }
	50% { transform: translateY(-6px) }
}

@keyframes mascotLook {
	0%, 100% { transform: translateX(0) rotate(0deg) }
	25% { transform: translateX(3px) rotate(2deg) }
	75% { transform: translateX(-3px) rotate(-2deg) }
}

@keyframes mascotBounce {
	0% { transform: scale(.8) translateY(10px); opacity: 0 }
	60% { transform: scale(1.05) translateY(-4px); opacity: 1 }
	100% { transform: scale(1) translateY(0); opacity: 1 }
}

@keyframes mascotCelebrate {
	0%, 100% { transform: translateY(0) rotate(0deg) }
	25% { transform: translateY(-4px) rotate(3deg) }
	75% { transform: translateY(-4px) rotate(-3deg) }
}

#confetti-canvas {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 999;
	display: none
}

.share-btn {
	width: 100%;
	height: 50px;
	background: var(--bg2);
	border: none;
	color: var(--t1);
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--r-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1)
}

.share-btn:hover {
	background: var(--bg3);
	color: var(--t0)
}

.share-btn:active {
	transform: scale(.96);
	transition: transform 0s
}

.share-btn.copied {
	background: var(--green-bg);
	border-color: var(--green-bd);
	color: var(--green)
}

@media(max-width:380px) {
	.gh-header-title {
		font-size: 14px
	}

	.denom-label {
		width: 36px;
		font-size: 13px
	}

	.denom-input {
		font-size: 16px;
		height: 40px
	}

	.step-btn {
		width: 40px;
		min-height: 44px
	}

	.roll-btn {
		min-width: 38px;
		height: 44px
	}

	.footer-total-value {
		font-size: 26px
	}

	.icon-btn {
		width: 36px;
		height: 36px
	}

	.gh-header-actions {
		gap: 4px
	}

	.btn-calc {
		height: 48px;
		font-size: 15px
	}

	.history-trends {
		flex-direction: column
	}
}

@media (prefers-reduced-motion:reduce) {

	*:not(.sk-row-inline),
	*:not(.sk-row-inline)::before,
	*:not(.sk-row-inline)::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important
	}

	.tutorial-svg {
		display: none
	}
}

/* ─── Mobile UX Improvements ─── */

/* Larger denom rows — easier to tap */
.denom-row {
	min-height: 62px;
	padding: 8px 10px
}

.denom-input {
	height: 46px;
	font-size: 18px
}

/* Pull rows on result page — tappable checkmark interaction */
.pull-row {
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .12s cubic-bezier(.34, 1.56, .64, 1);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none
}

.pull-row:active {
	transform: scale(.98);
	transition: transform 0s
}

.pull-row.checked {
	background: var(--green-bg);
	border-color: var(--green-bd)
}

.pull-row.checked .pull-count {
	background: var(--green);
	border-color: var(--green);
	color: #fff
}

.pull-row.checked .pull-denom,
.pull-row.checked .pull-value {
	color: var(--green)
}

.pull-check {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--bd);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
	color: transparent
}

.pull-row.checked .pull-check {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	animation: checkBounce .4s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes checkBounce {
	0% { transform: scale(.6); opacity: .5 }
	50% { transform: scale(1.2) }
	75% { transform: scale(.95) }
	100% { transform: scale(1) }
}

/* Bigger stepper buttons on small screens */
@media(max-width:420px) {
	.step-btn {
		width: 52px;
		min-height: 52px
	}

	.denom-row {
		min-height: 66px
	}
}

/* Footer: smoother keyboard avoidance with better transitions */
.sticky-footer {
	transition: opacity .22s ease, transform .38s cubic-bezier(.34, 1.4, .64, 1)
}

.sticky-footer.footer-entering {
	animation: footerSlideUp .5s cubic-bezier(.34, 1.3, .64, 1) both
}

@keyframes footerSlideUp {
	0% {
		transform: translateY(100%) translateZ(0);
		opacity: 0
	}
	60% {
		transform: translateY(-3%) translateZ(0);
		opacity: 1
	}
	100% {
		transform: translateY(0) translateZ(0);
		opacity: 1
	}
}

.sticky-footer.keyboard-up {
	transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
	opacity: 0;
	transition: opacity .18s ease, transform .25s cubic-bezier(.4, 0, .2, 1)
}

/* Calculate button — more prominent pulse when over target */
@keyframes calcPulse {

	0%,
	100% {
		box-shadow: 0 2px 8px rgba(35, 134, 54, .25)
	}

	50% {
		box-shadow: 0 4px 18px rgba(35, 134, 54, .55), 0 0 0 3px rgba(35, 134, 54, .12)
	}
}

.btn-calc.over-target {
	box-shadow: 0 2px 8px rgba(35, 134, 54, .25)
}

/* Progress bar — inner shimmer on fill */
.progress-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
	border-radius: inherit
}

/* Sheet handle — bigger tap zone */
.sheet-handle {
	padding: 14px 0 6px;
	cursor: grab
}

.sheet-handle:active {
	cursor: grabbing
}

.sheet-handle-bar {
	width: 40px;
	height: 5px;
	transition: background-color .15s ease, width .15s ease
}

.sheet-handle:active .sheet-handle-bar {
	background: var(--brand);
	width: 52px
}

/* Better back button — larger tap target */
.back-btn {
	min-height: 48px;
	padding: 4px 8px;
	margin-left: -8px;
	border-radius: var(--r-sm)
}

.back-btn:active {
	background: var(--bg2);
	opacity: 1;
	transition: background-color 0s
}

/* Drop hero total — tap to copy */
.drop-amount {
	cursor: pointer;
	border-radius: var(--r-sm);
	padding: 2px 4px;
	margin: -2px -4px;
	transition: background-color .15s ease
}

.drop-amount:active {
	background: var(--brand-bg)
}

/* Keyboard dismiss hint on footer */
.footer-kbd-hint {
	display: none;
	font-size: 10px;
	font-weight: 600;
	color: var(--t2);
	text-align: center;
	padding-bottom: 6px;
	letter-spacing: .3px
}

/* Swipe handle decoration on sheets */
.sheet-drag-indicator {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--brand-bg);
	border-radius: 0 0 3px 3px;
	opacity: 0;
	transition: opacity .2s ease
}

.sheet:active .sheet-drag-indicator {
	opacity: 1
}

/* Progress track — taller and more finger-friendly */
.progress-track {
	height: 26px;
	border-radius: 99px
}

/* Improved badge on collapsible sections */
.badge {
	font-variant-numeric: tabular-nums;
	transition: color .2s ease, background-color .2s ease
}

.section-toggle-btn.has-value .badge {
	color: var(--green);
	background: var(--green-bg);
	border-color: var(--green-bd)
}

/* Section toggle button — cleaner active state */
.section-toggle-btn {
	min-height: 52px
}

/* Target input — bigger tap zone */
.target-input {
	height: 36px;
	width: 76px;
	font-size: 15px
}

/* Toast — above footer */

/* Smooth scroll on body when keyboard hides */
@supports(height:100dvh) {
	.main-content {
		padding-bottom: 300px
	}
}

/* Pull rows check all button */
.check-all-btn {
	width: 100%;
	height: 44px;
	background: transparent;
	border: 1px dashed var(--bd);
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 700;
	color: var(--t1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease
}

.check-all-btn:active {
	background: var(--bg2);
	transition: background-color 0s
}

.check-all-btn.all-checked {
	background: var(--green-bg);
	border-color: var(--green-bd);
	color: var(--green);
	border-style: solid
}

/* ─── Swipe-to-delete ─── */

.swipeable-row {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	margin-bottom: 8px
}

.swipeable-row .history-entry {
	margin-bottom: 0
}

.swipe-track {
	position: relative;
	z-index: 2;
	background: var(--bg1);
	border-radius: var(--r-md);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1)
}

.swipeable-row .history-entry {
	width: 100%;
	min-width: 0
}

.swipe-delete {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f85149;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 0;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	opacity: 0;
	transition: opacity .15s ease
}

.swipe-delete:active {
	background: #da3633
}

/* ─── History filter toggle & dropdown ─── */

.history-filter-row {
	position: relative;
	margin-top: 8px;
	display: flex;
	justify-content: flex-end
}

.history-filter-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-sm);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--t1);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease
}

.history-filter-toggle:active {
	background: var(--bg3);
	transition: background-color 0s
}

.history-filter-toggle.active {
	border-color: var(--brand-bd);
	color: var(--brand);
	background: var(--brand-bg)
}

.history-filter-toggle .history-filter-chev {
	transition: transform .2s ease
}

.history-filter-toggle.open .history-filter-chev {
	transform: rotate(180deg)
}

.history-filter-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 10;
	width: auto;
	min-width: 140px;
	background: var(--bg1);
	border: none;
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	padding: 4px;
	animation: slUp .18s ease
}

.history-filter-option {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--t1);
	background: none;
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	text-align: left;
	transition: background-color .12s ease, color .12s ease
}

.history-filter-option:hover {
	background: var(--bg2);
	color: var(--t0)
}

.history-filter-option.active {
	background: var(--brand-bg);
	color: var(--brand)
}

.history-filter-option:active {
	background: var(--bg3);
	transition: background-color 0s
}

/* ─── Split suggestions ─── */

.split-suggestions {
	background: var(--bg1);
	border: none;
	border-radius: var(--r-lg);
	padding: 14px 16px;
	margin-top: 10px
}

.split-suggestions-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--t2);
	margin-bottom: 10px
}

.split-suggestion-chip {
	display: block;
	background: var(--bg2);
	border: none;
	border-radius: 14px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--t0);
	margin-bottom: 6px;
	text-align: center
}

.split-suggestion-chip:last-child {
	margin-bottom: 0
}

/* ─── Toast leaving animation ─── */

.toast.leaving {
	animation: toastOut .17s ease forwards
}

@keyframes toastOut {
	from {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1)
	}
	to {
		opacity: 0;
		transform: translateX(-50%) translateY(8px) scale(.92)
	}
}

/* ─── Modal closing animation ─── */

.modal-backdrop.modal-closing {
	animation: bdOut .2s ease forwards
}

.modal-backdrop.modal-closing .modal-card,
.modal-backdrop.modal-closing .changelog-card {
	animation: modalOut .2s ease forwards
}

.record-overlay.modal-closing {
	animation: bdOut .2s ease forwards
}

.record-overlay.modal-closing .record-card {
	animation: modalOut .2s ease forwards
}

@keyframes bdOut {
	from { opacity: 1 }
	to { opacity: 0 }
}

@keyframes modalOut {
	from {
		transform: scale(1) translateY(0);
		opacity: 1
	}
	to {
		transform: scale(.92) translateY(14px);
		opacity: 0
	}
}

/* ─── Empty state icon (Font Awesome) ─── */

.empty-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bg2);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	font-size: 22px;
	color: var(--t2)
}

.history-empty-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bg2);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	font-size: 20px;
	color: var(--t2)
}

/* ─── About logo — constrain PNG favicon ─── */

.about-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px
}

/* ─── History search ─── */

.history-search-wrap {
	padding: 12px 16px 10px
}

.history-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg2);
	border: none;
	border-radius: var(--r-md);
	padding: 0 12px;
	height: 40px
}

.history-search-icon {
	color: var(--t2);
	flex-shrink: 0;
	display: flex;
	align-items: center
}

.history-search-input {
	flex: 1;
	background: none;
	border: none;
	color: var(--t0);
	font-size: 13px;
	font-weight: 500;
	outline: none;
	min-width: 0
}

.history-search-input::placeholder {
	color: var(--t2)
}

.history-search-clear {
	background: var(--bg3);
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--t1);
	flex-shrink: 0
}

.history-results-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--t2);
	padding: 4px 0 8px
}

/* --- Extracted from inline styles --- */

.app-root {
	min-height: 100vh
}

.page-slide {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.drop-hero-body {
	padding: 0 14px 14px
}

.pull-label {
	margin-top: 14px
}

.pull-list {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.empty-state-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--t0);
	margin-bottom: 6px
}

.empty-state-sub {
	font-size: 13px;
	color: var(--t1)
}

.drawer-eyebrow {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--t1);
	margin-bottom: 4px
}

.breakdown-bills {
	margin-bottom: 16px
}

.target-row-footer {
	margin-top: 0;
	text-align: right
}

.target-meta-footer {
	margin-bottom: 5px;
	justify-content: flex-end
}

#progress-bar {
	margin-bottom: 10px
}

.history-hd-actions {
	display: flex;
	align-items: center;
	gap: 12px
}

.history-empty-title {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px
}

.history-empty-sub {
	font-size: 13px;
	opacity: 0.6
}

.history-meta-right {
	display: flex;
	align-items: center;
	gap: 8px
}

.settings-body {
	padding-bottom: env(safe-area-inset-bottom, 20px)
}

.record-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 48px;
	color: #d29922
}

.changelog-error-icon {
	opacity: 0.4;
	margin-bottom: 8px
}

.changelog-error-sub {
	font-size: 12px;
	margin-top: 4px;
	opacity: 0.6
}

.sk-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px
}

.sk-main {
	height: 52px;
	border-radius: 12px;
	flex: 1
}

.sk-target {
	height: 52px;
	border-radius: 12px;
	width: 120px;
	flex-shrink: 0
}

.sk-progress {
	height: 26px;
	border-radius: 99px;
	margin-bottom: 10px
}

.sk-calc {
	height: 52px;
	border-radius: 12px;
	background: rgba(78, 201, 176, .1)
}

.page-slide-result {
	padding-bottom: 16px
}