.exercise-selector-empty {
	padding: 20px;
	text-align: center;
	color: var(--sub);
	font-weight: 600
}

body.selector-open {
	overflow: hidden
}

:root {
	--bg: #0f0f10;
	--panel: #151517;
	--panel-2: #1b1b1e;
	--text: #f5f6f7;
	--sub: #a6a7ab;
	--accent: #7c5cff;
	--accent-2: #ff5c9a;
	--ring: #2a2a2f;
	--good: #3ddc84;
	--muted: #2a2a2c;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden
}

html {
	overflow: hidden
}

body {
	background: #0f0f10;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	display: block;
	overflow-x: hidden;
	overflow-y: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Phone shell - ALWAYS fullscreen, no frame ever */
.phone-shell {
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	background: radial-gradient(1200px 600px at 50% -20%, #1f1f24 0%, #0f0f10 60%);
	border-radius: 0 !important;
	box-shadow: none !important;
	border: none !important;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0;
}

/* Scroll area inside the shell */
.content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px))
}

/* Remove all phone frame styling - always fullscreen */

/* Topbar */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 27px 22px 10px;
	background: transparent;
}

.brand {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .2px
}

.brand-logo {
	overflow: hidden;
	height: 83px;
	display: flex;
	align-items: flex-start
}

.brand-logo img {
	height: 104px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	margin-left: 8px;
	margin-top: 2px;
	transform: translateY(0)
}

.icons {
	opacity: .9
}

.streak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
	margin-top: 20px
}

.streak-img {
	height: 40px;
	width: auto;
	display: block
}

.streak-count {
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	line-height: 1;
	margin-top: -4px
}

/* Tabs */
.tabs {
	display: flex;
	gap: 16px;
	padding: 0 22px 12px
}

.tab {
	background: none;
	border: 0;
	color: var(--sub);
	font-weight: 600;
	padding: 6px 0;
	cursor: pointer
}

.tab.active {
	color: var(--text);
	position: relative
}

.tab.active:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 3px;
	border-radius: 3px;
	background: var(--accent)
}

/* Cards */
.card {
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
	border-radius: 18px;
	margin: 0 22px 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	border: 1px solid #242429;
}

.summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px
}

.summary-number {
	font-size: 25px;
	font-weight: 800
}

.summary-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-right: 16px;
	gap: 4px
}

.summary-sub {
	color: var(--sub);
	margin-top: 4px
}

.summary-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px
}

.summary-right .ring {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: conic-gradient(var(--accent) 290deg, #303039 0);
	mask: radial-gradient(circle 30px, transparent 55%, #000 56%);
	border: 6px solid var(--ring);
}

.ring-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1
}

.ring-label-title {
	color: var(--sub);
	font-size: 12px;
	font-weight: 700
}

.ring-label-value {
	color: #dfe0e6;
	font-size: 18px;
	font-weight: 800
}

.prediction-toggle {
	background: none;
	border: 0;
	color: var(--accent);
	font-size: 13px;
	font-weight: 700;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prediction-toggle:disabled {
	opacity: .35;
	cursor: not-allowed
}

.prediction-toggle.hidden {
	display: none
}

.prediction-options {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.prediction-options-title {
	font-size: 13px;
	font-weight: 700;
	color: #9a9ab0
}

.prediction-options-list {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.prediction-chip {
	background: #1a1a20;
	border: 1px solid #2f2f39;
	color: #dfe0e6;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}

.prediction-chip:hover {
	background: #23232b;
	border-color: #3b3b45
}

.prediction-chip.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #0b0b0d;
	cursor: default;
	transform: none;
}

/* Quick stats three circles */
.quick-stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding: 0 22px;
	margin-bottom: 14px
}

.qs-item {
	background: linear-gradient(180deg, #16161a, #141418);
	border: 1px solid #242429;
	border-radius: 16px;
	padding: 12px;
	text-align: center
}

.qs-item span {
	display: block;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 6px
}

.qs-item label {
	color: var(--sub);
	font-size: 12px
}

/* Controls */
.controls {
	padding: 14px
}

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

.camera {
	width: 85%;
	margin: 0 auto 12px;
	aspect-ratio: 1/1;
	border-radius: 14px;
	background: #0a0a0c;
	border: 1px dashed #2c2c33;
	object-fit: cover
}

.manual-preview {
	width: 85%;
	margin: 0 auto 12px;
	aspect-ratio: 1/1;
	border-radius: 14px;
	background: #0a0a0c;
	border: 1px dashed #2c2c33;
	object-fit: cover
}

.hidden {
	display: none
}

.btn-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 85%;
	margin: 0 auto
}

/* iOS Touch Fix - Ensure all buttons are touchable */
.btn,
button,
.nav-btn {
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.btn {
	flex: 1;
	min-width: 120px;
	background: #272731;
	color: #fff;
	border: 1px solid #3a3a45;
	padding: 10px 16px;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}

.btn-row .btn {
	width: 100%
}

.btn.primary {
	background: var(--accent);
	border-color: transparent;
	position: relative
}

#ai-workout-btn::before {
	content: '✦';
	position: absolute;
	left: 20%;
	top: -18px;
	color: rgba(124, 92, 255, 0.8);
	font-size: 14px;
	animation: twinkle 2s ease-in-out infinite;
	text-shadow: 0 0 8px rgba(124, 92, 255, 0.6)
}

#ai-workout-btn::after {
	content: '✦';
	position: absolute;
	right: 25%;
	bottom: -18px;
	color: rgba(124, 92, 255, 0.8);
	font-size: 14px;
	animation: twinkle 2s ease-in-out infinite 0.5s;
	text-shadow: 0 0 8px rgba(124, 92, 255, 0.6)
}

@keyframes twinkle {

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

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

.btn:disabled {
	opacity: .45;
	cursor: not-allowed
}

.cta {
	margin-top: 12px
}

#save-to-workout {
	width: 60%;
	margin: 16px auto 0;
	padding: 10px 0;
	font-size: 14px;
	display: none
}

#save-workout {
	width: 55%;
	margin: 16px auto 0;
	padding: 10px 0;
	font-size: 15px
}

.workout-save-btn {
	margin: 0 !important;
	width: auto !important
}

/* Details */
.details {
	padding: 18px
}

.details h3 {
	margin: 0 0 4px;
	font-size: 20px
}

.machine-custom {
	margin: 6px 0 10px
}

.machine-custom input {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 600;
	font-size: 15px;
}

.machine-custom select {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 600;
	font-size: 15px;
}

.machine-custom input::placeholder {
	color: #6f6f73
}

.confidence {
	color: var(--sub);
	margin: 0 0 12px
}

.exercise-image {
	width: 100%;
	border-radius: 16px;
	margin: 12px 0;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22)
}

.video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #242429;
	background: #0b0b0d
}

.video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0
}

.sets-reps {
	display: flex;
	gap: 16px;
	margin-top: 14px
}

.counter {
	flex: 1;
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 14px;
	padding: 12px
}

.counter label {
	display: block;
	color: var(--sub);
	font-size: 12px;
	margin-bottom: 6px
}

.count-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #0f0f12;
	border-radius: 10px;
	padding: 8px 10px;
	border: 1px solid #23232a
}

.count-controls button {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 0;
	background: #24242c;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	cursor: pointer
}

.count-controls span {
	font-size: 18px;
	font-weight: 800
}

/* Recent list */
.recent {
	padding: 6px 22px 0
}

.recent h4 {
	margin: 8px 0 10px;
	color: #d7d8dd
}

.recent-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(180deg, #16161a, #141418);
	border: 1px solid #242429;
	border-radius: 16px;
	padding: 10px 12px;
	margin-bottom: 10px
}

.recent-item .thumb {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: linear-gradient(135deg, #2f9d59, #7ed957)
}

.recent-item .info {
	flex: 1
}

.recent-item .title {
	font-weight: 700
}

.recent-item .meta {
	color: var(--sub);
	font-size: 12px;
	margin-top: 4px
}

.recent-item .time {
	color: var(--sub);
	font-size: 12px
}

/* Recent scans */
.recent-scans {
	padding-bottom: 16px
}

.recent-scans-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 16px
}

.scan-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 12px;
	padding: 10px
}

.scan-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0
}

.scan-item-info {
	flex: 1;
	min-width: 0
}

.scan-item-name {
	font-weight: 700;
	margin-bottom: 4px;
	color: #dfe0e6
}

.scan-item-time {
	color: var(--sub);
	font-size: 12px
}

/* Bottom navbar */
.navbar {
	position: relative;
	left: 0;
	right: 0;
	height: 72px;
	background: rgba(13, 13, 16, .9);
	backdrop-filter: blur(10px);
	display: none;
	align-items: center;
	justify-content: space-around;
	border-top: 1px solid #242429;
	z-index: 5;
	margin: 0;
	padding: 0;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px))
}

.navbar .vision-fab {
	position: absolute
}

.nav-btn {
	background: none;
	border: 0;
	color: var(--sub);
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px
}

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

.nav-icon {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
	opacity: 0.7
}

.nav-btn.active .nav-icon {
	opacity: 1
}

.nav-btn span {
	font-size: 12px
}

.vision-fab {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #1a1a1d;
	border: 2px solid var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	z-index: 10;
	transition: all 0.2s ease;
	cursor: pointer;
}

.vision-fab:hover {
	transform: translateX(-50%) scale(1.05);
	border-color: var(--accent);
}

.vision-fab.active {
	background: #1a1a1d;
	border-color: var(--accent);
	transform: translateX(-50%);
}

.vision-fab.active:hover {
	transform: translateX(-50%) scale(1.05);
}

.vision-fab-icon {
	width: 24px;
	height: 24px;
}

.vision-fab .vision-fab-icon circle:first-of-type {
	stroke: var(--accent);
	stroke-width: 2.5;
	fill: none;
}

.vision-fab .vision-fab-icon circle:last-of-type {
	stroke: none;
	fill: var(--accent);
}

.vision-fab .vision-fab-icon path {
	stroke: var(--accent);
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
}

.fab {
	position: absolute;
	right: 18px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	background: #000;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 0 0 2px #2a2a2f
}

.logbook {
	padding: 16px
}

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

.log-header h3 {
	margin: 0;
	margin-right: 12px
}

.btn.small {
	padding: 8px 12px;
	border-radius: 10px;
	min-width: auto
}

.log-header .btn.small {
	width: 12%;
	min-width: 90px;
	padding: 6px 10px;
	font-size: 13px
}

.log-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative
}

.set-row-header {
	display: grid;
	grid-template-columns: 28px 40% 50px 5px 50px 10px 44px;
	align-items: center;
	padding: 8px 14px 4px
}

.set-row-header.bodyweight {
	grid-template-columns: 28px 40% 50px 10px 44px
}

.set-row-header .reps-spacer {
	width: 10px
}

.set-row-header .spacer-header {
	display: block
}

.set-row-header .index-header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px
}

.set-row-header .field-header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px
}

