:root {
	--color-mood-1: #2c2c2c;
	--color-mood-2: #8b1538;
	--color-mood-3: #d32f2f;
	--color-mood-4: #ff6f00;
	--color-mood-5: #f9a825;
	--color-mood-6: #66bb6a;
	--color-mood-7: #43a047;
	--color-mood-8: #42a5f5;
	--color-mood-1-tinted-bg: rgba(44, 44, 44, 0.25);
	--color-mood-2-tinted-bg: rgba(139, 21, 56, 0.25);
	--color-mood-3-tinted-bg: rgba(211, 47, 47, 0.25);
	--color-mood-4-tinted-bg: rgba(255, 111, 0, 0.25);
	--color-mood-5-tinted-bg: rgba(249, 168, 37, 0.25);
	--color-mood-6-tinted-bg: rgba(102, 187, 106, 0.25);
	--color-mood-7-tinted-bg: rgba(67, 160, 71, 0.25);
	--color-mood-8-tinted-bg: rgba(66, 165, 245, 0.25);
	--color-amazing: #9c27b0;
	--color-good: #87ceeb;
	--color-okay: #ffeb3b;
	--color-rough: #ff6f00;
	--color-difficult: #000;

	--color-text-primary: #1a2e3b;
	--color-text-secondary: #4a5e6a;
	--color-text-muted: #6b7e8a;
	--color-border: #fff;
	--color-success: #4caf50;
	--color-error: #f44336;

	--glass-background: rgb(255 255 255 / 45%);
	--glass-background-extra: rgb(255 255 255 / 30%);
	--glass-border: rgb(255 255 255 / 30%);
	--glass-backdrop-filter: blur(2px) saturate(80%);
	--card-background: rgb(255 255 255 / 20%);
	--card-border: 4px solid rgb(255 255 255);

	--gradient-animated-bg: linear-gradient(
		-45deg,
		rgb(251 242 141),
		rgb(146 204 255),
		rgb(154 255 121)
	);

	--font-family: "DM Sans", sans-serif;
	--font-size-display: 2rem;
	--font-size-h2: 1.5rem;
	--font-size-body: 1rem;
	--font-size-body-small: 0.875rem;

	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-normal: 1.5;

	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;

	--radius-medium: 8px;
	--radius-large: 50px;
	--radius-pill: 999px;
	--radius-circle: 999px;

	--shadow-level-3: 0 4px 16px rgb(0 0 0 / 12%);
	--shadow-level-4: 0 8px 32px rgb(0 0 0 / 16%);
	--shadow-soft-text: 0 1px 2px rgb(0 0 0 / 10%);

	--transition-standard: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

body {
	height: 110vh;
	background: none;
	background-attachment: fixed;
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	transition: background 2s ease-in-out;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	background: var(
		--gradient-animated-bg,
		linear-gradient(
			330deg,
			#f8ef85 0%,
			#ffd792 25%,
			#feb97d 50%,
			#ffad8d 75%,
			#ffa59b 100%
		)
	);
}

body.home-page::before {
	background: var(--gradient-animated-bg, var(--glass-background));
	opacity: 1;
}

body.account-page::before {
	background: linear-gradient(
		330deg,
		#f8ef85 0%,
		#ffd792 25%,
		#feb97d 50%,
		#ffad8d 75%,
		#ffa59b 100%
	);
	opacity: 1;
}

br {
	display: none;
}

h1,
h2,
h3,
h4,
p {
	text-shadow: var(--shadow-soft-text);
}

h1 {
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
}

p {
	font-size: var(--font-size-body);
	line-height: var(--line-height-normal);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes gentle-border-flow {
	0%,
	100% {
		background-position: 0 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

@keyframes rotate-border {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes active-page-glow {
	0%,
	100% {
		box-shadow:
			0 4px 20px rgb(0 0 0 / 15%),
			inset 0 1px 0 rgb(255 255 255 / 30%),
			0 0 0 rgb(255 255 255 / 40%);
	}

	50% {
		box-shadow:
			0 4px 20px rgb(0 0 0 / 15%),
			inset 0 1px 0 rgb(255 255 255 / 30%),
			0 0 10px rgb(255 255 255 / 60%);
	}
}

@keyframes gentle-pulse {
	0%,
	100% {
		transform: translateX(-50%) scale(1);
		opacity: 0.9;
	}

	50% {
		transform: translateX(-50%) scale(1.02);
		opacity: 1;
	}
}

@keyframes borderFadeIn {
	0% {
		border-color: transparent;
		transform: scale(1.02);
	}

	50% {
		border-color: rgb(0 0 0 / 40%);
		transform: scale(1.01);
	}

	100% {
		border-color: rgb(0 0 0 / 80%);
		transform: scale(1);
	}
}

@keyframes landing-gradient-shift {
	0%,
	100% {
		background-position: 0 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

@keyframes gradient-text-flow {
	0%,
	100% {
		background-position: 0 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

@keyframes underlineGrow {
	to {
		background-size: 100% 1px;
	}
}

@keyframes scale-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

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

@keyframes moodscore-gradient-rotate {
	to {
		transform: rotate(360deg);
	}
}

.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100vw;
	margin: 0;
	padding: clamp(0.75rem, 1.5vh, 1.25rem) clamp(0.75rem, 1.5vh, 1.25rem) 4rem;
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
	overflow-x: hidden;
	box-sizing: border-box;
}

main {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 120vh !important;
	padding: 0;
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}

.app-view {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-height: max-content;
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition:
		opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
		transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-view.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.header-container {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 100%;
	max-width: 100%;
	transform: none;
	transition: none;
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
}

.main-header {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	padding: clamp(0.75rem, 1.5vh, 1rem) clamp(1rem, 2vh, 1.5rem);
	background: var(--glass-background);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-level-3);
	backdrop-filter: var(--glass-backdrop-filter);
	transition: var(--transition-standard);
}

.main-header:hover {
	background: rgb(255 255 255 / 25%);
}

.logo {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--spacing-sm);
}

.logo h1 {
	font-size: clamp(1.2rem, 2.5vw, 1.75rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

.header-nav {
	display: flex;
	flex: 2;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
}

.header-nav a {
	padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(0.8rem, 1.6vh, 1.2rem);
	border-radius: var(--radius-pill);
	font-size: clamp(0.8rem, 1.5vw, 1rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: var(--transition-standard);
}

.header-nav a:hover {
	background: rgb(255 255 255 / 20%);
}

.header-nav a.active {
	position: relative;
	background: rgb(255 255 255 / 90%);
	border: 2px solid rgb(255 255 255 / 80%);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	box-shadow:
		0 4px 20px rgb(0 0 0 / 15%),
		inset 0 1px 0 rgb(255 255 255 / 30%);
	animation: active-page-glow 3s ease-in-out infinite;
}

.date-display {
	flex: 1;
	text-align: right;
}

.date-display p {
	font-size: clamp(0.8rem, 3.5vw, 1rem);
	font-weight: var(--font-weight-medium);
	color: #767676;
}

.user-settings {
	display: flex;
	flex-shrink: 0;
	padding: clamp(0.8rem, 1.6vh, 1.2rem);
	background: var(--glass-background);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-circle);
	backdrop-filter: var(--glass-backdrop-filter);
	transition: var(--transition-standard);
	text-decoration: none;
}

.user-settings:hover {
	background: rgb(255 255 255 / 25%);
	transform: scale(1.05);
}

.user-settings i {
	font-size: clamp(1.2rem, 2.5vw, 1.75rem);
	color: var(--color-text-primary);
	cursor: pointer;
	text-decoration: none;
}

.mobile-nav-container {
	position: fixed;
	bottom: clamp(1rem, 2vh, 1.5rem);
	left: 50%;
	z-index: 1000;
	display: none;
	align-items: center;
	width: auto;
	max-width: 95vw;
	transform: translateX(-50%);
	gap: clamp(0.75rem, 1.5vh, 1rem);
}

.mobile-nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 70px;
	margin-left: 12px;
	padding: clamp(0.5rem, 1vh, 0.75rem) clamp(0.1rem, 0.2vh, 0.15rem);
	background: var(--glass-background);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: var(--shadow-level-4);
	backdrop-filter: var(--glass-backdrop-filter);
	transition: var(--transition-standard);
}

.mobile-nav:hover {
	background: rgb(255 255 255 / 25%);
}

.mobile-nav-items {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1vh, 0.75rem);
}

.mobile-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: clamp(60px, 12vw, 70px);
	padding: clamp(0.5rem, 1vh, 0.75rem);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--color-text-primary);
	text-align: center;
	text-decoration: none;
	transition: var(--transition-standard);
}

.mobile-nav-item:hover {
	background: rgb(255 255 255 / 20%);
	border: 1px solid rgb(255 255 255 / 30%);
}

.mobile-nav-item.active {
	position: relative;
	padding: clamp(0.4rem, 0.9vh, 0.65rem);
	background: rgb(255 255 255 / 90%);
	border: 2px solid rgb(255 255 255 / 80%);
	border-radius: var(--radius-pill);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	box-shadow:
		0 4px 16px rgb(0 0 0 / 12%),
		inset 0 1px 0 rgb(255 255 255 / 40%);
	transform: scale(1.05);
}

.mobile-nav-item.active i,
.mobile-nav-item.active span {
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.mobile-nav-item i {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: clamp(3px, 0.5vh, 5px);
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
}

.mobile-nav-item span {
	margin-top: clamp(1px, 0.2vh, 2px);
	font-size: clamp(0.65rem, 1.3vw, 0.75rem);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.mobile-profile {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: clamp(54px, 8vh, 68px);
	height: clamp(54px, 8vh, 68px);
	aspect-ratio: 1;
	background: var(--glass-background);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: var(--shadow-level-4);
	backdrop-filter: var(--glass-backdrop-filter);
	transition: var(--transition-standard);
}

.mobile-profile:hover {
	background: rgb(255 255 255 / 25%);
	transform: scale(1.05);
}

.mobile-profile i {
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	color: var(--color-text-primary);
	cursor: pointer;
}

.mobile-spacer,
.mobiledisplayonly {
	display: none;
}

.btn,
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px var(--spacing-lg);
	background: var(--glass-background);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	cursor: pointer;
	gap: var(--spacing-sm);
	transition: var(--transition-standard);
}

.btn:hover,
button:hover {
	background: rgb(255 255 255 / 25%);
	transform: translateY(-2px);
}

button:focus,
button:active,
.btn:focus,
.btn:active {
	border: none;
	outline: none;
	outline-offset: 0;
	box-shadow: none;
}

.card {
	width: 100%;
	padding: clamp(1rem, 2vh, 1.5rem);
	background: var(--card-background);
	border: var(--card-border);
	border-radius: var(--radius-large);
	backdrop-filter: var(--glass-backdrop-filter);
	transition: var(--transition-standard);
}

.card:hover {
	background: rgb(255 255 255 / 15%);
}

.notification {
	position: fixed;
	top: clamp(100px, 12vh, 120px);
	right: 20px;
	z-index: 10000;
	max-width: 300px;
	padding: clamp(1rem, 2vh, 1.5rem) clamp(1.2rem, 2.4vh, 1.8rem);
	background: var(--glass-background-extra);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-large);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	backdrop-filter: blur(8px) saturate(50%);
	opacity: 0;
	transform: translateX(120%);
	transition:
		transform 0.3s ease-out,
		opacity 0.3s ease-out;
	will-change: transform, opacity;
}

.notification.show {
	opacity: 1;
	transform: translateX(0);
}

.notification.success {
	background: rgb(76 175 80 / 10%);
	border-color: rgb(76 175 80 / 40%);
}

.notification.error {
	background: rgb(244 67 54 / 10%);
	border-color: rgb(244 67 54 / 40%);
}

.notification.warning {
	background: rgb(255 152 0 / 10%);
	border-color: rgb(255 152 0 / 40%);
}

.notification.info {
	background: rgb(33 150 243 / 10%);
	border-color: rgb(33 150 243 / 40%);
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--spacing-lg);
	background: rgb(0 0 0 / 50%);
	backdrop-filter: blur(10px);
}

.modal-content {
	width: 100%;
	max-width: 500px;
	padding: clamp(1.5rem, 3vh, 2rem);
	background: rgba(255, 255, 255, 0.6);
	border: var(--card-border);
	border-radius: var(--radius-large);
	backdrop-filter: var(--glass-backdrop-filter);
	animation: modalFadeIn 0.3s ease-out;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

.modal-header h3 {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

.modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(32px, 5vh, 40px);
	height: clamp(32px, 5vh, 40px);
	padding: clamp(0.5rem, 1vh, 0.75rem);
	background: var(--color-text-primary);
	border: none;
	border-radius: var(--radius-circle);
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: var(--font-weight-bold);
	color: white;
	cursor: pointer;
	transition: var(--transition-standard);
}

.modal-close:hover {
	background: var(--color-text-secondary);
	transform: scale(1.05);
}

.modal-body {
	margin-bottom: clamp(1.5rem, 3vh, 2rem);
}

.custom-footer {
	margin: auto !important;
	width: 95% !important;
}

body.loading-auth .header-container,
body.loading-auth main,
body.loading-auth .mobile-nav-container,
body.loading-auth .container {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

body.loading-auth::after {
	position: fixed;
	top: 50%;
	left: 50%;
	content: "Loading Daylitics...";
	font-size: 1.2rem;
	font-family: "DM Sans", sans-serif;
	color: var(--color-text-secondary);
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
}

body.loading-auth.magic-link-active::after {
	content: "Validating your magic link...";
}

body.loading-auth.loading-auth-error::after {
	z-index: 9999;
	color: #d32f2f;
	transition: opacity 0.3s ease-in-out;
}

.auth-page .auth-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100vh;
	padding: var(--spacing-lg);
	background: linear-gradient(
			330deg,
			#f8ef85 0%,
			#ffd792 25%,
			#feb97d 50%,
			#ffad8d 75%,
			#ffa59b 100%
		)
		fixed;
}

.auth-page .auth-card {
	width: 100%;
	max-width: 600px;
	padding: clamp(2rem, 4vh, 3rem);
	background: var(--glass-background-extra);
	border: var(--card-border);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-level-4);
	transition: var(--transition-standard);
}

.auth-page .auth-card:hover {
	background: rgba(255, 255, 255, 0.25);
}

.auth-page .auth-header {
	margin-bottom: clamp(2rem, 4vh, 2.5rem);
	text-align: center;
}

.auth-page .auth-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--spacing-lg);
	gap: var(--spacing-sm);
}

.auth-page .auth-logo h1 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 400;
	color: var(--color-text-primary);
	text-shadow: var(--shadow-soft-text);
}

.auth-page .auth-subtitle {
	width: 100%;
	margin-bottom: var(--spacing-sm);
	font-size: clamp(1rem, 1.4vw, 1rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-align: center;
	line-height: var(--line-height-normal);
	opacity: 0.8;
}

.auth-page .auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.auth-page .form-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.auth-page .form-label {
	display: flex;
	align-items: center;
	font-size: clamp(0.85rem, 1.7vw, 0.95rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	gap: clamp(0.5rem, 1vh, 0.75rem);
}

.auth-page .form-input {
	width: 100%;
	height: clamp(3.2rem, 6vh, 4rem);
	padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1.2rem, 2.4vh, 1.5rem);
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(1rem, 2vw, 1.1rem);
	color: var(--color-text-primary);
	outline: none;
	box-sizing: border-box;
	transition: var(--transition-standard);
}

.auth-page .form-input:focus {
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.2);
}

.auth-page .form-input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.7;
}

.auth-page .field-error {
	height: 0;
	margin-top: clamp(0.25rem, 0.5vh, 0.4rem);
	margin-left: clamp(0.5rem, 1vh, 0.75rem);
	font-size: clamp(0.75rem, 1.5vw, 0.85rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-error);
	opacity: 0;
	overflow: hidden;
	transform: translateY(-5px);
	transition: all 0.3s ease;
}

.auth-page .field-error.show {
	height: auto;
	margin-bottom: clamp(0.25rem, 0.5vh, 0.4rem);
	opacity: 1;
	transform: translateY(0);
}

.auth-page .login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(3.2rem, 6vh, 4rem);
	margin-top: var(--spacing-sm);
	padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1.5rem, 3vh, 2rem);
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(1rem, 2vw, 1.1rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	cursor: pointer;
	gap: var(--spacing-sm);
	transition: var(--transition-standard);
}

.auth-page .login-btn:hover {
	background: rgba(255, 255, 255, 0.4);
	box-shadow: var(--shadow-level-4);
	transform: translateY(-2px);
}

.auth-page .login-btn:active {
	transform: translateY(-1px) scale(0.98);
}

.auth-page .login-btn:disabled,
.auth-page .login-btn[disabled] {
	background: #e0e0e0 !important;
	border-color: #e0e0e0 !important;
	color: #aaa !important;
	cursor: default !important;
	pointer-events: none !important;
	opacity: 0.7 !important;
}

.auth-page .login-btn.form-completed {
	border: 2px solid rgba(0, 0, 0, 0.8) !important;
	animation: borderFadeIn 0.8s ease-out forwards;
}

.auth-page .login-btn.loading {
	cursor: not-allowed;
	opacity: 0.7;
}

.auth-page .login-btn.loading .btn-text {
	display: none;
}

.auth-page .login-btn .loading-spinner {
	display: none;
}

.auth-page .login-btn.loading .loading-spinner {
	display: inline-block;
	animation: spin 1s linear infinite;
}

.auth-page .divider {
	display: flex;
	align-items: center;
	margin: clamp(1.5rem, 3vh, 2rem) 0;
	font-size: clamp(0.8rem, 1.6vw, 0.9rem);
	color: var(--color-text-muted);
	gap: var(--spacing-md);
	opacity: 0.7;
}

.auth-page .divider::before,
.auth-page .divider::after {
	flex: 1;
	content: "";
	height: 1px;
	background: var(--color-text-muted);
	opacity: 0.5;
}

.auth-page .social-login {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.auth-page .social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(3.2rem, 6vh, 4rem);
	padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1.2rem, 2.4vh, 1.5rem);
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(1rem, 2vw, 1.1rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	cursor: pointer;
	gap: var(--spacing-sm);
	transition: var(--transition-standard);
}

.auth-page .social-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-1px);
}

.auth-page .auth-links {
	display: flex;
	flex-direction: column;
	margin-top: clamp(1rem, 2vh, 1.5rem);
	text-align: center;
	gap: var(--spacing-sm);
}

.auth-page .auth-link {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: clamp(0.5rem, 1vh, 0.75rem) clamp(0.8rem, 1.5vh, 1rem);
	background: none;
	border: none;
	border-radius: var(--radius-medium);
	font-size: clamp(0.8rem, 1.5vw, 0.9rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	text-decoration: none;
	opacity: 0.7;
	transition: var(--transition-standard);
}

.auth-page .auth-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-text-secondary);
	opacity: 1;
}

.auth-page .error-message,
.auth-page .success-message {
	display: none;
	align-items: center;
	justify-content: center;
	height: clamp(3.2rem, 6vh, 4rem);
	margin-bottom: var(--spacing-md);
	padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1.2rem, 2.4vh, 1.5rem);
	border-radius: var(--radius-pill);
	font-size: clamp(1rem, 2vw, 1.1rem);
	gap: var(--spacing-sm);
}

.auth-page .error-message {
	background: rgba(244, 67, 54, 0.1);
	border: 2px solid rgba(244, 67, 54, 0.3);
	color: var(--color-error);
}

.auth-page .success-message {
	background: rgba(76, 175, 80, 0.1);
	border: 2px solid rgba(76, 175, 80, 0.3);
	color: var(--color-success);
}

.auth-page .checkbox-container {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	text-align: center;
	line-height: 1.4;
	cursor: pointer;
	gap: 0.5rem;
}

.auth-page .checkbox-container input[type="checkbox"] {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	cursor: pointer;
}

.auth-page .custom-checkbox {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: transparent;
	border: 2px solid var(--color-text-secondary);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.auth-page .custom-checkbox::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	content: "✓";
	font-size: 12px;
	font-weight: bold;
	color: white;
	transform: translate(-50%, -50%);
}

.auth-page
	.checkbox-container
	input[type="checkbox"]:checked
	+ .custom-checkbox {
	background: var(--color-text-primary);
	border-color: var(--color-text-primary);
}

.auth-page
	.checkbox-container
	input[type="checkbox"]:checked
	+ .custom-checkbox::after {
	display: block;
}

.auth-page .checkbox-container a {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: underline;
}

.auth-page .cf-turnstile {
	text-align: center;
}

html.landing-page-html,
html.landing-page-html body {
	height: 100%;
	min-height: 100vh;
}

.features-page::before {
	background: linear-gradient(wheat, white);
}

.landing-page {
	height: 100%;
	min-height: 100vh;
	background: linear-gradient(
		-45deg,
		rgba(251, 242, 141, 0.3),
		rgba(146, 204, 255, 0.3),
		rgba(154, 255, 121, 0.3),
		rgba(255, 182, 193, 0.2),
		rgba(221, 160, 221, 0.2)
	);
	background-size: 400% 400%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	overflow-x: hidden;
	animation: landing-gradient-shift 8s ease-in-out infinite;
}