.set-row-header .field-gap {
	width: 5px
}

.set-row-header .index-header label,
.set-row-header .field-header label {
	color: var(--sub);
	font-size: 12px;
	font-weight: 600;
	margin: 0;
	display: block;
	text-align: center;
	width: 100%
}

.set-row-header .del-header {
	width: 28px
}

.set-row-border {
	height: 1px;
	background: #242429;
	width: calc(100% + 32px);
	margin: 0 -16px
}

.logbook .set-row-border {
	width: calc(100% + 32px);
	margin: 0 -16px
}

.workout-list li .set-row-border {
	width: calc(100% + 24px);
	margin: 0 -12px
}

.set-row {
	display: grid;
	grid-template-columns: 28px 40% 50px 5px 50px 10px 44px;
	align-items: center;
	padding: 6px 14px;
	position: relative
}

.set-row.bodyweight {
	grid-template-columns: 28px 40% 50px 10px 44px
}

.set-row.even::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.02);
	z-index: 0;
	pointer-events: none
}

.logbook .set-row.even::before {
	left: -16px;
	right: -16px
}

.workout-list li .set-row.even::before {
	left: -12px;
	right: -12px
}

.set-row>* {
	position: relative;
	z-index: 1
}

.set-row .reps-spacer {
	width: 10px
}

.set-row .field {
	width: 50px;
	max-width: 50px
}

.set-row .field-gap {
	width: 5px
}

.workout-list .set-row .field {
	width: 50px;
	max-width: 50px
}

.set-row .index {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dfe0e6;
	font-weight: 700;
	font-size: 12px;
	opacity: .9;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #2d2d36;
	background: #1b1b1f
}

.set-row .del {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 1px solid #30303a;
	background: #202028;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.set-row .field {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.set-row input {
	background: transparent;
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 6px 12px;
	font-weight: 700;
	outline: none;
	text-align: center;
	width: 100%
}

.set-row input::placeholder {
	color: var(--sub);
	opacity: 0.5
}

.set-row input:focus {
	outline: none
}

.set-row input::-webkit-outer-spin-button,
.set-row input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0
}

.set-row .unit {
	color: var(--sub);
	font-size: 12px;
	margin-left: 6px
}

/* Workout list */
.workout {
	padding: 16px
}

.workouts-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 22px 12px;
	gap: 12px
}

.start-workout-btn {
	min-width: 140px
}

.workouts-home.hidden {
	display: none
}

.workout-builder {
	padding: 0 22px 22px
}

.workout-builder.hidden {
	display: none
}

.workout-builder-wrapper {
	padding: 0 22px 22px;
	max-width: 100%
}

.workout-builder-top-buttons {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 10px;
	padding: 22px 0 10px;
	margin: 0
}

.workout-builder-top-buttons .btn {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid
}

.workout-builder-top-buttons .btn.primary {
	background: var(--accent);
	border-color: transparent;
	color: #fff
}

.workout-builder-top-buttons #save-workout {
	width: auto;
	margin: 0;
	padding: 0 16px
}

.workout-builder-top-buttons #back-to-workouts {
	background: #2a2a33;
	border-color: #3a3a45;
	color: #fff
}

.workout-builder-wrapper .card.workout {
	margin: 0 0 14px;
	padding: 16px
}

.workout-add-exercise-btn {
	width: 100%;
	margin-top: 12px;
	background: var(--accent);
	border-radius: 12px;
	border: 1px solid transparent;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 12px
}

.workout-cancel-btn {
	width: 100%;
	margin-top: 12px;
	background: #2a2a33;
	border: 1px solid #3a3a45;
	border-radius: 12px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 12px
}

.workout-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 10px
}

.workout-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%
}

.workout-timer-value {
	font-weight: 700;
	font-size: 13px;
	color: #a3a5b7;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	flex-shrink: 0
}

.workout-label {
	color: var(--sub);
	font-size: 14px;
	font-weight: 600
}

.workout-name-container {
	width: 100%;
	margin-top: 0
}

.workout-name-container .workout-label {
	display: block;
	margin-bottom: 7px
}

.workout-name {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 700;
	display: block;
	box-sizing: border-box
}

/* Workout gym header (per-workout) */
.workout-gym-header {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: #fff
}

.workout-gym-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	flex: 0 0 auto
}

.workout-gym-name {
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.workout-buttons-container {
	display: flex;
	gap: 10px;
	margin-bottom: 12px
}

.workout-buttons-container .btn {
	flex: 1;
	margin: 0;
	padding: 8px 12px;
	font-size: 13px;
	min-width: 0;
	width: 100%
}

.workout-add-btn,
.workout-save-btn {
	padding: 8px 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important
}

.workout-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.workout-list li {
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 12px;
	padding: 10px 12px;
	color: #dfe0e6
}

.workout-view-exercise {
	background: #1a1a1d;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 10px 10px 10px 10px;
	margin-bottom: 8px
}

.workout-view-header {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding-right: 0;
}

.workout-view-actions {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 6px;
	align-items: center;
}

.workout-view-actions:empty {
	display: none
}

.workout-view-actions .exercise-info-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.workout-view-sets {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px
}

.workout-view-set-line {
	color: #c3c4cc;
	font-size: 13px;
	font-weight: 600
}

.workout-view-set-line.empty {
	color: var(--sub);
	font-style: italic
}

.workout-list .workout-exercise-header {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	position: relative;
	flex-wrap: wrap
}

.workout-list .workout-exercise-name {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: none;
	padding-right: 0;
	font-weight: 700;
	font-size: 17px;
	color: #dfe0e6;
	line-height: 1.25
}

.workout-list .workout-exercise-name-input {
	flex: 1;
	min-width: 0;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 8px;
	padding: 6px 10px;
	font-weight: 700;
	font-size: 14px
}

.workout-list .workout-exercise-actions {
	display: flex !important;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
	order: 0;
	flex-direction: row !important
}

.workout-list .workout-exercise-delete-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0
}

.workout-edit-exercise-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
	justify-content: space-between;
	padding-right: 0
}

.workout-edit-exercise-header .workout-exercise-name {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-weight: 700;
	font-size: 15px;
	color: #dfe0e6;
	line-height: 1.3
}

.workout-edit-exercise-header .workout-exercise-actions {
	position: absolute;
	top: 0;
	right: 0;
	display: flex !important;
	gap: 4px;
	align-items: flex-start;
	justify-content: flex-end;
	flex-shrink: 0;
}



.workout-view-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
	/* Reduced from 8px */
	gap: 8px;
	/* Reduced from 12px */
}

.workout-exercise-main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

/* List View (Your Workouts) - Allow wrapping */
.workout-exercise-main .workout-exercise-name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	color: #dfe0e6;
	line-height: 1.3;
	white-space: normal;
	word-break: break-word;
	padding-right: 8px;
}

/* Workout Builder - Keep truncated single line */
.workout-edit-exercise-header .workout-exercise-name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	color: #dfe0e6;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 70%;
}

/* Revert to absolute positioning (default from earlier in file) but ensure pointer events work */
.workout-view-actions {
	/* Removed relative override */
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	z-index: 2;
	/* Ensure above text */
}

/* Add padding to text container to avoid overlap with absolute buttons */
.workout-exercise-main {
	margin-right: 0;
	/* Reset margin */
	padding-right: 76px;
	/* Reserve space for absolute buttons (28+28+8+12) */
	position: relative;
	z-index: 1;
}

.workout-list .workout-exercise-edit-btn {
	background: rgba(124, 92, 255, 0.15);
	border: 1px solid rgba(124, 92, 255, 0.3);
	color: #7c5cff;
	border-radius: 8px;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-exercise-notes-btn {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s
}

.workout-exercise-notes-btn:hover {
	background: rgba(255, 255, 255, 0.1)
}

.workout-exercise-notes-btn.has-notes {
	background: rgba(124, 92, 255, 0.25);
	border-color: rgba(124, 92, 255, 0.4);
	color: #7c5cff
}

.workout-exercise-notes-btn.has-notes:hover {
	background: rgba(124, 92, 255, 0.35)
}

.workout-exercise-notes-btn svg {
	width: 14px;
	height: 14px;
	stroke: currentColor
}

.workout-list .workout-exercise-edit-btn:hover {
	background: rgba(124, 92, 255, 0.25)
}

.workout-rest-timer-btn {
	background: rgba(124, 92, 255, 0.15);
	border: 1px solid rgba(124, 92, 255, 0.3);
	color: #7c5cff;
	border-radius: 8px;
	padding: 4px 4px;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
	flex-shrink: 0;
	width: 50px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3px
}

.workout-rest-timer-btn:hover {
	background: rgba(124, 92, 255, 0.25)
}

.workout-rest-timer-btn .rest-timer-play-icon {
	font-size: 9px;
	line-height: 1;
	flex-shrink: 0
}

.workout-rest-timer-btn .rest-timer-time-display {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .03em;
	flex: 1;
	text-align: center
}

.workout-list .workout-exercise-check-btn {
	background: rgba(61, 220, 132, 0.2);
	border: 1px solid rgba(61, 220, 132, 0.3);
	color: #3ddc84;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-list .workout-exercise-check-btn:hover {
	background: rgba(61, 220, 132, 0.3)
}

.workout-list .workout-exercise-check-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: rgba(61, 220, 132, 0.1)
}

.workout-edit-exercise-header .workout-exercise-check-btn {
	background: rgba(61, 220, 132, 0.2);
	border: 1px solid rgba(61, 220, 132, 0.3);
	color: #3ddc84;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-edit-exercise-header .workout-exercise-check-btn:hover {
	background: rgba(61, 220, 132, 0.3)
}

.workout-edit-exercise-header .workout-exercise-check-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: rgba(61, 220, 132, 0.1)
}

.exercise-selector {
	position: fixed;
	inset: 0;
	background: rgba(7, 7, 9, 0.85);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	z-index: 13000
}

.exercise-selector.hidden {
	display: none
}

.exercise-selector-panel {
	width: 100%;
	max-width: 540px;
	background: #121215;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden
}

.exercise-selector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px
}

.exercise-selector-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700
}

.exercise-selector-close {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: 10px;
	padding: 4px 10px;
	font-size: 14px;
	cursor: pointer
}

.exercise-selector-search {
	margin-bottom: 20px
}

.exercise-selector-search input {
	width: 100%;
	background: #0f0f12;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 10px 14px;
	color: #fff;
	font-size: 14px;
	font-weight: 600
}

.exercise-selector-muscles-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-y: visible;
	margin-bottom: 4px;
	align-items: center;
	justify-content: center
}

.exercise-selector-muscles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-y: visible;
	justify-content: center
}

.exercise-selector-muscles button {
	background: #1b1b1f;
	border: 1px solid #2c2c34;
	color: #dfe0e6;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer
}

.exercise-selector-muscles button.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #0b0b0d
}

.exercise-selector-muscles-row {
	margin-bottom: 16px !important;
	flex-shrink: 0
}