.landing-container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.landing-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: clamp(0.75rem, 1.5vh, 1.25rem) clamp(1.5rem, 3vw, 3rem);
	transition: var(--transition-standard);
}

.landing-nav.scrolled {
	background: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
}

.nav-logo-img {
	width: 35px;
	height: auto;
}

.nav-logo h1 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

.nav-link {
	position: relative;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: var(--transition-standard);
}

.nav-cta-btn {
	padding: clamp(0.5rem, 1vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
	background: transparent;
	border: 2px solid rgb(0, 0, 0);
	border-radius: var(--radius-pill);
	font-weight: var(--font-weight-semibold);
	color: rgb(0, 0, 0);
	text-decoration: none;
	transition: var(--transition-standard);
}

.mobile-menu-toggle {
	position: relative;
	z-index: 1001;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.hamburger-line {
	width: 24px;
	height: 2px;
	margin: 3px 0;
	background: var(--color-text-primary);
	transition: var(--transition-standard);
}

.mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	display: none;
	flex-direction: column;
	padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 3vw, 3rem);
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	transform: translateY(-10px);
	gap: clamp(0.75rem, 1.5vh, 1rem);
	transition: all 0.3s ease;
}

.mobile-menu.active {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

.hero-section {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 6rem 1.5rem 3rem;
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 100%;
	max-width: 1400px;
	gap: clamp(3rem, 6vw, 6rem);
}

.hero-text {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vh, 2.5rem);
}

.hero-title {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
}

.nonprofit-text {
	display: block;
	margin-top: 2rem;
}

.gradient-text {
	background: var(--gradient-animated-bg);
	background-size: 200% 200%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient-text-flow 3s ease-in-out infinite;
}

.hero-description {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
}

.hero-statement {
	margin: 0;
	font-size: clamp(1.3rem, 2.3vw, 1.5rem);
	font-weight: 600;
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
}

.u-underline-bg {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	color: #111;
	text-decoration: none;
	cursor: default;
	transition: background-size 0.3s ease;
}

.u-underline-bg.animate-underline {
	animation: underlineGrow 1s ease 1s forwards;
}

.hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.section-header {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(3rem, 6vh, 4rem);
	text-align: center;
}

.section-title {
	margin: 1vh auto;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	text-align: center;
	line-height: var(--line-height-tight);
}

.section-subtitle {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	color: var(--color-text-secondary);
	text-align: center;
}

.features-section {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 3vw, 3rem);
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
}

.feature-card {
	padding: clamp(1.5rem, 3vh, 2rem);
	background: var(--glass-background);
	border: 3px solid rgb(0, 150, 255);
	border-radius: var(--radius-large);
	text-align: center;
	transition: var(--transition-standard);
}

.feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(60px, 10vw, 80px);
	height: clamp(60px, 10vw, 80px);
	margin: 0 auto clamp(1rem, 2vh, 1.5rem);
	background: var(--gradient-animated-bg);
	border-radius: var(--radius-circle);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: white;
}

.feature-title {
	margin: 0 0 clamp(0.75rem, 1.5vh, 1rem) 0;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.feature-description {
	margin: 0;
	color: var(--color-text-secondary);
	text-align: left;
	line-height: var(--line-height-normal);
}

.how-it-works-section {
	margin: 0;
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 3vw, 3rem);
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(50px, 8vw, 60px);
	height: clamp(50px, 8vw, 60px);
	margin: 0 auto clamp(1rem, 2vh, 1.5rem);
	background: var(--gradient-animated-bg);
	border-radius: var(--radius-circle);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: white;
}

.step-title {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.step-description {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
}

.faq-section {
	padding: clamp(2rem, 6vw, 4rem) 0;
}

.faq-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1304px;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
	gap: 2rem;
}

.faq-card {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 3px solid rgba(0, 0, 0, 0.5);
	border-radius: 999px;
	transition: var(--transition-standard);
}

.faq-question {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
	padding: 1.25rem 2.5rem 1.25rem 2rem;
	background: none;
	border: none;
	border-radius: var(--radius-large);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary, #0055ff);
	text-align: left;
	outline: none;
	backdrop-filter: none;
	cursor: pointer;
	transition: none;
}

.faq-arrow {
	display: none;
}

.faq-answer {
	width: auto;
	margin: 0 2rem 1.5rem 2rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-secondary, #333);
	transition:
		max-height 0.3s,
		opacity 0.3s;
}

.insights-section {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 3vw, 3rem);
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.insights-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(3rem, 6vw, 6rem);
}

.insights-title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
}

.insights-description {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.25rem);
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
}

.insights-features {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.5vh, 1rem);
}

.insight-feature {
	display: flex;
	align-items: center;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	gap: clamp(0.75rem, 1.5vw, 1rem);
}

.insight-feature i {
	width: clamp(20px, 3vw, 24px);
	color: orangered;
}

.final-cta-section {
	position: relative;
	margin-top: clamp(2rem, 4vh, 3rem);
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 3vw, 3rem);
	border-top: 1px solid rgba(128, 128, 128, 0.3);
	text-align: center;
}

.end-section {
	height: 50px;
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.cta-title {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
}

.landing-footer {
	padding: clamp(3rem, 6vh, 4rem) clamp(1.5rem, 3vw, 3rem)
		clamp(1.5rem, 3vh, 2rem);
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.footer-content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	margin-bottom: clamp(2rem, 4vh, 3rem);
	gap: clamp(2rem, 4vw, 3rem);
}

.footer-links {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 4vw, 3rem);
}

.footer-links a {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	white-space: nowrap;
	text-decoration: none;
	transition: var(--transition-standard);
}

.footer-bottom {
	padding-top: clamp(1.5rem, 3vh, 2rem);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
}

.footer-bottom p {
	margin: 0;
	font-size: var(--font-size-body-small);
	color: var(--color-text-muted);
}

.mdoclass {
	display: none;
}

.navigation-img {
	width: 40vw;
}

.unbolded {
	font-weight: 300;
}

.cta-display-button,
.cta-display-button-low {
	display: block;
	width: max-content;
	padding: 0.75rem 1.5rem;
	background-color: transparent;
	border: 2px solid rgb(0, 85, 255);
	border-radius: 99px;
	font-size: 20px;
	color: rgb(0, 85, 255);
	text-align: center;
	transform: none;
	margin-left: auto !important;
	margin-right: auto !important;
}

.cta-display-button-low {
	width: 50vw;
}

.special-highlight {
	font-size: 50%;
	font-weight: 200;
	color: red;
}

section {
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

section.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.home-page .quick-log {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1rem, 2vw, 1.5rem);
	background: rgb(255 255 255 / 50%) !important;
	gap: clamp(0.75rem, 2vh, 1.25rem);
}

.home-page .quick-log h2 {
	flex-shrink: 0;
	margin-top: 1rem;
	margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
	font-size: clamp(1.2rem, 3.5vw, 2rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	text-align: center;
	line-height: 1.25;
}

.home-page .mood-slider-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(70px, 10vh, 100px);
	margin-top: clamp(0.25rem, 1vh, 0.5rem);
	margin-bottom: clamp(0.75rem, 2vh, 1rem);
}

.home-page .slider-with-icons {
	position: relative;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
}

.home-page .mood-icon {
	position: relative;
	z-index: 10;
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	opacity: 0.75;
	text-shadow: 0 2px 4px rgb(0 0 0 / 10%);
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 10%));
	user-select: none;
	transition: opacity 0.3s ease-in-out;
}

.home-page .mood-slider {
	flex-grow: 1;
	width: 100%;
	height: 40px;
	margin: 0 0.5rem;
	background: linear-gradient(
		to right,
		var(--color-mood-1) 0%,
		var(--color-mood-2) 12.5%,
		var(--color-mood-3) 25%,
		var(--color-mood-4) 37.5%,
		var(--color-mood-5) 50%,
		var(--color-mood-6) 62.5%,
		var(--color-mood-7) 75%,
		var(--color-mood-8) 87.5%,
		var(--color-mood-8) 100%
	);
	border-radius: var(--radius-pill);
	outline: none;
	appearance: none;
	cursor: pointer;
}

.home-page .mood-slider::-webkit-slider-runnable-track,
.home-page .mood-slider::-moz-range-track {
	height: 30px;
	background: linear-gradient(
		to right,
		var(--color-mood-1) 0%,
		var(--color-mood-2) 12.5%,
		var(--color-mood-3) 25%,
		var(--color-mood-4) 37.5%,
		var(--color-mood-5) 50%,
		var(--color-mood-6) 62.5%,
		var(--color-mood-7) 75%,
		var(--color-mood-8) 87.5%,
		var(--color-mood-8) 100%
	);
	border: none;
	border-radius: var(--radius-pill);
}

.home-page .mood-slider::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	background: var(--glass-background);
	border: 3px solid rgb(255 255 255 / 90%);
	border-radius: 50%;
	box-shadow: var(--shadow-level-3);
	appearance: none;
	cursor: pointer;
}

.home-page .mood-slider::-moz-range-thumb {
	width: 30px;
	height: 30px;
	background: var(--glass-background);
	border: 3px solid rgb(255 255 255 / 90%);
	border-radius: 50%;
	box-shadow: var(--shadow-level-3);
	cursor: pointer;
	transition:
		opacity 0.5s ease-in-out,
		transform 0.3s ease-in-out;
}

.home-page .mood-slider.active::-webkit-slider-thumb,
.home-page .mood-slider.active::-moz-range-thumb {
	opacity: 1;
}

.home-page .mood-slider.disabled,
.home-page .mood-slider:disabled {
	opacity: 0.75;
	cursor: not-allowed;
	pointer-events: none;
}

.home-page .mood-value {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 1.5em;
	margin-top: clamp(0.3rem, 0.5vh, 0.75rem);
	font-size: clamp(0.95rem, 2vw, 1.4rem);
	font-weight: var(--font-weight-bold);
	color: rgba(50, 50, 50, 0.5);
	text-align: center;
	visibility: visible;
	overflow: visible;
	transform: none;
	transition: opacity 0.3s ease-in-out;
}

.home-page .emotion-tags {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(44px, auto);
	width: 100%;
	padding: 10px clamp(0.25rem, 1vw, 0.75rem);
	flex-shrink: 0;
	overflow: hidden;
	gap: clamp(0.5rem, 1.5vh, 0.9rem);
}

.home-page .emotion-tags.disabled .emotion-tag,
.home-page .emotion-tags.disabled {
	opacity: 0.75;
	cursor: not-allowed;
	pointer-events: none;
}

.home-page .emotion-tag {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: clamp(32px, 4.5vw, 52px);
	padding: clamp(0.5rem, 1.5vw, 0.8rem) clamp(0.6rem, 1.8vw, 1.2rem);
	background: rgb(255 255 255 / 80%);
	border: 3px solid white;
	border-radius: var(--radius-pill);
	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
	font-size: clamp(0.8rem, 1.8vw, 1.05rem);
	font-weight: 700;
	color: var(--color-text-primary);
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .emotion-tag:hover {
	background: rgb(255 255 255 / 25%);
	transform: scale(1.02);
}

.home-page .emotion-tag.active {
	background: rgb(255 255 255 / 30%);
	border-width: 4px;
	transform: scale(1.02);
}

.home-page .emotion-tag.mood-1-tint {
	border-color: var(--color-mood-1);
}

.home-page .emotion-tag.mood-2-tint {
	border-color: var(--color-mood-2);
}

.home-page .emotion-tag.mood-3-tint {
	border-color: var(--color-mood-3);
}

.home-page .emotion-tag.mood-4-tint {
	border-color: var(--color-mood-4);
}

.home-page .emotion-tag.mood-5-tint {
	border-color: var(--color-mood-5);
}

.home-page .emotion-tag.mood-6-tint {
	border-color: var(--color-mood-6);
}

.home-page .emotion-tag.mood-7-tint {
	border-color: var(--color-mood-7);
}

.home-page .emotion-tag.mood-8-tint {
	border-color: var(--color-mood-8);
}

.home-page .emotion-tag.mood-1-tint.active {
	background-color: var(--color-mood-1);
	color: white;
}

.home-page .emotion-tag.mood-2-tint.active {
	background-color: var(--color-mood-2);
	color: white;
}

.home-page .emotion-tag.mood-3-tint.active {
	background-color: var(--color-mood-3);
	color: white;
}

.home-page .emotion-tag.mood-4-tint.active {
	background-color: var(--color-mood-4);
	color: white;
}

.home-page .emotion-tag.mood-5-tint.active {
	background-color: var(--color-mood-5);
	color: var(--color-text-primary);
}

.home-page .emotion-tag.mood-6-tint.active {
	background-color: var(--color-mood-6);
	color: white;
}

.home-page .emotion-tag.mood-7-tint.active {
	background-color: var(--color-mood-7);
	color: white;
}

.home-page .emotion-tag.mood-8-tint.active {
	background-color: var(--color-mood-8);
	color: white;
}

.home-page .log-day-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(36px, 4.5vh, 56px);
	margin-top: clamp(1rem, 2vh, 4rem);
	margin-bottom: clamp(1rem, 2vh, 3.5rem);
	padding: clamp(0.7rem, 1.4vh, 1.2rem) clamp(1.2rem, 2.5vh, 2.5rem);
	background: transparent;
	border: 2px solid rgb(255 255 255 / 30%);
	border-radius: var(--radius-pill);
	font-size: clamp(0.9rem, 1.8vw, 1.2rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	flex-shrink: 0;
	overflow: hidden;
	gap: clamp(0.4rem, 0.8vh, 0.75rem);
	transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .log-day-btn:active {
	transform: translateY(-1px) scale(0.98);
}

.home-page .log-day-btn::before {
	position: absolute;
	z-index: -1;
	content: "";
	inset: -3px;
	background-size: 400% 400%;
	border-radius: var(--radius-pill);
}

.home-page .log-day-btn.has-selected-tags::before {
	opacity: 0.7;
	animation: gentle-border-flow 4s ease-in-out infinite;
}

.home-page .log-day-btn.mood-1-border::before {
	background: linear-gradient(
		45deg,
		rgb(44 44 44 / 30%),
		rgb(44 44 44 / 60%),
		rgb(44 44 44 / 30%),
		rgb(88 88 88 / 40%),
		rgb(44 44 44 / 30%)
	);
}

.home-page .log-day-btn.mood-2-border::before {
	background: linear-gradient(
		45deg,
		rgb(139 21 56 / 30%),
		rgb(139 21 56 / 60%),
		rgb(139 21 56 / 30%),
		rgb(173 63 89 / 40%),
		rgb(139 21 56 / 30%)
	);
}

.home-page .log-day-btn.mood-3-border::before {
	background: linear-gradient(
		45deg,
		rgb(211 47 47 / 30%),
		rgb(211 47 47 / 60%),
		rgb(211 47 47 / 30%),
		rgb(229 115 115 / 40%),
		rgb(211 47 47 / 30%)
	);
}

.home-page .log-day-btn.mood-4-border::before {
	background: linear-gradient(
		45deg,
		rgb(255 111 0 / 30%),
		rgb(255 111 0 / 60%),
		rgb(255 111 0 / 30%),
		rgb(255 158 79 / 40%),
		rgb(255 111 0 / 30%)
	);
}

.home-page .log-day-btn.mood-5-border::before {
	background: linear-gradient(
		45deg,
		rgb(249 168 37 / 30%),
		rgb(249 168 37 / 60%),
		rgb(249 168 37 / 30%),
		rgb(255 193 79 / 40%),
		rgb(249 168 37 / 30%)
	);
}

.home-page .log-day-btn.mood-6-border::before {
	background: linear-gradient(
		45deg,
		rgb(102 187 106 / 30%),
		rgb(102 187 106 / 60%),
		rgb(102 187 106 / 30%),
		rgb(165 214 167 / 40%),
		rgb(102 187 106 / 30%)
	);
}

.home-page .log-day-btn.mood-7-border::before {
	background: linear-gradient(
		45deg,
		rgb(67 160 71 / 30%),
		rgb(67 160 71 / 60%),
		rgb(67 160 71 / 30%),
		rgb(129 199 132 / 40%),
		rgb(67 160 71 / 30%)
	);
}

.home-page .log-day-btn.mood-8-border::before {
	background: linear-gradient(
		45deg,
		rgb(66 165 245 / 30%),
		rgb(66 165 245 / 60%),
		rgb(66 165 245 / 30%),
		rgb(144 202 249 / 40%),
		rgb(66 165 245 / 30%)
	);
}

.home-page .log-day-btn.disabled {
	background: rgb(200 200 200 / 60%);
	border: 2px solid rgb(180 180 180 / 40%);
	color: rgb(150 150 150 / 80%);
	opacity: 0.7;
	cursor: not-allowed;
	pointer-events: none;
}

.home-page .log-day-btn.disabled:hover {
	transform: none !important;
	box-shadow: none !important;
}

.home-page .log-day-btn.disabled::before {
	opacity: 0 !important;
}

.home-page .log-day-btn.logged {
	background: rgb(76 175 80 / 90%) !important;
	border: 2px solid rgb(76 175 80 / 60%);
	color: white;
	cursor: not-allowed;
	pointer-events: none;
}

.log-day-btn.loading .save-icon,
.log-day-btn.loading .fa-check,
.log-day-btn.loading .btn-text {
	display: none;
}

.log-day-btn .loading-spinner {
	display: none;
}

.log-day-btn.loading .loading-spinner {
	display: inline-block;
	animation: spin 1s linear infinite;
}

.journal-entry-input {
	margin: auto;
	width: 98%;
	border: 3px solid rgba(128, 128, 128, 0.5);
	border-radius: var(--radius-pill);
	background: linear-gradient(
		135deg,
		rgba(0, 247, 255, 0.2),
		rgba(0, 170, 255, 0.2),
		rgba(0, 94, 255, 0.2),
		rgba(102, 0, 255, 0.2)
	);
	font-size: clamp(0.85rem, 1.8vw, 1.05rem);
	font-family: "Inter", sans-serif;
	color: rgb(75, 75, 75);
	resize: none;
	overflow: hidden;
	transition: height 0.2s ease;
	box-sizing: border-box;
	text-align: left;
	line-height: normal;
	align-content: center;
	padding: 0rem 2rem;
	height: 80px;
	transition:
		border 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.journal-entry-input:focus {
	outline: none;
	border: 3px solid rgba(3, 0, 186, 0.5) !important;
	color: black;
}

@media (max-width: 768px) {
	.journal-entry-input {
		font-family: "DM Sans", sans-serif;
	}
}

.journal-entry-input.disabled {
	opacity: 0.7;
	pointer-events: none;
	cursor: not-allowed;
}

.home-page .cards-row {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	flex: none;
	width: 100%;
	min-height: 0;
	gap: clamp(1rem, 2vh, 1.5rem);
}

.home-page .snapshot {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(1rem, 2vh, 1.5rem) clamp(1rem, 2vh, 1.5rem)
		clamp(0.5rem, 1vh, 0.75rem) !important;
	background: rgb(255 255 255 / 30%) !important;
	gap: clamp(0.75rem, 1.5vh, 1rem);
}

.home-page .snapshot-pills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	flex: none;
	gap: clamp(0.5rem, 1vh, 0.75rem);
}

.home-page .snapshot-pill {
	display: flex;
	align-items: center;
	min-height: clamp(60px, 8vh, 80px);
	max-height: 12vh;
	padding: clamp(0.75rem, 1.5vh, 1rem) clamp(1rem, 2vh, 1.25rem);
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid rgb(255 255 255 / 80%);
	border-radius: 999px;
	box-shadow:
		0 4px 20px rgb(0 0 0 / 8%),
		0 2px 8px rgb(0 0 0 / 5%),
		inset 0 1px 0 rgb(255 255 255 / 90%);
	gap: clamp(1rem, 2vh, 1.5rem);
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.home-page .snapshot-pill:hover {
	background: rgb(255 255 255 / 75%);
	box-shadow:
		0 8px 32px rgb(0 0 0 / 12%),
		0 4px 16px rgb(0 0 0 / 8%),
		inset 0 1px 0 rgb(255 255 255 / 95%);
	transform: translateY(-3px) scale(1.02);
}

.home-page .status-icon,
.home-page .trend-arrow,
.home-page .average-value,
.home-page .days-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 6vw, 50px);
	height: clamp(40px, 6vw, 50px);
	padding: 0;
	margin-right: clamp(0.4rem, 0.8vh, 0.6rem);
	background: rgb(255 255 255 / 70%);
	border: 2px solid rgb(255 255 255 / 90%);
	border-radius: 999px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	font-weight: var(--font-weight-bold);
	text-align: center;
	line-height: 1;
}

.home-page .pill-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: clamp(2px, 0.5vh, 4px);
}