.exercise-selector-or {
	text-align: center;
	color: #888 !important;
	font-size: 14px !important;
	margin: 4px 0 4px 0 !important;
	font-weight: 500 !important;
	padding: 4px 0 !important;
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 10 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	background: transparent !important
}

.exercise-selector-ai-detect {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	display: flex !important;
	justify-content: center !important;
	padding: 0 16px !important;
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 10 !important;
	width: 100% !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	background: transparent !important
}

.exercise-selector-ai-detect .btn {
	width: auto !important;
	min-width: 140px;
	max-width: 200px;
	padding: 8px 16px;
	flex: none !important;
	position: relative
}

.exercise-selector-ai-detect .btn::before {
	content: '✦';
	position: absolute;
	left: 20%;
	top: -18px;
	color: rgba(124, 92, 255, 0.8);
	font-size: 14px;
	animation: twinkle 2s ease-in-out infinite;
	text-shadow: 0 0 8px rgba(124, 92, 255, 0.6)
}

.exercise-selector-ai-detect .btn::after {
	content: '✦';
	position: absolute;
	right: 25%;
	bottom: -18px;
	color: rgba(124, 92, 255, 0.8);
	font-size: 14px;
	animation: twinkle 2s ease-in-out infinite 0.5s;
	text-shadow: 0 0 8px rgba(124, 92, 255, 0.6)
}

.exercise-selector-predictions {
	display: none;
	/* hidden until we actually have predictions */
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
	border: 1px solid #2b2b34;
	border-radius: 16px;
	background: #101013;
	padding: 6px 0;
}

.exercise-selector-predictions.refinements {
	max-height: 400px;
	overflow-y: auto;
}

.exercise-selector-prediction {
	border-radius: 0;
	border: 0;
	background: transparent;
	color: #fff;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer
}

.exercise-selector-prediction span.conf {
	color: var(--sub);
	font-weight: 600;
	font-size: 13px;
	margin-left: 8px
}

.exercise-selector-results {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0
}

.exercise-selector-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	text-align: left;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box
}

.exercise-selector-item:last-child {
	border-bottom: none
}

.exercise-selector-item-main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0
}

.exercise-selector-item:hover {
	background: rgba(255, 255, 255, 0.04)
}

.exercise-selector-item-image {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0
}

.exercise-selector-item-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
	gap: 3px
}

.exercise-selector-item-content div {
	font-size: 14.5px;
	font-weight: 600;
	color: #fff
}

.exercise-selector-item span {
	font-size: 12.5px;
	color: var(--sub);
	text-transform: capitalize
}

.exercise-selector-conf {
	font-size: 13px;
	font-weight: 700;
	color: #dfe0e6;
	margin-left: 8px;
	white-space: nowrap
}

.workout-list .workout-draft-set {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	background: rgba(20, 20, 26, 0.5);
	border-radius: 6px;
	margin-bottom: 4px
}

.workout-list .workout-draft-set-input {
	flex: 1;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 6px;
	padding: 4px 6px;
	font-weight: 600;
	font-size: 12px;
	min-width: 0
}

.workout-list .workout-draft-set-delete {
	background: rgba(239, 68, 68, 0.2);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #ef4444;
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 10px;
	cursor: pointer;
	flex-shrink: 0
}

.workout-list .workout-draft-add-set {
	background: rgba(124, 92, 255, 0.2);
	border: 1px solid rgba(124, 92, 255, 0.3);
	color: #7c5cff;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 4px;
	width: 100%
}

.save-success {
	text-align: center;
	color: #3ddc84;
	font-weight: 700;
	padding: 8px;
	margin-top: 8px;
	font-size: 14px
}

.workout-builder-empty {
	padding: 14px;
	border: 1px dashed #2b2b34;
	border-radius: 12px;
	background: #141418;
	color: var(--sub);
	text-align: center;
	font-weight: 600;
	margin-bottom: 8px
}

.workout-set-empty {
	color: var(--sub);
	font-size: 13px;
	padding: 6px 0
}

/* Workouts page */
.workouts-main-list {
	list-style: none;
	margin: 0;
	padding: 0 22px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.workouts-main-list li {
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 16px;
	padding: 10px 14px 10px 8px;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22)
}

.workout-empty {
	padding: 24px;
	text-align: center;
	color: var(--sub);
	font-weight: 600;
	border: 1px dashed #2b2b34;
	border-radius: 18px;
	background: #151517
}

.workout-top-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 2px
}

.workout-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0
}

.workout-calendar {
	width: 36px;
	height: 36px;
	background: #1a1a1d;
	border: 2px solid #5a5a62;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
}

.workout-calendar-header {
	color: #8b8da0;
	font-size: 7px;
	font-weight: 600;
	text-align: center;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.workout-calendar-day {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}

.workout-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0
}

.workout-actions button img {
	width: 14px;
	height: 14px
}

.workout-overview-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0
}

.workout-meta-line {
	color: var(--sub);
	font-size: 12px;
	font-weight: 600
}

.workout-stats {
	display: flex;
	gap: 3px;
	margin-top: 0;
	margin-bottom: 12px;
	padding-left: 4px
}

.workout-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 80px
}

.workout-stat-label {
	color: var(--sub);
	font-size: 12px;
	font-weight: 600
}

.workout-stat-value {
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2
}

.workout-stat-location {
	min-width: 120px
}

.workout-stat-value-location {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0
}

.workout-stat-value-location .location-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	flex: 0 0 auto
}

.workout-gym-text {
	display: inline-block;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.workout-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	text-transform: uppercase
}

.workout-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.workout-avatar.placeholder {
	background: rgba(124, 92, 255, 0.15);
	border-color: rgba(124, 92, 255, 0.35)
}

.workout-exercise-main {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px
}

.workout-exercise-thumb {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.workout-exercise-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit
}

.workout-exercise-initial {
	display: none;
	font-weight: 700;
	font-size: 18px;
	color: #fff
}

.workout-exercise-thumb.placeholder {
	background: rgba(124, 92, 255, 0.15);
	border-color: rgba(124, 92, 255, 0.25)
}

.workout-exercise-thumb.placeholder .workout-exercise-initial {
	display: flex
}

.workout-exercise-main .workout-exercise-name {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	color: #fff
}

.workout-delete-btn,
.workout-edit-btn,
.workout-reuse-btn {
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	border-radius: 10px;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity .2s, background .2s;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-delete-btn:hover,
.workout-edit-btn:hover,
.workout-reuse-btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25)
}

.workout-reuse-btn img,
.workout-edit-btn img,
.workout-delete-btn img {
	width: 14px;
	height: 14px;
	display: block;
	filter: invert(1)
}

.exercise-info-btn {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity .2s, background .2s, border-color .2s;
}

.exercise-info-btn img {
	width: 14px;
	height: 14px;
	display: block;
	filter: invert(1);
}

.workout-edit-exercise-delete {
	width: 28px;
	height: 28px
}

.workout-edit-exercise-delete img {
	width: 14px;
	height: 14px
}

.exercise-info-btn:hover,
.exercise-info-btn:focus-visible {
	background: rgba(124, 92, 255, 0.2);
	border-color: rgba(124, 92, 255, 0.4);
	outline: none;
}

.workout-edit-mode .workout-summary {
	display: none
}

.workouts-main-list li .workout-summary {
	display: block
}

.workout-edit-name {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 8px;
	padding: 6px 10px;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 8px
}

.workout-edit-name[readonly] {
	cursor: default;
	opacity: 0.8
}

.workout-edit-exercise {
	background: #1a1a1d;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 8px
}

.workout-edit-exercise-title {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 0;
	padding-right: 90px;
	margin-top: -4px;
}

.workout-edit-exercise-title .workout-exercise-name {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.workout-edit-exercise-title .workout-exercise-name {
	margin: 0;
	font-size: 17px;
	line-height: 1.2;
	white-space: normal
}

.workout-edit-exercise .workout-exercise-thumb.small {
	width: 52px;
	height: 52px;
	border-radius: 50%
}

.workout-edit-exercise .workout-exercise-thumb.small img {
	border-radius: 50%
}

.workout-edit-exercise .workout-exercise-thumb.small .workout-exercise-initial {
	display: flex;
	font-size: 14px
}

.workout-edit-top-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap
}

.workout-edit-top-actions .btn {
	flex: 1;
	margin: 0;
	width: 100%
}

.workout-quick-add-wrap {
	flex: 1;
	min-width: 180px;
	position: relative
}

.workout-quick-add-input {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 700;
	font-size: 14px
}

.workout-quick-add-input::placeholder {
	color: #8f90a6
}

.workout-quick-add-suggestions {
	position: absolute;
	background: #1a1a1d;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	margin-top: 4px;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	display: none;
	z-index: 20;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35)
}

.workout-quick-add-suggestions.show {
	display: block
}

.workout-quick-add-suggestion {
	padding: 10px;
	font-weight: 600;
	color: #dfe0e6;
	cursor: pointer
}

.workout-quick-add-suggestion:hover {
	background: #292933
}

.workout-edit-exercise-name {
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 8px;
	padding: 6px 10px;
	font-weight: 700;
	font-size: 13px;
	word-wrap: break-word;
	overflow-wrap: break-word
}

.workout-edit-exercise-delete {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0
}

.workout-edit-exercise-delete img {
	width: 14px;
	height: 14px;
	display: block;
	filter: invert(1)
}

.workout-edit-exercise-header .workout-edit-exercise-delete {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0
}

.workout-edit-sets {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px
}

/* Reduce space below exercise header for cardio */
.cardio-mode .workout-edit-sets {
	margin-top: 4px;
}

.workout-edit-set-row {
	display: grid;
	grid-template-columns: 56px 0.9fr 1fr 36px;
	align-items: center;
	gap: 10px;
	padding: 2px 0
}

.workout-edit-sets.bodyweight .workout-edit-set-row {
	grid-template-columns: 56px 1fr 36px
}

.workout-edit-set-row.data {
	border-radius: 0;
	padding: 6px 12px;
	margin: 0 -12px
}

.workout-edit-set-row.data.even {
	background: rgba(255, 255, 255, 0.03)
}

.workout-edit-sets.view-mode {
	margin-top: 10px
}

.workout-edit-set-row.view {
	padding: 4px 10px;
	margin: 0 -10px
}

.workout-edit-set-row.view.even {
	background: rgba(255, 255, 255, 0.03)
}

.workout-details.readonly .workout-edit-set-delete,
.workout-details.readonly .workout-edit-set-row .action-col {
	display: none !important
}

.workout-view-value {
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: #e5e6ee
}

.workout-edit-set-header {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sub);
	opacity: .85
}

.workout-edit-set-header .set-col {
	text-align: left;
	padding-left: 3px
}

.workout-edit-set-header .weight-col,
.workout-edit-set-header .reps-col {
	text-align: center
}

.workout-edit-set-number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	flex-shrink: 0
}

.workout-edit-set-input {
	width: 100%;
	background: transparent;
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 4px 0;
	text-align: center
}