.home-page .pill-title {
	margin-bottom: 2px;
	font-size: clamp(0.75rem, 1.8vw, 0.9rem);
	font-weight: var(--font-weight-medium);
	color: rgb(26 46 59 / 70%);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.home-page .pill-subtitle {
	font-size: clamp(0.8rem, 2vw, 1.5rem);
	font-weight: 400;
	color: var(--color-text-muted);
}

.home-page .analytics-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-top: clamp(0.5rem, 1vh, 0.75rem);
	padding: clamp(0.75rem, 1.5vh, 1rem);
	background: rgb(255 255 255 / 80%);
	border: 2px solid rgb(255 255 255 / 90%);
	border-radius: 999px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
	font-size: clamp(0.9rem, 2vw, 1.1rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.home-page .analytics-link:hover {
	background: rgb(255 255 255 / 95%);
	box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
	transform: translateY(-2px);
}

.three-day-average.great-trend .average-value {
	color: #43a047;
}

.three-day-average.good-trend .average-value {
	color: #66bb6a;
}

.three-day-average.okay-trend .average-value {
	color: #f9a825;
}

.three-day-average.rough-patch .average-value {
	color: #ff6f00;
}

.three-day-average.tough-times .average-value {
	color: #d32f2f;
}

.three-day-average.no-data .average-value,
.mood-trend.no-data .trend-arrow {
	color: #6b7e8a;
}

.mood-trend.excellent-trend .trend-arrow {
	color: #43a047;
}

.mood-trend.great-trend .trend-arrow {
	color: #66bb6a;
}

.mood-trend.good-trend .trend-arrow {
	color: #8bc34a;
}

.mood-trend.slight-improvement .trend-arrow {
	color: #4caf50;
}

.mood-trend.stable .trend-arrow {
	color: #f9a825;
}

.mood-trend.slight-decline .trend-arrow {
	color: #ff9800;
}

.mood-trend.concerning .trend-arrow {
	color: #ff6f00;
}

.mood-trend.worrying .trend-arrow {
	color: #f44336;
}

.average-mood.amazing .average-value {
	color: #42a5f5;
}

.average-mood.great .average-value {
	color: #43a047;
}

.average-mood.good .average-value {
	color: #66bb6a;
}

.average-mood.okay .average-value {
	color: #f9a825;
}

.average-mood.rough .average-value {
	color: #ff6f00;
}

.average-mood.bad .average-value {
	color: #d32f2f;
}

.average-mood.no-data .average-value {
	color: #6b7e8a;
}

.days-recorded .days-icon {
	color: #1976d2;
}

.average-mood.amazing .mobiledisplayonly,
.average-mood.great .mobiledisplayonly,
.average-mood.good .mobiledisplayonly,
.average-mood.okay .mobiledisplayonly,
.average-mood.rough .mobiledisplayonly,
.average-mood.bad .mobiledisplayonly,
.average-mood.no-data .mobiledisplayonly,
.mood-trend.excellent-trend .mobiledisplayonly,
.three-day-average.great-trend .mobiledisplayonly,
.three-day-average.good-trend .mobiledisplayonly,
.three-day-average.okay-trend .mobiledisplayonly,
.three-day-average.rough-patch .mobiledisplayonly,
.three-day-average.tough-times .mobiledisplayonly,
.three-day-average.no-data .mobiledisplayonly,
.mood-trend.great-trend .mobiledisplayonly,
.mood-trend.good-trend .mobiledisplayonly,
.mood-trend.slight-improvement .mobiledisplayonly,
.mood-trend.stable .mobiledisplayonly,
.mood-trend.slight-decline .mobiledisplayonly,
.mood-trend.concerning .mobiledisplayonly,
.mood-trend.worrying .mobiledisplayonly,
.mood-trend.no-data .mobiledisplayonly {
	color: #fff !important;
	border: none !important;
}

.average-mood.amazing .mobiledisplayonly {
	background: #42a5f5 !important;
}

.average-mood.great .mobiledisplayonly,
.mood-trend.excellent-trend .mobiledisplayonly,
.three-day-average.great-trend .mobiledisplayonly {
	background: #43a047 !important;
}

.average-mood.good .mobiledisplayonly,
.mood-trend.great-trend .mobiledisplayonly,
.three-day-average.good-trend .mobiledisplayonly {
	background: #66bb6a !important;
}

.average-mood.okay .mobiledisplayonly,
.three-day-average.okay-trend .mobiledisplayonly,
.mood-trend.stable .mobiledisplayonly {
	background: #f9a825 !important;
}

.average-mood.rough .mobiledisplayonly,
.three-day-average.rough-patch .mobiledisplayonly,
.mood-trend.concerning .mobiledisplayonly {
	background: #ff6f00 !important;
}

.average-mood.bad .mobiledisplayonly,
.three-day-average.tough-times .mobiledisplayonly {
	background: #d32f2f !important;
}

.average-mood.no-data .mobiledisplayonly,
.three-day-average.no-data .mobiledisplayonly,
.mood-trend.no-data .mobiledisplayonly {
	background: #6b7e8a !important;
}

.mood-trend.good-trend .mobiledisplayonly {
	background: #8bc34a !important;
}

.mood-trend.slight-improvement .mobiledisplayonly {
	background: #4caf50 !important;
}

.mood-trend.slight-decline .mobiledisplayonly {
	background: #ff9800 !important;
}

.mood-trend.worrying .mobiledisplayonly {
	background: #f44336 !important;
}

.calendar-page .app-view {
	overflow: hidden;
}

.calendar-container {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	min-height: 0 !important;
	padding: clamp(1rem, 2vh, 1.5rem);
	background: var(--card-background);
	overflow: hidden;
	gap: clamp(1rem, 2vh, 1.5rem);
}

.calendar-controls {
	flex-shrink: 0;
	padding: clamp(0.5rem, 1vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
	background: rgba(255, 255, 255, 0.5);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-level-3);
}

.time-range-selector {
	display: flex;
	width: 100%;
	padding: 4px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.time-range-selector button {
	flex: 1;
	padding: clamp(0.5rem, 1vh, 0.75rem) 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(0.8rem, 1.6vw, 0.9rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	text-align: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.time-range-selector button:hover {
	background: rgba(0, 0, 0, 0.05);
	color: var(--color-text-primary);
}

.time-range-selector button.active {
	background: white;
	color: var(--color-text-primary);
	box-shadow: var(--shadow-level-3);
	transform: scale(1.02);
}

.calendar-grid-container {
	flex-grow: 1;
	min-height: 0;
}

.calendar-grid-container.month-view-container {
	display: flex;
	flex-direction: column;
	padding: 0 clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vh, 1.5rem);
	overflow-y: auto;
	gap: clamp(1.5rem, 3vh, 2.5rem);
}

.calendar-grid-container.summary-grid-container.threemo,
.calendar-grid-container.summary-grid-container.sixmo,
.calendar-grid-container.summary-grid-container.onemo {
	display: grid;
	align-content: flex-start;
	height: auto;
	min-height: unset;
	padding: 16px;
	box-sizing: border-box;
	grid-auto-rows: 48px;
	overflow-y: auto;
}

.calendar-grid-container.summary-grid-container.onemo {
	grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
	grid-auto-rows: auto;
	gap: 12px;
}

.calendar-grid-container.summary-grid-container.threemo {
	grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
	gap: 32px;
}

.calendar-grid-container.summary-grid-container.sixmo {
	grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
	gap: 6px;
}

.calendar-grid-container.logs-view-container {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow-y: auto;
	gap: 8px;
}

.day-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	color: var(--color-text-primary);
	opacity: 0;
	transform: scale(0.8);
	animation: scale-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, box-shadow;
}

.day-cell:hover {
	z-index: 10;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transform: scale(1.1);
}

.day-cell.empty {
	background: transparent !important;
	border: none !important;
	opacity: 1;
	transform: none;
	animation: none;
	backdrop-filter: none;
	cursor: default;
	pointer-events: none;
}

.day-cell.empty:hover {
	box-shadow: none;
	transform: none;
}

.month-block {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.5vh, 1rem);
}

.month-header {
	padding-left: clamp(0.5rem, 1vw, 0.75rem);
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

.weekday-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding-bottom: 5px;
	gap: 5px;
}

.weekday {
	font-size: clamp(0.7rem, 1.4vw, 0.8rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
	text-align: center;
}

.month-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.day-cell-date {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: clamp(0.7rem, 1.3vw, 1.6rem);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.month-view-container .day-cell {
	border-style: solid;
	border-width: 2px;
	border-radius: clamp(4px, 1vw, 8px);
}

.month-view-container .day-cell.mood-color-0 .day-cell-date,
.month-view-container .day-cell.mood-color-5 .day-cell-date {
	color: var(--color-text-secondary);
}

.month-view-container
	.day-cell:not(.mood-color-0):not(.mood-color-5)
	.day-cell-date {
	color: rgba(255, 255, 255, 0.8);
}

.summary-grid-container .day-cell {
	border-radius: 50%;
}

.summary-grid-container .day-cell:hover {
	z-index: 10;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transform: scale(1.15);
}

.day-cell-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
}

.summary-grid-container .day-cell-month {
	font-size: clamp(0.6rem, 1.2vw, 0.75rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
}

.summary-grid-container.sixmo .day-cell-month {
	font-size: 0.5rem;
}

.summary-grid-container .day-cell-day {
	font-size: clamp(0.8rem, 1.8vw, 1.1rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
}

.summary-grid-container.sixmo .day-cell-day {
	font-size: 0.7rem;
}

.summary-grid-container.onemo .summary-month-label-row {
	display: none !important;
}

.logs-view-container .list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: clamp(0.75rem, 1.5vh, 1rem) clamp(1rem, 2vw, 1.5rem);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	transition: all 0.3s ease;
}

.logs-view-container .list-item:hover {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.8);
}

.list-date-label {
	font-size: clamp(0.9rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
}

.list-mood-label {
	display: flex;
	align-items: center;
	font-size: clamp(0.9rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-semibold);
	color: var(--mood-color, var(--color-text-primary));
	gap: 0.75rem;
}

.list-mood-label::before {
	display: block;
	width: 12px;
	height: 12px;
	content: "";
	background-color: var(--mood-color, var(--color-text-primary));
	border-radius: 50%;
}

.summary-month-label-row {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	margin: 18px 0 10px 0;
	padding: 8px 0 2px 0;
	background: none;
}

.summary-month-label-text {
	display: inline-block;
	padding: 4px 16px;
	background: rgb(255 255 255 / 60%);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 7%);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-muted);
	letter-spacing: 0.02em;
}

.summary-year-label-row {
	display: block;
	align-items: flex-start;
	grid-column: 1 / -1;
	width: 100%;
	margin: 24px 0 10px 0;
	padding: 2px 0;
	background: none;
}

.summary-year-label-text {
	display: inline-block;
	padding: 6px 28px;
	background: rgb(255 255 255 / 70%);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
}

.day-cell.mood-color-0 {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(0, 0, 0, 0.15);
}

.day-cell.mood-color-1 {
	border-color: var(--color-mood-1);
	color: white;
}

.day-cell.mood-color-2 {
	border-color: var(--color-mood-2);
	color: white;
}

.day-cell.mood-color-3 {
	border-color: var(--color-mood-3);
	color: white;
}

.day-cell.mood-color-4 {
	border-color: var(--color-mood-4);
	color: white;
}

.day-cell.mood-color-5 {
	border-color: var(--color-mood-5);
	color: var(--color-text-primary);
}

.day-cell.mood-color-6 {
	border-color: var(--color-mood-6);
	color: white;
}

.day-cell.mood-color-7 {
	border-color: var(--color-mood-7);
	color: white;
}

.day-cell.mood-color-8 {
	border-color: var(--color-mood-8);
	color: white;
}

.month-view-container .day-cell.mood-color-0 {
	background: rgba(255, 255, 255, 0.15);
}

.month-view-container .day-cell.mood-color-1 {
	background-color: var(--color-mood-1-tinted-bg);
}

.month-view-container .day-cell.mood-color-2 {
	background-color: var(--color-mood-2-tinted-bg);
}

.month-view-container .day-cell.mood-color-3 {
	background-color: var(--color-mood-3-tinted-bg);
}

.month-view-container .day-cell.mood-color-4 {
	background-color: var(--color-mood-4-tinted-bg);
}

.month-view-container .day-cell.mood-color-5 {
	background-color: var(--color-mood-5-tinted-bg);
}

.month-view-container .day-cell.mood-color-6 {
	background-color: var(--color-mood-6-tinted-bg);
}

.month-view-container .day-cell.mood-color-7 {
	background-color: var(--color-mood-7-tinted-bg);
}

.month-view-container .day-cell.mood-color-8 {
	background-color: var(--color-mood-8-tinted-bg);
}

.summary-grid-container .day-cell.mood-color-0 {
	background: transparent;
	border: 1px dashed rgba(0, 0, 0, 0.15);
}

.summary-grid-container .day-cell:not(.mood-color-0) {
	background-color: var(--mood-border-color);
}

.month-view-container::-webkit-scrollbar,
.summary-grid-container::-webkit-scrollbar,
.logs-view-container::-webkit-scrollbar {
	width: 8px;
}

.month-view-container::-webkit-scrollbar-track,
.summary-grid-container::-webkit-scrollbar-track,
.logs-view-container::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.month-view-container::-webkit-scrollbar-thumb,
.summary-grid-container::-webkit-scrollbar-thumb,
.logs-view-container::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

#calendarEntryModal .modal-content {
	background: rgb(255 255 255 / 60%);
	backdrop-filter: var(--glass-backdrop-filter);
	border: var(--card-border);
	padding: clamp(1.5rem, 3vh, 2rem);
	max-width: 500px;
	width: 100%;
	animation: modalFadeIn 0.3s ease-out;
}

#calendarEntryModal .modal-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#calendarEntryModal .mood-slider-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1rem;
}

#calendarEntryModal .slider-with-icons {
	display: flex;
	align-items: center;
	gap: 1rem;
}

#calendarEntryModal .mood-slider {
	width: 100%;
	flex-grow: 1;
	height: 20px;
	background: linear-gradient(
		to right,
		var(--color-mood-1) 0%,
		var(--color-mood-2) 12.5%,
		var(--color-mood-3) 25%,
		var(--color-mood-4) 37.5%,
		var(--color-mood-5) 50%,
		var(--color-mood-6) 62.5%,
		var(--color-mood-7) 75%,
		var(--color-mood-8) 87.5%,
		var(--color-mood-8) 100%
	);
	border-radius: var(--radius-pill);
	outline: none;
	appearance: none;
	cursor: pointer;
}

#calendarEntryModal .mood-slider::-webkit-slider-thumb {
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: white;
	border: 3px solid rgba(0, 0, 0, 0.4);
	cursor: pointer;
	box-shadow: var(--shadow-level-3);
}

#calendarEntryModal .mood-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: white;
	border: 3px solid rgba(0, 0, 0, 0.4);
	cursor: pointer;
	box-shadow: var(--shadow-level-3);
}

#calendarEntryModal .mood-icon {
	font-size: 1.5rem;
}

#calendarEntryModal .mood-value {
	text-align: center;
	font-weight: var(--font-weight-bold);
	font-size: 1.1rem;
	color: var(--color-text-primary);
}

#calendarEntryModal .emotion-tags {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.75rem;
}

#calendarEntryModal .emotion-tag {
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	padding: 0.6rem 0.5rem;
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

#calendarEntryModal .emotion-tag:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
}

#calendarEntryModal .emotion-tag.active {
	background-color: var(--color-text-primary);
	color: white;
	border-color: var(--color-text-primary);
}

#calendarEntryModal .modal-actions {
	margin-top: 1.5rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

#calendarEntryModal .modal-actions.space-between {
	justify-content: space-between;
}

#calendarEntryModal .modal-btn.delete-btn {
	background: #c6000051;
	border-color: #616161;
}

#calendarEntryModal .modal-btn.delete-btn:active {
	background: #424242;
}

.modal-btn.save-btn {
	background: #3bff6651;
}

#calendarEntryModal .modal-btn.cancel-btn {
	display: none !important;
}

.account-page {
	background: linear-gradient(
			330deg,
			#f8ef85 0%,
			#ffd792 25%,
			#feb97d 50%,
			#ffad8d 75%,
			#ffa59b 100%
		)
		fixed;
}

.account-page .account-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: clamp(1.5rem, 3vh, 2.5rem);
}

.account-page .account-section:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.account-page .account-section:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.account-page .security-data-section {
	grid-column: 1 / -1;
	grid-row: 2;
}

.account-page .top-actions {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: clamp(1rem, 2vh, 1.5rem);
	margin-bottom: clamp(1rem, 2vh, 1.5rem);
	gap: var(--spacing-md);
}

.account-page .top-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: clamp(0.7rem, 1.4vh, 1rem) clamp(1.2rem, 2.4vh, 1.5rem);
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--font-family);
	font-size: clamp(0.9rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-medium);
	color: white;
	backdrop-filter: none;
	cursor: pointer;
	gap: var(--spacing-sm);
	transition: var(--transition-standard);
}

.account-page .top-action-btn:hover {
	box-shadow: var(--shadow-level-4);
	transform: translateY(-1px);
}

.account-page .top-action-btn.logout-btn {
	background: rgb(244 67 54 / 40%);
	border-color: rgb(218 25 11 / 90%);
}

.account-page .top-action-btn.logout-btn:hover {
	background: rgb(218 25 11 / 40%);
}

.account-page .account-section {
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: auto;
	padding: clamp(1.5rem, 3vh, 2rem);
	background: var(--glass-background-extra);
	border: var(--card-border);
	border-radius: var(--radius-large);
	transition: var(--transition-standard);
}

.account-page .profile-pills,
.account-page .preferences-pills,
.account-page .security-data-pills {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding-bottom: 0;
	gap: var(--spacing-md);
}

.account-page .security-data-pills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.account-page .section-header {
	margin-bottom: clamp(1rem, 2vh, 1.5rem);
	text-align: center;
}

.account-page .section-header h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	text-shadow: var(--shadow-soft-text);
	gap: var(--spacing-sm);
}

.account-page .section-header h2 i {
	font-size: clamp(1.2rem, 2.3vw, 1.6rem);
	opacity: 0.8;
}

.account-page .profile-pill,
.account-page .preference-pill,
.account-page .security-pill,
.account-page .data-pill {
	display: flex;
	align-items: center;
	min-height: clamp(60px, 8vh, 80px);
	padding: clamp(1rem, 2vh, 1.5rem) clamp(1.2rem, 2.4vh, 1.8rem);
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	gap: clamp(1rem, 2vh, 1.5rem);
	transition: var(--transition-standard);
}

.account-page .profile-pill:hover,
.account-page .preference-pill:hover,
.account-page .security-pill:hover,
.account-page .data-pill:hover {
	background: rgb(255 255 255 / 30%);
	box-shadow: var(--shadow-level-4);
	transform: translateY(-1px);
}

.account-page .data-pill.danger {
	background: rgb(244 67 54 / 5%);
	border-color: rgb(244 67 54 / 30%);
}

.account-page .data-pill.danger:hover {
	background: rgb(244 67 54 / 10%);
}

.account-page .pill-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 6vh, 50px);
	height: clamp(40px, 6vh, 50px);
	background: rgb(255 255 255 / 20%);
	border-radius: var(--radius-circle);
}

.account-page .pill-icon i {
	font-size: clamp(1.2rem, 2.4vh, 1.6rem);
	color: var(--color-text-primary);
}

.account-page .pill-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: clamp(0.25rem, 0.5vh, 0.4rem);
}

.account-page .pill-title {
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
}

.account-page .pill-subtitle {
	font-size: clamp(1rem, 1vw, 1rem);
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
	opacity: 0.9;
	transition: color 0.3s;
}

.account-page .pill-action {
	flex-shrink: 0;
}

.account-page .pill-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 6vh, 50px);
	height: clamp(40px, 6vh, 50px);
	background: rgb(255 255 255 / 20%);
	border: 2px solid rgb(200 200 200 / 50%);
	border-radius: var(--radius-circle);
	color: var(--color-text-primary);
	cursor: pointer;
	transition: var(--transition-standard);
}

.account-page .pill-btn:hover {
	background: rgb(255 255 255 / 40%);
	transform: scale(1.05);
}

.account-page .pill-btn i {
	font-size: clamp(1rem, 2vh, 1.3rem);
}

.account-page .danger-btn {
	background: rgb(244 67 54 / 10%);
	border-color: rgb(244 67 54 / 30%);
	color: var(--color-error);
}

.account-page .danger-btn:hover {
	background: rgb(244 67 54 / 20%);
}

.account-page .pill-toggle {
	flex-shrink: 0;
}