.workout-edit-set-input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
	text-align: center
}

.workout-edit-set-input::-webkit-outer-spin-button,
.workout-edit-set-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0
}

.workout-edit-set-input:focus {
	outline: none
}

.workout-edit-set-input::placeholder {
	color: #4c4c58;
	text-align: center
}

.workout-edit-set-row .weight-col,
.workout-edit-set-row .reps-col {
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-edit-set-row .action-col {
	display: flex;
	justify-content: flex-end
}

.workout-edit-set-delete {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center
}

.workout-edit-set-delete img {
	width: 14px;
	height: 14px;
	display: block;
	filter: invert(1)
}

.workout-edit-add-set {
	background: #2a2a33;
	border: 1px solid #3a3a45;
	color: #fff;
	border-radius: 12px;
	padding: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 8px;
	width: 100%
}

.workout-edit-add-exercise {
	background: var(--accent);
	border: 1px solid transparent;
	color: #fff;
	border-radius: 12px;
	padding: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 12px;
	width: 100%
}

.workout-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px
}

.workout-edit-save {
	background: var(--accent);
	border: 0;
	color: #fff;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	flex: 1
}

.workout-edit-cancel {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex: 1
}

.workout-summary {
	font-weight: 800;
	font-size: 14px;
	margin: 0;
	color: #fff;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	scrollbar-width: none;
	-ms-overflow-style: none
}

.workout-summary::-webkit-scrollbar {
	display: none
}

.workout-date {
	color: var(--sub);
	font-size: 10px;
	font-weight: 600;
	margin-left: 4px
}

.workout-date {
	color: var(--sub);
	font-size: 11px;
	margin-bottom: 6px
}

.workout-details {
	display: none;
	padding-top: 4px;
	border-top: none;
	margin-top: 6px
}

.workout-details.expanded {
	display: block
}

.workout-exercise {
	margin-bottom: 12px
}

.workout-exercise:last-of-type {
	margin-bottom: 0
}

.workout-exercise-name {
	font-weight: 700;
	margin-bottom: 0;
	color: #dfe0e6;
	font-size: 17px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.25
}

.workout-set-list {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.workout-set {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 7px;
	border-radius: 8px;
	background: rgba(20, 20, 26, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.04)
}

.workout-set-number {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05)
}

.workout-set-weight {
	flex: 1;
	font-weight: 700;
	font-size: 13px;
	color: #e5e6ee
}

.workout-set-reps {
	font-weight: 600;
	font-size: 12px;
	color: var(--sub)
}

.workout-exercise-empty {
	color: var(--sub);
	font-size: 13px;
	padding: 8px 0
}

/* Manual input */
.manual-input {
	position: relative;
	margin: 0 auto 0;
	width: 85%
}

.exercise-input {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 12px;
	font-weight: 700;
	font-size: 16px;
	text-align: center
}

.exercise-input:focus {
	outline: none;
	border-color: var(--accent)
}

.exercise-input::placeholder {
	color: var(--sub)
}

.autocomplete-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #1a1a1d;
	border: 1px solid #3a3a45;
	border-radius: 12px;
	margin-top: 4px;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .5)
}

.autocomplete-suggestions.show {
	display: block
}

.autocomplete-item {
	padding: 12px;
	cursor: pointer;
	color: #dfe0e6;
	font-weight: 600;
	transition: background .2s
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
	background: #1b1b1f
}

.or-divider {
	text-align: center;
	color: var(--sub);
	font-size: 14px;
	margin: 0
}

/* Home exercise selector wrapper (reuses global modal selector) */
.home-exercise-selector {
	margin: 16px auto 0;
	width: 85%;
	display: flex;
	flex-direction: column;
	gap: 6px
}

.home-exercise-selector-header {
	display: flex;
	justify-content: center
}

.home-exercise-selector-btn {
	width: 100%;
	/* use default .btn styling so it matches "Take photo" exactly */
}

/* Progress */
.progress-chart-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px
}

/* One Rep Max Calculator */
.progress-orm-calculator-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.progress-orm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.progress-orm-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: #dfe0e6;
}

.progress-orm-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.progress-orm-inputs {
	display: flex;
	gap: 16px;
}

.progress-orm-input-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.progress-orm-label {
	font-size: 13px;
	font-weight: 700;
	color: #a3a5b7;
}

.progress-orm-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.progress-orm-input-wrapper input,
.progress-orm-input-group input {
	width: 100%;
	padding: 12px 14px;
	background: #1a1a1f;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	color: #dfe0e6;
	font-size: 15px;
	font-weight: 700;
	box-sizing: border-box;
}

.progress-orm-input-wrapper input:focus,
.progress-orm-input-group input:focus {
	outline: none;
	border-color: var(--accent);
	background: #202025;
}

.progress-orm-unit {
	font-size: 13px;
	font-weight: 700;
	color: #a3a5b7;
	margin-left: 8px;
	white-space: nowrap;
}

.progress-orm-input-wrapper .progress-orm-unit {
	position: absolute;
	right: 14px;
	margin-left: 0;
	pointer-events: none;
}

.progress-orm-input-wrapper input {
	padding-right: 50px;
}

.progress-orm-result {
	padding: 16px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.15), rgba(0, 0, 0, 0.0));
	border: 1px solid rgba(124, 92, 255, 0.2);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

.progress-orm-result-label {
	font-size: 12px;
	font-weight: 700;
	color: #a3a5b7;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
}

.progress-orm-result-value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	justify-content: center;
}

.progress-orm-result-value #orm-result {
	font-size: 28px;
	font-weight: 900;
	color: #dfe0e6;
	line-height: 1;
}

.progress-orm-result-value .progress-orm-unit {
	font-size: 16px;
	font-weight: 700;
	color: #a3a5b7;
}

.progress-chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px
}

.progress-chart-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

.progress-chart-date-input {
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 500;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: 0.3px;
	min-width: 120px;
	max-width: 130px
}

.progress-chart-date-input:focus {
	outline: none;
	border-color: var(--accent)
}

.progress-chart-date-input::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.7;
	cursor: pointer
}

.progress-chart-date-input::-webkit-calendar-picker-indicator:hover {
	opacity: 1
}

.progress-chart-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	margin-bottom: 0
}

#progress-chart {
	width: 100%;
	height: 220px;
	display: block;
	border-radius: 16px;
	background: #101015;
	border: 1px solid #242429
}

.progress-y-labels {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	/* matches padX in JS so labels align to axis */
	pointer-events: none;
	font-size: 11px;
	font-weight: 600;
	color: #8b8da0;
}

.progress-y-labels span {
	position: absolute;
	right: 4px;
	/* a bit closer to the axis */
	transform: translateY(-50%);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.progress-x-labels {
	position: absolute;
	left: 40px;
	right: 10px;
	bottom: 6px;
	pointer-events: none;
	font-size: 11px;
	font-weight: 600;
	color: #8b8da0;
}

.progress-x-labels span {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Y-axis unit label */
.progress-chart-wrapper::before {
	content: attr(data-unit);
	position: absolute;
	left: 18px;
	/* align with numeric labels */
	top: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #8b8da0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.progress-tooltip {
	position: absolute;
	padding: 4px 8px;
	border-radius: 8px;
	background: #5b42ff;
	/* iets lichter/paars zodat het uitspringt */
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	transform: translate(-50%, -120%);
}

.progress-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sub);
	font-size: 14px;
	font-weight: 600;
	pointer-events: none
}

.progress-empty.hidden {
	display: none
}

.progress-inline-form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 0
}

.progress-weight-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 0 0 auto;
	max-width: 80px
}

.progress-weight-label {
	color: #8b8da0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding-left: 12px
}

.progress-weight-input-wrapper {
	display: flex;
	align-items: center;
	background: #0f0f12;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 0;
	overflow: hidden
}

.progress-weight-input-wrapper:focus-within {
	border-color: var(--accent)
}

.progress-inline-form #progress-weight {
	background: transparent;
	border: none;
	color: #fff;
	padding: 10px 12px;
	font-weight: 700;
	font-size: 15px;
	width: 100%;
	text-align: left;
	-moz-appearance: textfield;
	appearance: textfield
}

.progress-inline-form #progress-weight::-webkit-outer-spin-button,
.progress-inline-form #progress-weight::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.progress-inline-form #progress-weight:focus {
	outline: none
}

.progress-inline-form #progress-weight::placeholder {
	color: #4c4c58
}

.progress-inline-unit {
	color: #8b8da0;
	font-size: 13px;
	font-weight: 600;
	padding-right: 12px;
	flex-shrink: 0
}

.progress-inline-submit {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
	white-space: nowrap
}

.progress-muscle-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px
}

.progress-muscle-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px
}

.progress-muscle-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

.progress-muscle-filters {
	display: flex;
	gap: 8px;
	background: #131319;
	border: 1px solid #272731;
	border-radius: 999px;
	padding: 4px
}

.progress-filter-btn {
	background: transparent;
	border: 0;
	color: #a6a7ab;
	font-weight: 600;
	font-size: 13px;
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, color .2s
}

.progress-filter-btn.active {
	background: var(--accent);
	color: #fff
}

.progress-muscle-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px
}

.progress-muscle-chart-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center
}

#progress-muscle-chart {
	width: 100%;
	aspect-ratio: 1/1;
	display: block;
	max-width: 260px;
	margin: 0 auto
}

.progress-muscle-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

.progress-muscle-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #dfe0e6;
	font-size: 13px;
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 999px;
	padding: 6px 10px
}

.progress-muscle-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%
}

.progress-muscle-value {
	font-weight: 700;
	color: #fff;
	margin-left: 2px
}

.progress-muscle-center-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none
}

.progress-muscle-center-label .label {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	margin-bottom: 2px
}

.progress-muscle-center-label .value {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7)
}

.progress-muscle-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sub);
	font-size: 14px;
	font-weight: 600;
	pointer-events: none
}

.progress-exercise-insights-card {
	padding: 22px 22px 6px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 8px
}

.progress-heatmap-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px
}

.progress-heatmap-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	flex: 1;
	text-align: center
}

.progress-heatmap-nav-btn {
	background: #2a2a33;
	border: 1px solid #3a3a45;
	border-radius: 8px;
	color: #fff;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	transition: background 0.2s
}

.progress-heatmap-nav-btn:hover {
	background: #32323d
}

.progress-heatmap-nav-btn:active {
	transform: scale(0.95)
}

.progress-heatmap-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px
}

.heatmap-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--sub);
	padding: 4px 0
}

.progress-heatmap-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px
}

.progress-heatmap-week-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	padding: 0;
	justify-items: center;
	width: 100%;
	overflow: hidden
}

.heatmap-day {
	aspect-ratio: 1;
	border-radius: 4px;
	background: #1a1a1d;
	border: 1px solid #2a2a2f;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative
}

.heatmap-day.empty {
	background: transparent;
	border: none;
	cursor: default
}