.account-page .toggle-switch {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.account-page .toggle-label {
	position: relative;
	display: flex;
	align-items: center;
	width: 52px;
	height: 28px;
	background: rgb(20, 175, 0);
	border: none;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.account-page .toggle-label::after {
	position: absolute;
	top: 3.5px;
	left: 2px;
	content: "";
	width: 20px;
	height: 20px;
	background: white;
	border-radius: var(--radius-circle);
	box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.account-page .toggle-switch:checked + .toggle-label {
	background: var(--color-mood-8);
	border-color: rgb(66 165 245 / 50%);
	box-shadow: none;
}

.account-page .toggle-switch:checked + .toggle-label::after {
	transform: translateX(24px);
}

.account-page .toggle-label:hover::after {
	box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
	transform: scale(1.1);
}

.account-page .toggle-switch:checked + .toggle-label:hover::after {
	transform: translateX(24px) scale(1.1);
}

.account-page .toggle-switch:focus-visible + .toggle-label {
	outline: none;
	box-shadow: 0 0 0 4px rgb(66 165 245 / 40%);
}

.account-page .form-input {
	width: 100%;
	padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1.2rem, 2.4vh, 1.5rem);
	background: var(--glass-background);
	border: 2px solid var(--glass-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(1rem, 2vw, 1.1rem);
	color: var(--color-text-primary);
	outline: none;
	box-sizing: border-box;
	transition: var(--transition-standard);
}

.account-page .form-input:focus {
	background: rgb(255 255 255 / 30%);
	box-shadow: 0 0 0 3px rgb(135 206 235 / 20%);
}

.account-page .modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
}

.account-page .modal-btn {
	min-width: 100px;
	padding: clamp(0.8rem, 1.6vh, 1.1rem) clamp(1.4rem, 2.8vh, 1.8rem);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-family);
	font-size: clamp(0.95rem, 1.9vw, 1.1rem);
	font-weight: var(--font-weight-bold);
	color: white;
	backdrop-filter: none;
	cursor: pointer;
	transition: var(--transition-standard);
}

.account-page .modal-btn:hover {
	transform: translateY(-1px);
}

.account-page .modal-btn.save-btn {
	background: #4caf50;
	border-color: #45a049;
}

.account-page .modal-btn.save-btn:hover {
	background: #45a049;
}

.account-page .modal-btn.cancel-btn {
	background: #f44336;
	border-color: #da190b;
}

.account-page .modal-btn.cancel-btn:hover {
	background: #da190b;
}

.insights-page .container {
	max-width: min(1120px, 90vw);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(0.75rem, 1.5vh, 1.25rem);
	padding-right: clamp(0.75rem, 1.5vh, 1.25rem);
	gap: clamp(2rem, 4vh, 3rem);
}

.insights-page .app-view {
	padding-right: 8px;
	overflow-y: auto;
}

.insights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	max-width: 100%;
	gap: clamp(1rem, 2vh, 1.5rem);
}

@media (max-width: 768px) {
	.insights-grid {
		grid-template-columns: 1fr;
	}
}

.insights-grid .card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	padding: clamp(1rem, 2.5vh, 1.8rem);
	box-sizing: border-box;
	gap: clamp(1rem, 2vh, 1.5rem);
	overflow-x: hidden;
}

.insights-overview,
.insights-timeline {
	grid-column: 1 / -1;
}

.insights-header {
	display: flex;
	align-items: center;
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--glass-border);
	color: var(--color-text-primary);
	gap: var(--spacing-sm);
}

.insights-header i {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	opacity: 0.8;
}

.insights-header h3 {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: var(--font-weight-semibold);
}

.aibadge {
	padding: 2px 16px;
	background: #ffff5336;
	border: 3px solid #c18d0070;
	border-radius: 999px;
	margin-left: 0.5rem;
	font-size: 80%;
	font-weight: 200;
	color: black;
}

.pinktint {
	background-color: rgba(0, 0, 0, 0.462) !important;
}

.whitetext {
	display: flex;
	align-content: center;
	width: fit-content;
	margin-top: 0.25rem;
	margin-left: 0 !important;
	border: none !important;
	color: white !important;
}

.bluetint {
	display: flex;
	width: fit-content;
	margin-top: 0.25rem !important;
	margin-left: 0 !important;
	background-color: rgba(187, 255, 181, 0.25) !important;
	border: 2px solid rgba(0, 128, 0, 0.5) !important;
	font-size: 70% !important;
}

.specialsparkle {
	align-self: center;
	margin-left: 0.3rem;
	font-size: 80% !important;
}

#lock-icon {
	align-items: center;
	align-content: center;
	font-size: 70%;
	color: rgb(0, 75, 0);
}

.overview-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
	gap: clamp(0.75rem, 1.5vw, 1rem);
}

.stat-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-md);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	gap: var(--spacing-sm);
}

.stat-value {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
}

.stat-value.mood-up {
	color: var(--color-success);
}

.stat-value.mood-down {
	color: var(--color-error);
}

.stat-label {
	font-size: clamp(0.75rem, 1.5vw, 0.9rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
}

.insights-today {
	grid-column: 1 / -1 !important;
	border: 4px solid rgba(0, 0, 255, 0.5) !important;
}

.insights-today .today-card-content {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 100%;
	overflow-x: hidden;
}

.today-moodscore {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 1rem;
	background: none;
	border: 4px solid white;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(66, 165, 245, 0.3);
	color: white;
	text-align: center;
	overflow: hidden;
	--angle: 0deg;
}

.today-moodscore::before {
	position: absolute;
	z-index: 1;
	content: "";
	inset: 0;
	background: rgba(16, 0, 104, 0.6);
	border-radius: 50%;
	pointer-events: none;
}

.today-moodscore::after {
	position: absolute;
	z-index: 0;
	content: "";
	inset: 0;
	--conic-gradient-var2: conic-gradient(
		rgba(190, 187, 86, 1) 0%,
		rgba(242, 163, 70, 1) 20%,
		rgba(255, 0, 210, 1) 40%,
		rgba(201, 69, 255, 1) 60%,
		rgb(63, 175, 255) 80%,
		rgba(190, 187, 86, 1) 100%
	);
	background: var(--conic-gradient-var2);
	border-radius: 50%;
	animation: moodscore-gradient-rotate 12s linear infinite;
}

.today-moodscore > * {
	position: relative;
	z-index: 1;
}

.moodscore-value {
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: var(--font-weight-bold);
	font-family: "DM Sans", sans-serif;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	line-height: 1;
	background-size: 400% 400%;
}

.moodscore-label {
	margin-top: 0.5rem;
	font-size: clamp(0.8rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-medium);
	opacity: 0.9;
}

.today-ai-insights {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	gap: var(--spacing-md);
}

.ai-insight-pill {
	display: flex;
	flex-grow: 1;
	align-items: center;
	align-content: center;
	width: 100%;
	max-width: 100%;
	padding: clamp(0.75rem, 1.5vh, 1rem) clamp(1rem, 2vw, 1.25rem);
	background: linear-gradient(90deg, #020344 0%, #4446d6 50%, #1ea9c4 100%);
	border-radius: var(--radius-pill);
	font-size: clamp(0.85rem, 1.6vw, 1.1rem);
	font-weight: 500;
	color: white;
	gap: var(--spacing-md);
}

.ai-insight-pill i {
	font-size: 1.2rem;
	color: var(--color-text-primary);
	opacity: 0.7;
}

.fa-lightbulb {
	color: rgb(255, 255, 255) !important;
}

.distribution-bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	gap: var(--spacing-md);
}

.distribution-bar {
	display: grid;
	grid-template-columns: 80px 1fr 40px;
	align-items: center;
	font-size: clamp(0.8rem, 1.6vw, 0.9rem);
	gap: var(--spacing-md);
	max-width: 100%;
	box-sizing: border-box;
}

.bar-label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-align: right;
	white-space: nowrap;
}

.bar-track {
	width: 100%;
	height: 24px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	border-radius: var(--radius-pill);
	transition: width 0.5s ease-out;
}

.bar-percent {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.bar-fill.mood-8 {
	background: var(--color-mood-8);
}

.bar-fill.mood-7 {
	background: var(--color-mood-7);
}

.bar-fill.mood-6 {
	background: var(--color-mood-6);
}

.bar-fill.mood-5 {
	background: var(--color-mood-5);
}

.bar-fill.mood-4 {
	background: var(--color-mood-4);
}

.bar-fill.mood-3 {
	background: var(--color-mood-3);
}

.bar-fill.mood-2 {
	background: var(--color-mood-2);
}

.bar-fill.mood-1 {
	background: var(--color-mood-1);
}

.tag-insight-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.tag-insight-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) var(--spacing-md);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
}