.heatmap-day:hover:not(.empty) {
	transform: scale(1.1);
	z-index: 1;
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.3)
}

.heatmap-day.intensity-0 {
	background: #1a1a1d;
	border-color: #2a2a2f
}

.heatmap-day.intensity-1 {
	background: #1e3a5f;
	border-color: #2a4a6f
}

.heatmap-day.intensity-2 {
	background: #2a5a8f;
	border-color: #3a6a9f
}

.heatmap-day.intensity-3 {
	background: #3a7abf;
	border-color: #4a8acf
}

.heatmap-day.intensity-4 {
	background: #4a9aef;
	border-color: #5aaaff
}

.heatmap-day-week {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative;
	min-height: 45px
}

.heatmap-day-week:hover {
	transform: scale(1.05);
	z-index: 1
}

.heatmap-day-label {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: transparent;
	border: 2px solid #2a2a2f;
	transition: all 0.2s
}

.heatmap-date-label {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	transition: color 0.2s
}

.heatmap-day-week .heatmap-day-label {
	color: #a6a7ab;
	border-color: #2a2a2f
}

.heatmap-day-week .heatmap-date-label {
	color: #a6a7ab
}

.heatmap-day-week.has-sets .heatmap-day-label {
	border-color: #7c5cff;
	color: #7c5cff;
	opacity: 1 !important
}

.heatmap-day-week.has-sets:not(.today) .heatmap-date-label {
	color: #a6a7ab;
	opacity: 1 !important
}

.heatmap-day-week.today .heatmap-date-label {
	color: #a6a7ab
}

.heatmap-day-week.past:not(.has-sets) .heatmap-day-label {
	opacity: 0.6
}

.heatmap-day-week.past:not(.has-sets) .heatmap-date-label {
	opacity: 0.6;
	color: #a6a7ab
}

.heatmap-day-week.future:not(.has-sets) .heatmap-day-label {
	opacity: 0.4
}

.heatmap-day-week.future:not(.has-sets) .heatmap-date-label {
	opacity: 0.4;
	color: #a6a7ab
}

.progress-heatmap-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #2a2a2f
}

.heatmap-legend-label {
	font-size: 11px;
	color: var(--sub);
	font-weight: 600
}

.heatmap-legend-colors {
	display: flex;
	gap: 4px
}

.heatmap-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid #2a2a2f
}

.heatmap-legend-color[data-level="0"] {
	background: #1a1a1d;
	border-color: #2a2a2f
}

.heatmap-legend-color[data-level="1"] {
	background: #1e3a5f;
	border-color: #2a4a6f
}

.heatmap-legend-color[data-level="2"] {
	background: #2a5a8f;
	border-color: #3a6a9f
}

.heatmap-legend-color[data-level="3"] {
	background: #3a7abf;
	border-color: #4a8acf
}

.heatmap-legend-color[data-level="4"] {
	background: #4a9aef;
	border-color: #5aaaff
}

.progress-exercise-insights-card .progress-pr-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

.progress-exercise-insights-card .progress-pr-header p {
	display: none
}

/* Monthly Heatmap Styles */
.progress-heatmap-monthly-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px
}

.progress-heatmap-monthly-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px
}

.progress-heatmap-monthly-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	flex: 1;
	text-align: center
}

.progress-heatmap-nav-btn {
	background: #2a2a33;
	border: 1px solid #3a3a45;
	border-radius: 8px;
	color: #fff;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	transition: background 0.2s
}

.progress-heatmap-nav-btn:hover {
	background: #32323d
}

.progress-heatmap-nav-btn:active {
	transform: scale(0.95)
}

.progress-heatmap-monthly-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px
}

.heatmap-day-month {
	aspect-ratio: 1;
	border-radius: 4px;
	background: #1a1a1d;
	border: 1px solid #2a2a2f;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px
}

.heatmap-day-month.empty {
	background: transparent;
	border: none;
	cursor: default
}

.heatmap-day-month:hover:not(.empty) {
	transform: scale(1.1);
	z-index: 1;
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.3)
}

.heatmap-day-month.has-sets {
	background: #7c5cff;
	border-color: #7c5cff
}

.heatmap-day-month.has-sets:hover {
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.5)
}

.heatmap-date-label-month {
	font-size: 12px;
	font-weight: 600;
	color: #a6a7ab
}

.heatmap-day-month.has-sets .heatmap-date-label-month {
	color: #fff
}

.heatmap-day-month.past:not(.has-sets) {
	opacity: 0.6
}

.heatmap-day-month.future:not(.has-sets) {
	opacity: 0.4
}

.progress-pr-selector {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 0
}

.progress-pr-select-btn {
	width: 100%;
	background: linear-gradient(135deg, #7c5cff 0%, #5b42ff 100%);
	border: none;
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.3);
	transition: all 0.2s
}

.progress-pr-select-btn:hover {
	box-shadow: 0 6px 16px rgba(124, 92, 255, 0.4);
	transform: translateY(-1px)
}

.progress-pr-results {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.progress-pr-empty {
	color: var(--sub);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	padding: 24px
}

.progress-pr-result {
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 14px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: all 0.2s;
	position: relative;
	overflow: hidden
}

.progress-pr-result::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #7c5cff, transparent);
	opacity: 0;
	transition: opacity 0.2s
}

.progress-pr-result:hover {
	border-color: #2d2d38;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2)
}

.progress-pr-result:hover::before {
	opacity: 0.6
}

.progress-pr-result-title {
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 2px
}

.progress-pr-result-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #fff;
	font-size: 14px
}

.progress-pr-result-meta span {
	display: flex;
	align-items: center;
	gap: 6px
}

.progress-pr-result-meta strong {
	font-weight: 700;
	color: #fff;
	font-size: 15px
}

.progress-pr-result-meta span:not(:first-child) {
	color: #8b8da0;
	font-size: 13px;
	font-weight: 500
}

.progress-pr-timeline-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px
}

.progress-pr-timeline-card .progress-pr-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

.progress-pr-timeline {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 320px;
	overflow-y: auto
}

.progress-pr-timeline-item {
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: border-color .2s
}

.progress-pr-timeline-item:hover {
	border-color: #3a3a45
}

.progress-pr-timeline-date {
	color: #8b8da0;
	font-size: 12px;
	font-weight: 600;
	min-width: 100px;
	flex-shrink: 0
}

.progress-pr-timeline-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px
}

.progress-pr-timeline-exercise {
	color: #fff;
	font-size: 15px;
	font-weight: 700
}

.progress-pr-timeline-value {
	color: #dfe0e6;
	font-size: 13px;
	font-weight: 600
}

.progress-overload-card {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px
}

.progress-overload-card .progress-pr-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

.progress-overload-tracker {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 400px;
	overflow-y: auto
}

.progress-overload-item {
	background: #16161a;
	border: 1px solid #242429;
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	transition: border-color .2s
}

.progress-overload-item:hover {
	border-color: #3a3a45
}

.progress-overload-item.improving {
	border-left: 3px solid #3ddc84
}

.progress-overload-item.declining {
	border-left: 3px solid #ef4444
}

.progress-overload-item.plateau {
	border-left: 3px solid #7c5cff
}

.progress-overload-exercise {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1
}

.progress-overload-status-icon {
	font-size: 16px;
	font-weight: 700;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0
}

.progress-overload-item.improving .progress-overload-status-icon {
	background: rgba(61, 220, 132, 0.2);
	color: #3ddc84
}

.progress-overload-item.declining .progress-overload-status-icon {
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444
}

.progress-overload-item.plateau .progress-overload-status-icon {
	background: rgba(124, 92, 255, 0.2);
	color: #7c5cff
}

.progress-overload-name-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.progress-overload-name {
	color: #fff;
	font-size: 15px;
	font-weight: 700
}

.progress-overload-sets {
	color: #8b8da0;
	font-size: 12px;
	font-weight: 600
}

.progress-overload-info {
	display: flex;
	align-items: center
}

.progress-overload-change {
	color: #dfe0e6;
	font-size: 14px;
	font-weight: 700
}

/* (exercise history chart removed) */

.settings-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px
}

.settings-title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	font-family: 'Inter', sans-serif
}

.settings-profile-card {
	background: var(--accent);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	padding: 20px 22px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 12px 24px rgba(124, 92, 255, 0.25);
	font-family: 'Inter', sans-serif;
	margin-bottom: 20px
}

.settings-profile-header {
	display: flex;
	align-items: center;
	gap: 16px
}

.settings-avatar {
	flex-shrink: 0
}

.settings-profile-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px
}

.settings-username {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	font-family: 'Inter', sans-serif
}

.settings-email {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	font-family: 'Inter', sans-serif
}

.settings-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-top: 8px;
	margin-bottom: 6px
}

.settings-stat-box {
	text-align: center;
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2)
}

.settings-profile-gym {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px
}

.settings-profile-gym-header {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	text-align: center
}

.settings-profile-gym-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .95
}

.settings-profile-gym-label {
	color: rgba(255, 255, 255, 0.95);
	font-size: 14px;
	font-weight: 700
}

.settings-profile-gym-field {
	position: relative;
	width: 70%;
	margin: 0 auto
}

.settings-profile-card .settings-gym-input {
	width: 100%;
	min-width: 0;
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(15, 15, 18, 0.25)
}

.settings-profile-card .settings-profile-gym-field .settings-gym-input {
	text-align: center;
	padding-left: 34px;
	padding-right: 34px
}

.settings-profile-card .settings-gym-input:focus {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(15, 15, 18, 0.32)
}

.settings-profile-card .settings-gym-clear {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(15, 15, 18, 0.35)
}

.settings-profile-card .gym-autocomplete-dropdown {
	left: 0;
	right: 0
}

.settings-report-problem-wrap {
	display: flex;
	justify-content: center;
	margin-top: 8px
}

.settings-report-problem-btn {
	width: 70%;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	text-align: center
}

.settings-report-problem-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.28)
}

.settings-report-problem-label {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: 0
}

.settings-stat-value {
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	font-family: 'Inter', sans-serif;
	margin-bottom: 4px
}

.settings-stat-label {
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-family: 'Inter', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5px
}

.settings-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px
}

.settings-option-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: linear-gradient(135deg, #18181d, #121215);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}

.settings-option-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1
}

.settings-option-icon {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: contain;
	filter: brightness(0) invert(1)
}

.settings-option-left svg {
	width: 20px;
	height: 20px;
	color: #dfe0e6;
	flex-shrink: 0
}

.settings-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	object-fit: contain;
	opacity: 0.9;
	filter: brightness(0) invert(1)
}

.settings-option-label {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: 'Inter', sans-serif
}

.settings-option-label-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.settings-option-label-row {
	display: flex;
	align-items: center;
	gap: 8px
}

.settings-info-btn {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.18);
	color: rgba(255, 255, 255, 0.92);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	line-height: 0;
	padding: 0;
	cursor: pointer
}

.settings-info-btn:hover {
	background: rgba(0, 0, 0, 0.28)
}

.settings-info-btn:active {
	transform: scale(0.98)
}

.settings-info-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: 2px
}

/* Gym dashboard charts (simple bars) */
.gym-chart {
	padding: 0 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.gym-chart-empty {
	color: var(--sub);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 0
}

.gym-chart-row {
	display: flex;
	align-items: center;
	gap: 10px
}

.gym-chart-label {
	flex: 0 0 44%;
	min-width: 0;
	color: #dfe0e6;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.gym-chart-barwrap {
	flex: 1;
	height: 10px;
	background: #1a1a1f;
	border: 1px solid #242429;
	border-radius: 999px;
	overflow: hidden
}

.gym-chart-bar {
	height: 100%;
	background: linear-gradient(90deg, #7c5cff, #5b42ff);
	border-radius: 999px
}

.gym-chart-value {
	flex: 0 0 40px;
	text-align: right;
	color: #8b8da0;
	font-size: 12px;
	font-weight: 700
}

.gym-reports-top-btn {
	background: rgba(21, 21, 26, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 10px;
	min-width: 86px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer
}

.gym-reports-top-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: #7c5cff;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1
}

/* Gym dashboard period toggle */
.gym-dashboard-controls {
	display: flex;
	justify-content: center
}

.gym-period-toggle {
	display: inline-flex;
	gap: 6px;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 4px
}

.gym-period-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: #c9cad6;
	font-weight: 800;
	font-size: 12px;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer
}

.gym-period-btn.active {
	background: linear-gradient(135deg, #7c5cff, #5b42ff);
	color: #fff;
	box-shadow: 0 6px 18px rgba(124, 92, 255, 0.25)
}

.gym-comparison-toggle-wrapper {
	display: flex;
	justify-content: center;
	padding: 0 22px
}

.gym-comparison-toggle {
	display: inline-flex;
	gap: 6px;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 4px
}

.gym-comparison-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: #c9cad6;
	font-weight: 800;
	font-size: 11px;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap
}

.gym-comparison-btn.active {
	background: linear-gradient(135deg, #7c5cff, #5b42ff);
	color: #fff;
	box-shadow: 0 6px 18px rgba(124, 92, 255, 0.25)
}

.gym-stat-comparison {
	margin-top: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2
}

.gym-comparison-positive {
	color: #3ddc84
}

.gym-comparison-negative {
	color: #ff5c9a
}

.gym-comparison-neutral {
	color: rgba(255, 255, 255, 0.5)
}

/* Gym dashboard muscle chart reuses Progress tab "Muscle Focus" styles */

/* Gym dashboard: most used machines (podium + ranked bars) */
.gym-machines-wrap {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 12px;
}

.gym-podium {
	display: flex;
	align-items: flex-end;
	gap: 10px
}

.gym-podium-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	min-width: 0;
	justify-content: flex-end;
}

.gym-podium-item {
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(135deg, #15151a, #101014);
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.gym-podium-item.rank-1 {
	background: linear-gradient(145deg, rgba(107, 94, 226, 0.3), rgba(72, 103, 170, 0.22));
	border-color: rgba(122, 128, 209, 0.38);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(70, 79, 158, 0.15)
}

.gym-podium-item.rank-2 {
	background: linear-gradient(145deg, rgba(41, 122, 145, 0.32), rgba(58, 145, 123, 0.2));
	border-color: rgba(76, 163, 170, 0.32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(31, 98, 117, 0.12)
}

.gym-podium-item.rank-3 {
	background: linear-gradient(145deg, rgba(132, 79, 122, 0.28), rgba(166, 96, 112, 0.2));
	border-color: rgba(167, 108, 140, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(114, 71, 102, 0.11)
}

.gym-podium-rank {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, 0.12);
	flex-shrink: 0;
}

.gym-podium-name {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	max-width: 100%;
	width: 100%;
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
	padding: 0 4px;
	margin-bottom: 8px;
	margin-top: 1px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.gym-ranked {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.gym-ranked.collapsed .gym-ranked-row.extra {
	display: none
}

.gym-machines-expander {
	display: flex;
	justify-content: center
}

.gym-expander-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 999px;
	padding: 7px 12px;
	color: #dfe0e6;
	font-weight: 900;
	font-size: 12px;
	cursor: pointer
}

.gym-expander-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(1px);
	transition: transform .15s ease
}

.gym-expander-chevron svg {
	display: block
}

.gym-expander-btn.open .gym-expander-chevron {
	transform: rotate(180deg)
}

/* Peak times mini toggle (Hours / Days) */
.gym-mini-toggle {
	display: inline-flex;
	gap: 6px;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 4px
}

.gym-mini-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: #c9cad6;
	font-weight: 900;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer
}

.gym-mini-btn.active {
	background: rgba(124, 92, 255, 0.22);
	color: #fff;
	border: 1px solid rgba(124, 92, 255, 0.28)
}

.gym-peak-header {
	display: flex;
	flex-direction: column;
	gap: 1px
}

.gym-peak-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px
}

.gym-peak-hour-day-wrap {
	padding: 0;
	display: block;
	justify-content: flex-start;
	margin-top: 0
}

.gym-peak-hour-day-wrap.hidden {
	display: none
}

.gym-peak-hour-day-select {
	appearance: none;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: #e9eaf2;
	padding: 7px 30px 7px 10px;
	font-size: 11.5px;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, #b8b9c8 50%), linear-gradient(135deg, #b8b9c8 50%, transparent 50%);
	background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box
}

.gym-dashboard-account-actions {
	display: flex;
	gap: 12px
}

.gym-dashboard-account-actions-inline {
	margin: 14px 0 0
}

.gym-dashboard-action-btn {
	flex: 1;
	padding: 14px 20px;
	border: none;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	transition: transform .15s ease, box-shadow .15s ease
}

.gym-dashboard-action-btn-logout {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 20px rgba(124, 92, 255, 0.25)
}

.gym-dashboard-action-btn-delete {
	background: #2a2a2f;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)
}

.report-problem-modal,
.gym-reports-modal {
	position: fixed;
	inset: 0;
	z-index: 11000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px
}

.report-problem-modal.hidden,
.gym-reports-modal.hidden {
	display: none
}

.report-problem-backdrop,
.gym-reports-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78)
}

.report-problem-content,
.gym-reports-content {
	position: relative;
	width: 100%;
	max-width: 430px;
	max-height: 86vh;
	overflow: auto;
	background: #17171c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45)
}

.report-problem-header,
.gym-reports-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.report-problem-header h3,
.gym-reports-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: #fff
}

.report-problem-close,
.gym-reports-close {
	background: transparent;
	border: none;
	color: #dfe0e6;
	font-size: 18px;
	cursor: pointer
}

.report-problem-body {
	padding: 16px 18px 12px;
	display: flex;
	flex-direction: column;
	gap: 12px
}

.report-problem-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #e8e8ef
}

.report-problem-select-btn,
.report-problem-select {
	width: 100%;
	background: #0f0f12;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	color: #fff;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	text-align: left
}

.report-problem-note {
	width: 100%;
	min-height: 72px;
	background: #0f0f12;
	border: 1px solid #2b2b34;
	border-radius: 10px;
	color: #fff;
	padding: 10px 12px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	resize: vertical;
	box-sizing: border-box
}

.report-problem-note-count {
	text-align: right;
	margin-top: 4px;
	font-size: 11px;
	color: #9494a5
}

.report-problem-actions {
	padding: 14px 18px 18px;
	display: flex;
	gap: 10px
}

.report-problem-actions .btn {
	flex: 1
}

.gym-reports-loading,
.gym-reports-empty {
	padding: 18px;
	color: #a9a9b8;
	font-size: 14px;
	text-align: center
}

.gym-reports-list {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.gym-report-item {
	background: #121217;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px
}

.gym-report-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px
}

.gym-report-exercise {
	color: #fff;
	font-size: 14px;
	font-weight: 700
}

.gym-report-issue {
	color: #7c5cff;
	font-size: 12px;
	font-weight: 700
}

.gym-report-note {
	color: #c9cad6;
	font-size: 13px;
	margin-top: 4px
}

.gym-report-time {
	color: #9494a5;
	font-size: 11px;
	margin-top: 6px
}

.gym-peak-canvas {
	display: block;
	width: 100%;
	height: 130px
}

/* Peak times histogram (vertical bars like classic analytics charts) */
.gym-peak-hist {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 10px;
	align-items: stretch
}

.gym-peak-y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 0 22px;
	color: rgba(223, 224, 230, 0.55);
	font-weight: 800;
	font-size: 12px
}

.gym-peak-plot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.gym-peak-bars {
	height: 130px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	align-items: end;
	padding: 10px 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10)
}

.gym-peak-bars.hour-mode {
	gap: 3px
}

.gym-peak-baritem {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	position: relative;
	cursor: pointer
}

.gym-peak-bar {
	width: 100%;
	max-width: 22px;
	border-radius: 10px 10px 4px 4px;
	background: linear-gradient(180deg, #7c5cff, #00d4ff);
	box-shadow: 0 10px 22px rgba(0, 212, 255, 0.10)
}

.gym-peak-bars.hour-mode .gym-peak-bar {
	max-width: 28px
}

.gym-peak-baritem.active .gym-peak-bar {
	filter: brightness(1.12);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 14px 24px rgba(0, 212, 255, 0.24)
}

.gym-peak-x {
	position: relative;
	height: 18px;
	color: rgba(223, 224, 230, 0.55);
	font-weight: 800;
	font-size: 12px
}

.gym-peak-x.hour span {
	position: absolute;
	transform: translateX(-50%);
	top: 2px
}

.gym-peak-x.weekday {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px
}

.gym-peak-x.weekday span {
	text-align: center
}

.gym-peak-tooltip {
	position: absolute;
	bottom: 100%;
	transform: translate(-50%, -8px);
	background: rgba(17, 17, 22, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 8px 10px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 3;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35)
}

.gym-peak-tooltip.show {
	opacity: 1
}

.gym-peak-tooltip div:last-child {
	color: #c6c9da;
	font-weight: 600;
	margin-top: 2px
}

/* Make gym donut slightly smaller than Progress tab donut */
#gym-muscle-chart {
	width: 100%;
	aspect-ratio: 1/1;
	display: block;
	max-width: 220px;
	margin: 0 auto
}

#gym-categories-chart {
	width: 100%;
	aspect-ratio: 1/1;
	display: block;
	max-width: 220px;
	margin: 0 auto
}

/* Line charts for volume and users */
.gym-chart-line {
	position: relative;
	padding: 10px 18px 18px;
	min-height: 140px
}

.gym-chart-line canvas {
	display: block;
	width: 100%;
	height: 140px
}

.gym-line-xaxis {
	display: flex;
	justify-content: space-between;
	padding: 8px 0 0;
	color: rgba(223, 224, 230, 0.55);
	font-weight: 800;
	font-size: 11px
}

.gym-line-yaxis {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 0 22px;
	color: rgba(223, 224, 230, 0.55);
	font-weight: 800;
	font-size: 11px
}