.tag-name {
	font-size: clamp(0.85rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.tag-correlation {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.tag-mood-label {
	display: flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: clamp(0.7rem, 1.6vw, 0.9rem);
	font-weight: var(--font-weight-medium);
	gap: 6px;
}

.tag-mood-label.positive {
	background: rgba(76, 175, 80, 0.15);
	color: var(--color-success);
}

.tag-mood-label.negative {
	background: rgba(244, 67, 54, 0.15);
	color: var(--color-error);
}

.tag-mood-label.neutral {
	background: rgba(249, 168, 37, 0.15);
	color: var(--color-rough);
}

.fa-arrow-up,
.fa-arrow-down {
	font-size: 80%;
}

.tag-avg-value {
	min-width: 70px;
	font-size: clamp(0.9rem, 1.8vw, 1rem);
	font-weight: var(--font-weight-bold);
	text-align: right;
}

.tag-avg-value.positive-value {
	color: var(--color-success);
}

.tag-avg-value.negative-value {
	color: var(--color-error);
}

.tag-avg-value.neutral-value {
	color: var(--color-rough);
}

.insights-goal {
	grid-column: 1 / -1;
}

.goal-pills {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.goal-pill {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 120px;
	padding: var(--spacing-md);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	gap: 4px;
}

.goal-label {
	margin-left: 1rem;
	font-size: var(--font-size-body-small);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-secondary);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.goal-value {
	margin-left: 1rem;
	font-size: clamp(0.9rem, 1.8vw, 1.1rem);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
}

.halfw {
	width: 60%;
}

.entr-label {
	margin-left: 1rem;
	padding: 7px;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 8px;
	font-weight: 600;
	color: #4a5e6a;
}

.pos-label {
	margin-right: 1rem;
	padding: 7px;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 8px;
	font-weight: 600;
	color: #4a5e6a;
}

.journal-indicator {
	position: absolute;
	top: 50%;
	right: 12px;
	display: block;
	width: 15%;
	height: 80%;
	background: #2195f382;
	border-radius: 999px;
	box-shadow: 0 0 2px rgba(33, 150, 243, 0.3);
	font-family: "DM Sans", sans-serif;
	font-size: 150%;
	font-weight: 700;
	text-align: center;
	align-content: center;
	transform: translateY(-50%);
}

.journal-indicator.neg {
	background: linear-gradient(#ff0f7b35, #f89b2943);
	border: 2px solid rgba(255, 0, 0, 0.5);
}

.journal-indicator.pos {
	background: linear-gradient(#82f4b23e, #30c67b3a);
	border: 2px solid rgba(0, 128, 0, 0.5);
}

#o-negative-arrow,
#t-negative-arrow,
#c-negative-arrow {
	display: none;
	font-size: 80%;
}

#o-positive-arrow,
#t-positive-arrow,
#c-positive-arrow {
	display: none;
}

.challenges-insights-card {
	grid-column: 1;
}

.timeline-chart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 360px;
	height: 360px;
}

.timeline-chart svg {
	width: 100%;
	height: 100%;
}

.timeline-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	padding: 0 4px;
	font-size: var(--font-size-body-small);
	color: var(--color-text-muted);
}

.exercise-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	gap: 1rem;
}

.exercise-captions {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 2000px;
	margin-top: 0rem;
	margin-bottom: 1.5rem;
	padding-left: 3%;
	padding-right: 3%;
	color: grey;
	font-weight: 300;
}

.exercise-caption-left {
	text-align: left;
	font-size: 0.95rem;
}

.exercise-caption-right {
	text-align: right;
	font-size: 0.95rem;
}

.exercise-options {
	display: flex;
	align-items: center;
	gap: 0rem;
	background: var(--glass-background);
	border: 3px solid lightgreen;
	border-radius: 999px;
	padding: 0rem 0rem;
	box-shadow: var(--shadow-level-4);
	transition:
		background 0.5s ease-in-out,
		border 0.5s ease-in-out;
}

.exercise-option.disabled,
.sleep-class.disabled {
	pointer-events: none;
	opacity: 0.3;
	transition: opacity 0.2s;
}

.exercise-option.disabled:hover,
.sleep-class.disabled:hover {
	background: inherit;
	border-color: inherit;
	color: inherit;
	cursor: default;
}

@media (max-width: 768px) {
	.exercise-selector {
		display: grid;
		gap: 1.5rem;
		margin: 0rem;
		margin-bottom: 1rem;
	}

	.exercise-option,
	.sleep-class {
		width: 18vw !important;
		height: 50px !important;
		font-size: 1.2rem !important;
	}
}

.exercise-option {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	width: 10vw;
	max-width: 120px;
	background: transparent;
	border: 3px solid transparent;
	border-radius: 999px;
	font-size: 1.4rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	cursor: pointer;
	transition:
		background 0.5s ease-in-out,
		color 0.5s ease-in-out,
		border 0.5s ease-in-out;
}

.sleep-class {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	width: 10vw;
	max-width: 120px;
	background: transparent;
	border: 3px solid transparent;
	border-radius: 999px;
	font-size: 1.4rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	cursor: pointer;
	transition:
		background 0.5s ease-in-out,
		color 0.5s ease-in-out,
		border 0.5s ease-in-out;
}

.sleep-opt {
	border: 3px solid rgb(226, 182, 255);
	transition: border 0.25s ease-in-out;
}

.sleep-opt.active:hover {
	border-color: transparent;
}

.exercise-option:hover {
	border: 3px solid rgba(0, 155, 0, 0.5);
	transform: none !important;
}

.exercise-option.active {
	background: rgb(0, 173, 0);
	color: #fff;
	box-shadow: 0 2px 8px rgb(66 165 245 / 20%);
	font-weight: var(--font-weight-bold);
	border: 3px solid transparent;
}

.sleep-class.active {
	background: rgb(127, 0, 173);
	color: #fff;
	box-shadow: 0 2px 8px rgb(66 165 245 / 20%);
	font-weight: var(--font-weight-bold);
	border: 3px solid transparent;
}

.sleep-class:hover {
	border: 3px solid rgba(162, 0, 220, 0.5);
	transform: none !important;
}

@media (width >= 1201px) {
	.home-page .container,
	.account-page .container,
	.calendar-page .container {
		max-width: min(1120px, 90vw);
		margin-left: auto;
		margin-right: auto;
		padding-left: clamp(0.75rem, 1.5vh, 1.25rem);
		padding-right: clamp(0.75rem, 1.5vh, 1.25rem);
		gap: clamp(2rem, 4vh, 3rem);
	}

	.header-container {
		margin-top: clamp(1rem, 2vh, 1.5rem) !important;
	}

	.home-page .emotion-tags {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
		gap: clamp(0.5rem, 1.2vh, 0.75rem);
	}
}

@media (width <= 1200px) {
	.cta-display-button,
	.cta-display-button-low {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.hero-content {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 4vh, 3rem);
		text-align: center;
	}

	.mdoclass {
		display: block;
	}

	.hero-visual {
		order: -1;
	}

	.insights-content {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 4vh, 3rem);
		text-align: center;
	}

	.insights-visual {
		order: -1;
	}

	.nav-links {
		display: none;
	}

	.mobile-menu-toggle {
		display: flex;
	}
}

@media (width <= 1200px) {
	.container {
		padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 4vw, 1.5rem)
			clamp(6rem, 12vh, 8rem);
		gap: clamp(0.5rem, 2vw, 0.75rem);
	}

	.header-nav {
		display: none;
	}

	.user-settings {
		display: none;
	}

	.mobile-nav-container {
		display: flex;
	}

	.mobile-spacer {
		display: block;
		height: 70px;
	}

	.main-header {
		height: 80px;
		align-items: center;
	}

	.mobile-profile {
		height: auto;
	}

	.faq-container {
		max-width: 90vw;
	}

	.account-page .container {
		max-width: 100% !important;
		padding-bottom: clamp(8rem, 16vh, 10rem);
	}

	.account-page .account-container {
		display: flex;
		flex-direction: column;
		gap: clamp(1rem, 2vh, 1.5rem);
	}

	.account-page .account-section {
		width: 100%;
	}

	.account-page .security-data-pills {
		grid-template-columns: 1fr;
	}

	.account-page .pill-content {
		align-items: flex-start;
	}

	.account-page .pill-action,
	.account-page .pill-toggle {
		align-self: center;
		margin-left: auto;
	}

	.insights-grid {
		grid-template-columns: 1fr;
	}

	.insights-overview,
	.insights-timeline {
		grid-column: auto;
	}
}

@media (width <= 950px) {
	.steps-container {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (width <= 768px) {
	.home-page .emotion-tags {
		grid-template-columns: repeat(2, 1fr);
	}

	.pill-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.mobiledisplayonly {
		display: block;
		max-width: max-content !important;
		margin-top: 0.3rem;
		padding: 5px 8px;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 999px;
		font-size: clamp(0.9rem, 3vw, 0.7rem);
		font-weight: 700;
		text-align: left;
	}

	.auth-container {
		padding: var(--spacing-md);
	}

	.auth-card {
		margin: var(--spacing-md) 0;
		padding: clamp(1.5rem, 3vh, 2rem);
	}

	.home-page .mood-slider-container {
		min-height: 0 !important;
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
		gap: 0.5rem !important;
	}

	.home-page .mood-slider {
		height: 30px;
	}

	.home-page .quick-log h2 {
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
	}

	.home-page .pill-subtitle {
		display: none;
	}

	.home-page .cards-row {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.home-page .snapshot-pills {
		display: grid;
		flex-direction: column;
		grid-template-columns: 2fr 2fr;
		gap: 1rem 0.75rem;
	}

	.home-page .snapshot-pill {
		width: 100%;
		margin: 0;
		gap: 0.5rem;
	}

	.days-recorded .mobiledisplayonly {
		background: #000 !important;
		color: #fff !important;
	}

	.calendar-container.card {
		min-height: 92vh;
		max-height: none;
		padding-bottom: 24px;
		background: var(--card-background);
		border-width: 4px !important;
		border-style: solid !important;
		border-color: #fff !important;
		box-sizing: border-box;
		overflow: visible !important;
	}

	.day-cell-date {
		font-size: clamp(0.75rem, 2.2vw, 0.9rem) !important;
	}

	.calendar-grid-container.summary-grid-container.sixmo,
	.calendar-grid-container.summary-grid-container.threemo,
	.calendar-grid-container.summary-grid-container.onemo {
		display: grid;
		min-height: auto;
		max-height: none;
		padding: 24px 12px;
		box-sizing: border-box;
		overflow-y: visible;
		gap: 12px;
		grid-auto-rows: min-content;
	}

	.summary-grid-container.onemo {
		grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
	}

	.summary-grid-container.threemo {
		grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
		gap: 16px;
	}

	.summary-grid-container.sixmo {
		grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
		gap: 8px;
	}

	.summary-grid-container .day-cell {
		margin: 0;
	}

	.summary-grid-container.threemo .day-cell {
		font-size: 0.8rem;
	}

	.summary-grid-container.sixmo .day-cell {
		font-size: 0.75rem;
	}

	.summary-month-label-row {
		margin: 24px 0 12px 0;
	}

	.summary-year-label-row {
		margin-top: 32px;
	}

	.hero-content {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.hero-text {
		align-items: center;
	}

	.hero-visual {
		margin-top: 2rem;
	}

	.hero-title {
		font-size: clamp(1.8rem, 6vw, 2.5rem);
	}

	.hero-description {
		font-size: 0.95rem;
	}

	.hero-statement {
		font-size: 1rem;
	}

	.insights-today .today-card-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		max-width: 100%;
		overflow-x: hidden;
	}

	.today-moodscore {
		width: 60%;
		max-width: 200px;
		margin: 0 auto;
	}

	.overview-stats {
		grid-template-columns: repeat(2, 1fr);
		max-width: 100%;
	}

	.distribution-bar {
		grid-template-columns: 70px 1fr 35px;
		max-width: 100%;
		gap: var(--spacing-sm);
	}

	.ai-insight-pill {
		width: 100%;
		padding: clamp(0.75rem, 1.5vh, 1rem) clamp(0.75rem, 1.5vw, 1rem);
		box-sizing: border-box;
	}

	.insights-grid .card {
		padding: clamp(0.75rem, 2vh, 1.5rem);
		max-width: 100%;
		overflow-x: hidden;
	}

	#insights-view {
		max-width: 100%;
		overflow-x: hidden;
	}

	.journal-indicator {
		width: 24%;
		height: 50%;
		font-size: 110%;
		margin-right: 0.5rem;
	}

	.goal-pill {
		height: 200%;
	}

	.tag-correlation {
		gap: 0px;
		scale: 95%;
	}

	.tag-name {
		scale: 95%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hero-content {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.hero-title {
		font-size: clamp(2rem, 5vw, 3rem);
	}

	.hero-description {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.hero-content {
		grid-template-columns: 1fr 1fr;
		gap: 6rem;
	}
}

@media (max-width: 560px) {
	.home-page .snapshot-pills {
		display: flex;
		width: 100%;
	}

	.overview-stats {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.distribution-bar {
		grid-template-columns: 60px 1fr 30px;
		gap: var(--spacing-sm);
		max-width: 100%;
	}

	.bar-label {
		font-size: clamp(0.7rem, 2vw, 0.8rem);
	}

	.goal-pill {
		height: 160px;
		padding: var(--spacing-sm);
	}
}