.gym-ranked-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	min-height: 24px;
}

.gym-ranked-rank {
	flex: 0 0 22px;
	height: 22px;
	margin-right: 6px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #15151a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #c9cad6;
	font-weight: 900;
	font-size: 12px
}

.gym-ranked-label {
	flex: 0 0 38%;
	min-width: 0;
	color: #dfe0e6;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	line-height: 1.4;
	margin-top: 1px;
}

.gym-ranked-label::-webkit-scrollbar {
	display: none;
}

.gym-ranked-barwrap {
	flex: 0.8;
	height: 12px;
	background: #1a1a1f;
	border: 1px solid #242429;
	border-radius: 999px;
	overflow: hidden
}

.gym-ranked-bar {
	height: 100%;
	background: linear-gradient(90deg, #7c5cff, #00d4ff);
	border-radius: 999px
}

.gym-ranked-value {
	flex: 0 0 40px;
	margin-left: -6px;
	text-align: right;
	color: #dfe0e6;
	font-size: 12px;
	font-weight: 900
}

.settings-option-sublabel {
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 400;
	font-family: 'Inter', sans-serif;
	line-height: 1.4
}

.settings-gym-input {
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 8px;
	padding: 8px 34px 8px 12px;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	width: 180px;
	max-width: 100%;
	min-width: 120px;
	display: block;
	box-sizing: border-box
}

.settings-gym-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid #2b2b34;
	background: #0f0f12;
	color: rgba(255, 255, 255, 0.85);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 0 2px 0;
	line-height: 0;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer
}

.settings-gym-clear:active {
	transform: translateY(-50%) scale(0.98)
}

.settings-gym-clear:hover {
	background: #141418
}

.settings-gym-input:focus {
	outline: none;
	border-color: var(--accent);
	background: #141418
}

.settings-gym-input::placeholder {
	color: rgba(255, 255, 255, 0.4)
}

.gym-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #252528;
	border: 1px solid #333;
	border-radius: 8px;
	max-height: 200px;
	overflow-y: auto;
	z-index: 1000;
	margin-top: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}

.gym-autocomplete-item {
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid #333;
	color: #fff;
	font-size: 14px
}

.gym-autocomplete-item:hover {
	background: #2a2a2f
}

.gym-autocomplete-item:last-child {
	border-bottom: none
}

.gym-autocomplete-item-name {
	font-weight: 600;
	color: #fff
}

.gym-autocomplete-item-address {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 4px
}

.settings-option-right {
	flex-shrink: 0;
	position: relative
}

.settings-toggle {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px
}

.settings-toggle input {
	opacity: 0;
	width: 0;
	height: 0
}

.settings-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #2a2a2f;
	transition: .3s;
	border-radius: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px
}

.settings-toggle-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	transition: .3s;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}

.settings-toggle input:checked+.settings-toggle-slider {
	background-color: var(--accent)
}

.settings-toggle input:checked+.settings-toggle-slider:before {
	transform: translateX(24px)
}

.settings-toggle-label-left,
.settings-toggle-label-right {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	text-transform: lowercase;
	letter-spacing: 0.3px;
	opacity: 1;
	transition: opacity .3s
}

.settings-toggle input:checked+.settings-toggle-slider .settings-toggle-label-right {
	opacity: 1;
	color: #fff
}

.settings-toggle input:not(:checked)+.settings-toggle-slider .settings-toggle-label-left {
	opacity: 1;
	color: #fff
}

/* Progress access gate modal */
.progress-access-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center
}

.progress-access-modal.hidden {
	display: none
}

.progress-access-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(8px)
}

.progress-access-panel {
	position: relative;
	width: min(520px, 92vw);
	background: #121215;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	padding: 18px 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.progress-access-title {
	font-size: 18px;
	font-weight: 800;
	color: #fff
}

.progress-access-text {
	white-space: pre-line;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.4
}

.progress-access-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 6px
}

/* Weight unit options - vertical layout with white radio buttons */
.settings-unit-options {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.settings-unit-option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	position: relative
}

.settings-unit-option input[type="radio"] {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0
}

.settings-unit-label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	padding-left: 32px;
	cursor: pointer
}

.settings-unit-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	transition: all .2s
}

.settings-unit-option input[type="radio"]:checked+.settings-unit-label::before {
	background: var(--accent);
	border-color: var(--accent)
}

.settings-unit-option input[type="radio"]:checked+.settings-unit-label::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%
}

.settings-action-buttons {
	display: flex;
	gap: 12px;
	margin-top: 8px
}

.settings-logout-btn,
.settings-delete-account-btn {
	flex: 1;
	padding: 14px 20px;
	border: none;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	transition: transform .15s ease, box-shadow .15s ease
}

.settings-logout-btn {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 20px rgba(124, 92, 255, 0.25)
}

.settings-logout-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 22px rgba(124, 92, 255, 0.32);
	background: #6d4dff
}

.settings-delete-account-btn {
	background: #2a2a2f;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)
}

.settings-delete-account-btn:hover {
	transform: translateY(-1px);
	background: #323238;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3)
}

.logout-button {
	width: 100%;
	padding: 13px 16px;
	border: none;
	border-radius: 14px;
	background: linear-gradient(135deg, #ef4444, #bf2a2a);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(239, 68, 68, 0.25);
	transition: transform .15s ease, box-shadow .15s ease;
	font-family: 'Inter', sans-serif
}

.logout-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 22px rgba(239, 68, 68, 0.32)
}

.achievements-list {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px
}

.achievement-item {
	background: linear-gradient(135deg, #151517, #101014);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
	border-radius: 18px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden
}

.achievement-item:before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0));
	opacity: 0.4;
	pointer-events: none
}

.achievement-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px
}

.achievement-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #dfe0e6
}

.achievement-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em
}

.achievement-subtitle {
	font-size: 12px;
	color: #8b8da0;
	text-transform: uppercase;
	letter-spacing: .2em
}

.achievement-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px
}

.achievement-tier {
	padding: 6px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #202027, #17171b);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: 1px solid rgba(255, 255, 255, 0.1)
}

.achievement-count {
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	letter-spacing: .04em
}

.achievement-progresswrap {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
	position: relative
}

.achievement-progressbar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(135deg, #7c5cff, #4f3fe5)
}

/* Vision Chat */
.vision-header-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(124, 92, 255, 0.1);
	border: 2px solid var(--accent);
	border-radius: 50%;
	padding: 8px;
	animation: pulse 2s ease-in-out infinite;
}

.vision-header-icon svg {
	width: 100%;
	height: 100%
}

@keyframes pulse {

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

	50% {
		opacity: 0.8;
		transform: scale(1.05)
	}
}

#vision-chat-messages {
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: #2b2b34 transparent;
}

#vision-chat-messages::-webkit-scrollbar {
	width: 6px
}

#vision-chat-messages::-webkit-scrollbar-track {
	background: transparent
}

#vision-chat-messages::-webkit-scrollbar-thumb {
	background: #2b2b34;
	border-radius: 3px
}

.vision-message {
	display: flex;
	margin-bottom: 16px;
	animation: fadeIn 0.3s ease-in;
	align-items: flex-start;
	gap: 10px
}

.vision-message-user {
	justify-content: flex-end
}

.vision-message-bot {
	justify-content: flex-start
}

.vision-avatar {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(124, 92, 255, 0.1);
	border: 2px solid var(--accent);
	border-radius: 50%;
	padding: 6px;
}

.vision-avatar svg {
	width: 100%;
	height: 100%
}

.vision-message-content {
	max-width: calc(75% - 46px);
	padding: 14px 18px;
	border-radius: 18px;
	font-size: 15px;
	line-height: 1.6;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

.vision-message-user .vision-message-content {
	background: var(--accent);
	color: #0b0b0d;
	font-weight: 500;
}

.vision-message-bot .vision-message-content {
	background: #1a1a1d;
	border: 1px solid #2b2b34;
	color: #dfe0e6;
}

.vision-message-bot .vision-message-content strong {
	color: #fff;
	font-weight: 700;
}

.loading-dots {
	display: inline-block;
	width: 1.2em;
	text-align: left;
}

.loading-dots::after {
	content: '...';
	animation: loadingDots 1.4s steps(4, end) infinite;
}

@keyframes loadingDots {

	0%,
	20% {
		content: '.'
	}

	40% {
		content: '..'
	}

	60%,
	100% {
		content: '...'
	}
}

.vision-quick-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.vision-example-btn {
	background: #1a1a1d;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 8px 12px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	font-size: 11px;
	transition: border-color .2s, color .2s;
	flex: 0 0 auto;
}

.vision-example-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

#vision-content:not(.hidden) {
	display: flex;
	flex-direction: column;
	height: 100%
}

#vision-content.hidden {
	display: none !important
}

#vision-content>div {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0
}

#vision-chat-messages {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 8px
}

#vision-input {
	flex: 1;
	background: #1a1a1d;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 12px 16px;
	color: #fff;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	transition: border-color .2s
}

#vision-input:focus {
	outline: none;
	border-color: var(--accent)
}

#vision-send-btn {
	background: var(--accent);
	border: none;
	border-radius: 12px;
	padding: 12px 24px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	transition: opacity .2s, transform .1s
}

#vision-send-btn:hover {
	opacity: 0.9;
	transform: scale(1.02)
}

#vision-send-btn:active {
	transform: scale(0.98)
}

#vision-send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

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

/* Inline exercise video */
.exercise-video-inline {
	position: relative;
	width: 100%;
	margin: 10px 0;
	border-radius: 12px;
	overflow: hidden;
	background: #0b0b0d;
	border: 1px solid #242429;
}

.exercise-video-inline-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: background .2s, border-color .2s;
}

.exercise-video-inline-close:hover {
	background: rgba(0, 0, 0, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
}

.exercise-video-inline-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.exercise-video-inline-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* AI Detect Error Modal */
.ai-detect-error-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ai-detect-error-modal.hidden {
	display: none;
}

.ai-detect-error-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}

.ai-detect-error-content {
	position: relative;
	background: var(--panel);
	border: 1px solid #2a2a2f;
	border-radius: 20px;
	padding: 32px 24px;
	max-width: 320px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ai-detect-error-title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

.ai-detect-error-message {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--sub);
	line-height: 1.5;
}

.ai-detect-error-button {
	width: 100%;
	padding: 14px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	transition: background 0.2s;
}

.ai-detect-error-button:hover {
	background: #6d4dff;
}

.ai-detect-error-button:active {
	background: #5e3eff;
}

/* AI Detect Chat Modal */
.ai-detect-chat-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ai-detect-chat-modal.hidden {
	display: none;
}

body.ai-detect-chat-open {
	overflow: hidden;
}

.ai-detect-chat-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}

.ai-detect-chat-content {
	position: relative;
	background: var(--panel);
	border: 1px solid #2a2a2f;
	border-radius: 20px;
	width: 100%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ai-detect-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #2a2a2f;
}

.ai-detect-chat-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}

.ai-detect-chat-close {
	background: transparent;
	border: none;
	color: var(--sub);
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: background 0.2s, color 0.2s;
}

.ai-detect-chat-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text);
}

.ai-detect-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 200px;
	max-height: 400px;
}

.ai-detect-chat-message {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	animation: fadeIn 0.3s ease-out;
}

.ai-detect-chat-message-user {
	flex-direction: row-reverse;
}

.ai-detect-chat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.ai-detect-chat-message-user .ai-detect-chat-avatar {
	background: var(--panel-2);
}

.ai-detect-chat-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-detect-chat-text {
	background: var(--panel-2);
	border: 1px solid #2a2a2f;
	border-radius: 16px;
	padding: 12px 16px;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
	max-width: 80%;
}

.ai-detect-chat-message-user .ai-detect-chat-text {
	background: var(--accent);
	border-color: transparent;
	color: #fff;
	margin-left: auto;
}

.ai-detect-chat-text strong {
	font-weight: 700;
}

.ai-detect-chat-image {
	max-width: 200px;
	border-radius: 12px;
	border: 1px solid #2a2a2f;
}

.ai-detect-chat-loading {
	display: inline-block;
}

.ai-detect-chat-loading::after {
	content: '...';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {

	0%,
	20% {
		content: '.';
	}

	40% {
		content: '..';
	}

	60%,
	100% {
		content: '...';
	}
}

.ai-detect-chat-input-area {
	padding: 20px;
	border-top: 1px solid #2a2a2f;
}

.ai-detect-chat-file-label {
	display: block;
	width: 100%;
}

.ai-detect-chat-file-button {
	display: block;
	width: 100%;
	background: var(--accent);
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: opacity 0.2s, transform 0.1s;
}

.ai-detect-chat-file-button:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

.ai-detect-chat-file-button:active {
	transform: scale(0.98);
}

.ai-detect-chat-select-btn {
	margin-top: 12px;
	background: var(--accent);
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: opacity 0.2s, transform 0.1s;
}

.ai-detect-chat-select-btn:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

.ai-detect-chat-select-btn:active {
	transform: scale(0.98);
}

/* Rest Timer Overlay */
.rest-timer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20000;
}

.rest-timer-overlay.hidden {
	display: none;
}

/* Exercise Notes Modal */
.exercise-notes-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none
}

.exercise-notes-modal.hidden {
	display: none
}

.exercise-notes-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	pointer-events: none
}

.exercise-notes-container {
	position: relative;
	background: linear-gradient(135deg, #18181d, #121215);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	overflow: hidden
}

.exercise-notes-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.exercise-notes-title {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin: 0
}

.exercise-notes-close {
	background: transparent;
	border: none;
	color: #a6a7ab;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: background 0.2s
}

.exercise-notes-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff
}

.exercise-notes-content {
	flex: 1;
	padding: 20px 22px;
	overflow-y: auto
}

.exercise-notes-textarea {
	width: 100%;
	min-height: 200px;
	background: #0f0f10;
	border: 1px solid #2a2a2f;
	border-radius: 12px;
	padding: 16px;
	color: #fff;
	font-size: 15px;
	font-family: Inter, system-ui, -apple-system, sans-serif;
	resize: vertical;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box
}

.exercise-notes-textarea:focus {
	border-color: #7c5cff
}

.exercise-notes-textarea::placeholder {
	color: #6a6a6f
}

.exercise-notes-footer {
	padding: 16px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: flex-end;
	gap: 12px
}

.exercise-notes-footer .btn {
	min-width: 100px
}

.exercise-notes-footer .btn.primary {
	background: var(--accent);
	border-color: transparent;
	color: #fff
}

.rest-timer-container {
	background: linear-gradient(135deg, #18181d, #121215);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 30px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.rest-timer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}

.rest-timer-header h3 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.rest-timer-close {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s;
}

.rest-timer-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.rest-timer-display {
	text-align: center;
	margin-bottom: 30px;
}

.rest-timer-time {
	font-size: 64px;
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.rest-timer-label {
	font-size: 14px;
	color: var(--sub);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rest-timer-controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rest-timer-adjust-buttons {
	display: flex;
	gap: 8px;
}

.rest-timer-btn {
	flex: 1;
	padding: 14px 20px;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 20px rgba(124, 92, 255, 0.25);
}

.rest-timer-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 22px rgba(124, 92, 255, 0.32);
	background: #6d4dff;
}

.rest-timer-btn:active {
	transform: translateY(0);
}

.rest-timer-btn-small {
	flex: 1;
	padding: 10px 16px;
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	background: #2a2a33;
	border: 1px solid #3a3a45;
	color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.rest-timer-btn-small:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	background: #32323d;
}

.rest-timer-btn-small:active {
	transform: translateY(0);
}

#rest-timer-add-minute {
	background: #2a2a33 !important;
	border: 1px solid #3a3a45 !important;
	color: #fff !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

#rest-timer-add-minute:hover {
	background: #32323d !important;
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2) !important;
}

/* Cardio Exercise Styles */
.workout-edit-set-row.cardio-row {
	display: grid;
	/* 
     Grid Layout:
     - 40px: Set Number 
     - 1fr: The 2x2 Grid (Min/Sec/Km/Cal)
     - 1fr: Notes
     - 40px: Delete button
  */
	grid-template-columns: 40px 1.2fr 1fr 40px;
	gap: 12px;
	align-items: start;
	/* Align to top because grid is taller */
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cardio-header-col {
	text-align: left !important;
	padding-left: 4px;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8b8da0;
	align-self: end;
	margin-bottom: -4px;
}

.stats-header {
	padding-left: 4px;
	/* Align with first column of grid */
}

.notes-header {
	padding-left: 0;
}

.cardio-inputs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 6px;
	/* Row gap 8px, Col gap 6px */
}

/* Container for Label + Input */
.cardio-input-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.cardio-input-label {
	font-size: 10px;
	font-weight: 700;
	color: #8b8da0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cardio-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.cardio-input-wrapper input {
	width: 100%;
	background: #1a1a1f;
	border: 1px solid #2b2b34;
	border-radius: 6px;
	color: #fff;
	padding: 8px 24px 8px 8px;
	/* Room for unit on right */
	font-size: 13px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	text-align: right;
	/* Numbers align better right */
}

.cardio-input-wrapper input:focus {
	outline: none;
	border-color: var(--accent);
	background: #202025;
}

.cardio-input {
	width: 100%;
	background: #1a1a1f;
	border: 1px solid #2b2b34;
	border-radius: 6px;
	color: #fff;
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	text-align: center;
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cardio-input.disabled {
	color: #dfe0e6;
	cursor: default;
}

.cardio-input-wrapper::after {
	content: attr(data-unit);
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.3);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

.cardio-notes-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cardio-notes-input {
	width: 100%;
	height: 100%;
	min-height: 72px;
	/* Match approximately the grid height */
	background: #1a1a1f;
	border: 1px solid #2b2b34;
	border-radius: 6px;
	color: #dfe0e6;
	padding: 8px 10px;
	font-size: 13px;
	font-family: 'Inter', sans-serif;
	resize: none;
	box-sizing: border-box;
	line-height: 1.4;
}

.cardio-notes-input:focus {
	outline: none;
	border-color: var(--accent);
	background: #202025;
}

.cardio-notes-input::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

/* Adjust Set Number and Delete Button alignment for the taller cardio row */
.workout-edit-set-row.cardio-row .set-col,
.workout-edit-set-row.cardio-row .action-col {
	display: flex;
	align-items: flex-start;
	padding-top: 18px;
	/* Align deeply with the inputs below the labels */
	justify-content: center;
	height: 100%;
}

/* Mobile adjustments */
@media (max-width: 380px) {
	.workout-edit-set-row.cardio-row {
		grid-template-columns: 30px 1.3fr 0.9fr 30px;
		gap: 6px;
	}
}

/* Editable workout timer */
.workout-timer-input {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 4px 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	min-width: 60px;
	max-width: 80px;
	font-family: 'Inter', sans-serif;
}

.workout-timer-input:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.08);
}

/* Cardio exercise view - bring info buttons closer to name */
.workout-view-exercise.cardio-mode .workout-view-header,
.cardio-mode .workout-view-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0;
	margin-bottom: 0;
}

.cardio-mode .workout-exercise-main {
	margin-right: 0;
	padding-right: 0;
	flex: 1;
	min-width: 0;
	align-items: flex-start;
}

.cardio-mode .workout-exercise-main .workout-exercise-name {
	margin-top: 2px;
}

.cardio-mode .workout-view-actions {
	position: static;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex-shrink: 0;
	margin-left: 8px;
}

/* Reduce space between header and input fields for cardio exercises */
.cardio-mode .workout-edit-sets.view-mode {
	margin-top: 0px;
}

.cardio-mode .workout-view-header {
	margin-bottom: 0;
	padding-bottom: 0;
	padding-top: 0;
	align-items: flex-start;
}

/* Reduce padding on cardio exercise card */
.cardio-mode.workout-view-exercise,
.workout-view-exercise.cardio-mode {
	padding-bottom: 10px;
	padding-top: 10px;
}

/* Custom Exercise Modal */
.custom-exercise-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.custom-exercise-modal.hidden {
	display: none;
}

.custom-exercise-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}

.custom-exercise-content {
	position: relative;
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
	border-radius: 20px;
	border: 1px solid #242429;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	z-index: 1;
}

.custom-exercise-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.custom-exercise-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.custom-exercise-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
	line-height: 1;
}

.custom-exercise-close:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: scale(1.05);
}

.custom-exercise-close:active {
	transform: scale(0.95);
}

.custom-exercise-form {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.custom-exercise-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.custom-exercise-field label {
	color: #dfe0e6;
	font-size: 14px;
	font-weight: 600;
}

.custom-exercise-field input[type="text"] {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 16px;
	font-family: 'Inter', sans-serif;
	transition: all 0.2s;
}

.custom-exercise-field input[type="text"]:focus {
	outline: none;
	border-color: var(--accent);
	background: #151519;
}

.custom-exercise-field input[type="text"]::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.custom-exercise-type-options {
	display: flex;
	gap: 8px;
}

.custom-exercise-type-btn {
	flex: 1;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #c9c9cf;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	font-family: 'Inter', sans-serif;
}

.custom-exercise-type-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
}

.custom-exercise-type-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 4px 12px rgba(124, 92, 255, 0.3);
}

.custom-exercise-muscle-select {
	width: 100%;
	background: #0f0f12;
	color: #fff;
	border: 1px solid #2b2b34;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 16px;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: all 0.2s;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.custom-exercise-muscle-select:focus {
	outline: none;
	border-color: var(--accent);
	background-color: #151519;
}

.custom-exercise-muscle-select option {
	background: #1a1a1d;
	color: #fff;
}

.custom-exercise-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.custom-exercise-actions .btn {
	flex: 1;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 700;
}