/* =============================================
   Auth loading / splash
   ============================================= */

.auth-loading {
	position: fixed;
	inset: 0;
	background: var(--color-surface-alt);
}

/* =============================================
   Auth page
   ============================================= */

.auth-page {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--page-padding);
	background: linear-gradient(160deg, var(--color-surface-alt) 0%, white 100%);

	.auth-card {
		width: 100%;
		max-width: 380px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-md);
		text-align: center;
	}

	.auth-logo {
		width: 80px;
		height: 80px;
		background: var(--color-primary-100);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary);
		margin-bottom: var(--spacing-sm);
	}

	.auth-title {
		font: var(--font-h3);
		color: var(--color-text);
	}

	.auth-subtitle {
		font: var(--font-body-large-regular);
		color: var(--color-text-light);
		max-width: 280px;
	}

	.auth-hint {
		font: var(--font-body-medium-regular);
		color: var(--color-text-light);
		max-width: 300px;
		line-height: 1.6;
	}

	.auth-actions {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		width: 100%;
		margin-top: var(--spacing-sm);
	}

	.auth-btn {
		width: 100%;
	}

	.auth-error {
		font: var(--font-body-small-regular);
		color: var(--color-error);
		background: color-mix(in oklch, var(--color-error) 8%, white);
		padding: 10px 14px;
		border-radius: var(--radius-small);
		width: 100%;
	}
}

/* =============================================
   Perenual Species Search
   ============================================= */

.species-search {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	position: relative;

	.species-search-input-wrap {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-input);
		padding: 0 14px;
		transition: border-color 0.2s;

		&:focus-within {
			border-color: var(--color-primary);
		}

		.search-icon {
			display: flex;
			align-items: center;
			color: var(--color-text-light);
			flex-shrink: 0;

			svg {
				width: 18px;
				height: 18px;
			}
		}

		.species-search-input {
			flex: 1;
			border: none;
			background: transparent;
			padding: 16px 0;
			font: var(--font-body-medium-semibold);
			color: var(--color-text);
			outline: none;

			&::placeholder {
				color: var(--color-placeholder);
			}

			&::-webkit-search-cancel-button {
				display: none;
			}
		}

		.search-clear-btn {
			background: none;
			border: none;
			padding: 4px;
			cursor: pointer;
			color: var(--color-text-light);
			display: flex;
			align-items: center;
			border-radius: 50%;
			transition: background 0.2s;
			flex-shrink: 0;

			svg {
				width: 16px;
				height: 16px;
			}

			&:hover {
				background: var(--grayscale-100);
				color: var(--color-text);
			}
		}
	}

	.species-results {
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		right: 0;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-medium);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		list-style: none;
		padding: var(--spacing-xs) 0;
		z-index: 200;
		max-height: 320px;
		overflow-y: auto;
	}

	.species-result {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		padding: 10px 14px;
		cursor: pointer;
		transition: background 0.15s;

		&:hover {
			background: var(--color-surface-alt);
		}

		.result-thumb {
			width: 40px;
			height: 40px;
			border-radius: var(--radius-small);
			object-fit: cover;
			flex-shrink: 0;
		}

		.result-thumb-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--color-surface-alt);
			font-size: 1.25rem;
		}

		.result-text {
			display: flex;
			flex-direction: column;
			gap: 1px;
			overflow: hidden;
		}

		.result-name {
			font: var(--font-body-medium-semibold);
			color: var(--color-text);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.result-species {
			font: var(--font-body-small-regular);
			color: var(--color-text-light);
			font-style: italic;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.species-result-empty {
		padding: 16px 14px;
		color: var(--color-text-light);
		font: var(--font-body-medium-regular);
	}

	.prefill-notice {
		font: var(--font-body-small-regular);
		color: var(--color-primary);
		background: var(--color-primary-100);
		padding: 8px 12px;
		border-radius: var(--radius-small);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-sm);

		.prefill-clear {
			background: none;
			border: none;
			color: var(--color-primary);
			font: var(--font-body-small-bold);
			cursor: pointer;
			padding: 0;
			text-decoration: underline;
			flex-shrink: 0;
		}
	}
}

@keyframes header-over-hero {
	from {
		background: transparent;
	}

	to {
		background: var(--color-primary);
	}
}

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

.spinner {
	animation: spin 0.8s linear infinite;
}

/* =============================================
   App Header
   ============================================= */

.app-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	border-bottom: var(--border-subtle);
	padding: 14px var(--page-padding);
	padding-top: calc(14px + env(safe-area-inset-top));
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	min-height: var(--app-header-h);

	&.overlay {
		background: transparent;
		border-bottom: none;
		animation: header-over-hero linear both;
		animation-timeline: --hero-timeline;
		animation-range: exit 0% exit 100%;

		.back-btn,
		.header-title,
		.icon-btn {
			color: white;
		}

		.icon-btn:hover {
			background: rgba(255, 255, 255, 0.15);
		}
	}

	.back-btn {
		background: none;
		border: none;
		padding: 8px;
		margin: -8px;
		border-radius: var(--radius-small);
		color: var(--color-primary);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: background 0.2s;

		&:hover {
			background: var(--color-primary-100);
		}

		svg {
			width: 22px;
			height: 22px;
		}
	}

	.header-title {
		flex: 1;
		font: var(--font-h6);
		color: var(--color-text);
		text-transform: capitalize;
	}

	.header-actions {
		display: flex;
		gap: var(--spacing-sm);
	}

	.icon-btn {
		background: none;
		border: none;
		padding: 8px;
		border-radius: var(--radius-small);
		color: var(--color-text-light);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s, color 0.2s;

		&:hover {
			background: var(--grayscale-100);
			color: var(--color-text);
		}

		&.danger:hover {
			background: color-mix(in oklch, var(--color-error) 8%, white);
			color: var(--color-error);
		}

		svg {
			width: 22px;
			height: 22px;
		}
	}
}

/* =============================================
   Home Page
   ============================================= */

home-page {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: color-mix(in oklch, var(--color-primary) 12%, white);

	.home-header {
		padding: calc(20px + env(safe-area-inset-top)) var(--page-padding) var(--spacing-lg);

		.home-header-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: var(--spacing-xs);

			.home-greeting {
				font: var(--font-body-large-regular);
				color: var(--color-text-light);
			}

			.icon-btn {
				width: 36px;
				height: 36px;
				border: none;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				color: var(--color-text);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				flex-shrink: 0;

				svg {
					width: 20px;
					height: 20px;
				}
			}
		}

		.home-title {
			font: var(--font-h4);
			color: var(--color-primary-dark);
		}

		.home-stats {
			margin-top: var(--spacing-md);

			.stats-pill {
				display: inline-flex;
				align-items: center;
				gap: var(--spacing-md);
				background: rgba(255, 255, 255, 0.65);
				border-radius: 999px;
				padding: 10px 18px;

				.stat {
					display: flex;
					align-items: center;
					gap: 6px;
					cursor: pointer;

					.stat-icon {
						width: 22px;
						height: 22px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;

						svg {
							width: 13px;
							height: 13px;
						}

						&.leaf {
							background: var(--color-primary-100);
							color: var(--color-primary);
						}

						&.warning {
							background: #fff0e0;
							color: #e07000;
						}
					}

					.stat-text {
						font: var(--font-body-medium-regular);
						color: var(--color-text);
					}
				}

				.stat-divider {
					width: 1px;
					height: 16px;
					background: var(--color-border);
				}
			}
		}
	}

	.home-body {
		flex: 1;
		padding: var(--page-padding);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.home-section {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

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

	.home-section-title {
		font: var(--font-h5);
		color: var(--color-primary-dark);
	}

	.add-plant-btn {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 6px 14px;
		border-radius: 999px;
		border: 1px solid var(--color-border);
		background: rgba(255, 255, 255, 0.7);
		font: var(--font-body-small-semibold);
		color: var(--color-text);
		cursor: pointer;

		svg {
			width: 14px;
			height: 14px;
		}

		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}

	.today-grid {
		display: flex;
		overflow-x: auto;
		gap: var(--spacing-md);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;

		.today-card {
			flex: 0 0 min(280px, calc(100vw - var(--page-padding) * 2));
			scroll-snap-align: start;
		}
	}

	.today-card {
		background: var(--color-surface);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-card);
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.today-card-body {
			padding: 14px 14px 10px;
			display: flex;
			flex-direction: column;
			gap: 3px;

			.today-card-header {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 2px;

				.today-icon {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;

					&.overdue svg {
						width: 26px;
						height: 26px;
					}

					&.water svg {
						width: 28px;
						height: 28px;
						color: #3b9fe8;
					}
				}

				.today-plant-name {
					font: var(--font-body-medium-bold);
					color: var(--color-text);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					text-transform: capitalize;
				}
			}

			.today-action-title {
				font: var(--font-body-large-bold);
				color: var(--color-text);
			}

			.today-desc {
				font: var(--font-body-small-regular);
				color: var(--color-text-light);
			}
		}

		.today-card-photo {
			flex: 1;
			min-height: 120px;
			position: relative;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(166deg, white 15%, transparent 80%);
				pointer-events: none;
			}
		}

		.today-card-actions {
			display: flex;
			gap: 8px;
			padding: 12px;

			.today-btn {
				flex: 1;
				padding: 11px 8px;
				border-radius: 999px;
				font: var(--font-body-small-semibold);
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;

				&.primary {
					background: var(--color-primary-dark);
					color: white;
					border: none;
				}

				&.secondary {
					background: transparent;
					border: 1.5px solid var(--grayscale-300);
					color: var(--color-text);
				}

				svg {
					width: 14px;
					height: 14px;
					flex-shrink: 0;
				}
			}
		}
	}

	.plants-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--spacing-md);
	}

	.add-fab {
		position: fixed;
		bottom: calc(24px + env(safe-area-inset-bottom));
		right: 24px;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--color-primary);
		color: white;
		border: none;
		cursor: pointer;
		box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s, box-shadow 0.2s;
		z-index: 50;

		svg {
			width: 28px;
			height: 28px;
		}

		&:hover {
			transform: scale(1.08);
			box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5);
		}

		&:active {
			transform: scale(0.95);
		}

		&:disabled {
			background: var(--color-text-light);
			box-shadow: none;
			cursor: not-allowed;
			opacity: 0.5;
		}
	}
}

/* =============================================
   Plant Card
   ============================================= */

.plant-card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-subtle);
	cursor: pointer;

	.plant-card-photo {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		background: var(--color-surface-alt);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;

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

		.plant-card-emoji {
			font-size: 2.5rem;
		}

		.sync-failed-badge {
			position: absolute;
			top: 6px;
			right: 6px;
			font-size: 1rem;
			line-height: 1;
		}
	}

	.plant-card-body {
		padding: 10px 12px 12px;
		display: flex;
		flex-direction: column;
		gap: 3px;
		flex: 1;
	}

	.plant-card-name {
		font: var(--font-body-medium-bold);
		color: var(--color-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-transform: capitalize;
	}

	.plant-card-location {
		font: var(--font-body-xsmall-regular);
		color: var(--color-text-light);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 2px;
	}

	.watering-badge {
		font: var(--font-body-xsmall-bold);
		padding: 3px 8px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		align-self: flex-start;

		svg {
			width: 10px;
			height: 10px;
			flex-shrink: 0;
		}

		&.overdue {
			background: color-mix(in oklch, var(--color-error) 10%, white);
			color: var(--color-error);
		}

		&.today {
			background: color-mix(in oklch, var(--color-warning) 12%, white);
			color: var(--color-warning);
		}

		&.upcoming {
			background: var(--color-primary-100);
			color: var(--color-primary);
		}

		&.unknown {
			background: var(--grayscale-100);
			color: var(--grayscale-600);
		}
	}

	.plant-card-actions {
		display: flex;
		gap: 6px;
		margin-top: 8px;

		.plant-btn {
			flex: 1;
			padding: 7px 4px;
			border-radius: 999px;
			border: 1px solid var(--grayscale-300);
			background: transparent;
			font: var(--font-body-xsmall-semibold);
			color: var(--color-text);
			cursor: pointer;
			transition: background 0.15s;

			&:hover {
				background: var(--grayscale-100);
			}
		}
	}
}

/* =============================================
   Plant Detail
   ============================================= */

plant-detail {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	timeline-scope: --hero-timeline;

	.detail-hero {
		width: 100%;
		aspect-ratio: 4/3;
		background: var(--color-surface-alt);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 6rem;
		overflow: hidden;
		position: relative;
		margin-top: calc(-1 * var(--app-header-h));
		view-timeline-name: --hero-timeline;
		view-timeline-axis: block;

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

		.hero-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 40%);
		}
	}

	.detail-body {
		flex: 1;
		padding: var(--page-padding);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
		background: var(--color-surface);
		border-radius: var(--radius-modal) var(--radius-modal) 0 0;
		margin-top: -20px;
		position: relative;
	}

	.detail-name-row {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.detail-name {
		font: var(--font-h4);
		color: var(--color-text);
		text-transform: capitalize;
	}

	.detail-nickname {
		font: var(--font-body-large-regular);
		color: var(--color-text-light);
	}

	.detail-species {
		font: var(--font-body-medium-regular);
		color: var(--color-text-light);
		font-style: italic;
	}

	.detail-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
	}

	.detail-tag {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 12px;
		background: var(--color-surface-alt);
		border-radius: var(--radius-button);
		font: var(--font-body-small-semibold);
		color: var(--color-text);
		border: var(--border-subtle);

		svg {
			width: 14px;
			height: 14px;
			color: var(--color-primary);
		}
	}

	.care-section {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);

		.care-title {
			font: var(--font-body-medium-bold);
			color: var(--color-text);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-size: 0.7rem;
			color: var(--color-text-light);
		}

		.care-card {
			background: var(--color-surface-alt);
			border-radius: var(--radius-medium);
			padding: var(--spacing-md);
			display: flex;
			align-items: center;
			gap: var(--spacing-md);

			.care-icon {
				width: 44px;
				height: 44px;
				border-radius: var(--radius-small);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				svg {
					width: 22px;
					height: 22px;
				}

				&.water {
					background: var(--color-water-bg);
					color: var(--color-water);
				}

				&.fertilize {
					background: var(--color-fertilize-bg);
					color: var(--color-fertilize);
				}
			}

			.care-info {
				flex: 1;

				.care-label {
					font: var(--font-body-small-medium);
					color: var(--color-text-light);
				}

				.care-status {
					font: var(--font-body-medium-semibold);
					color: var(--color-text);
					margin-top: 1px;
				}

				.care-next {
					font: var(--font-body-small-regular);
					color: var(--color-text-light);
					margin-top: 1px;
				}
			}

			.care-action {
				padding: 8px 14px;
				border-radius: var(--radius-button);
				font: var(--font-body-small-semibold);
				border: none;
				cursor: pointer;
				transition: all 0.2s;
				flex-shrink: 0;

				&.water {
					background: var(--color-water-bg);
					color: var(--color-water);

					&:hover {
						background: var(--color-water);
						color: white;
					}
				}

				&.fertilize {
					background: var(--color-fertilize-bg);
					color: var(--color-fertilize);

					&:hover {
						background: var(--color-fertilize);
						color: white;
					}
				}

				&.skip {
					background: var(--color-surface-alt);
					color: var(--color-text-light);

					&:hover {
						background: var(--color-border);
						color: var(--color-text);
					}
				}
			}

			.care-actions {
				display: flex;
				flex-direction: column;
				gap: 6px;
				flex-shrink: 0;
			}
		}
	}

	.journal-section {
		.care-title {
			font: var(--font-body-medium-bold);
			color: var(--color-text-light);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-size: 0.7rem;
			margin-bottom: var(--spacing-sm);
		}

		.journal-actions {
			display: flex;
			align-items: center;
			gap: var(--spacing-sm);
			margin-bottom: var(--spacing-md);
		}

		.journal-photo-btn {
			flex-shrink: 0;
			width: 44px;
			height: 44px;
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-input);
			background: var(--color-surface);
			font-size: 1.15rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;

			&:disabled {
				opacity: 0.4;
				cursor: default;
			}
		}

		.journal-input {
			flex: 1;
			display: flex;
			gap: var(--spacing-sm);
			margin-bottom: 0;

			input {
				flex: 1;
				padding: 10px 14px;
				border: 1.5px solid var(--color-border, #e5e7eb);
				border-radius: var(--radius-input);
				font: var(--font-body-medium-regular);
				background: var(--color-surface);
				color: var(--color-text);

				&:focus {
					outline: none;
					border-color: var(--color-primary);
				}

				&:disabled {
					opacity: 0.5;
				}
			}

			button {
				padding: 10px 16px;
				background: var(--color-primary);
				color: white;
				border: none;
				border-radius: var(--radius-input);
				font: var(--font-body-small-semibold);
				cursor: pointer;

				&:disabled {
					opacity: 0.4;
					cursor: default;
				}
			}
		}

		.journal-list {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.journal-entry {
			display: flex;
			align-items: flex-start;
			gap: var(--spacing-sm);
			padding: var(--spacing-sm) 0;
			border-bottom: 1px solid var(--color-border, #f0f0f0);

			&:last-child {
				border-bottom: none;
			}

			.journal-icon {
				font-size: 1.1rem;
				line-height: 1.4;
				flex-shrink: 0;
			}

			.journal-content {
				flex: 1;

				.journal-date {
					font: var(--font-body-small-regular);
					color: var(--color-text-light);
				}

				.journal-photo {
					display: block;
					width: 100%;
					max-width: 240px;
					border-radius: var(--radius-small);
					margin-top: 6px;
					object-fit: cover;
				}

				.journal-text {
					font: var(--font-body-medium-regular);
					color: var(--color-text);
					margin-top: 2px;
				}
			}

			.journal-delete {
				background: none;
				border: none;
				color: var(--color-text-light);
				font-size: 1.2rem;
				cursor: pointer;
				padding: 0 4px;
				line-height: 1;
				opacity: 0.5;

				&:hover {
					opacity: 1;
					color: var(--color-danger, #dc2626);
				}
			}
		}

		.journal-empty {
			font: var(--font-body-small-regular);
			color: var(--color-text-light);
			text-align: center;
			padding: var(--spacing-md) 0;
		}
	}

	.packet-accordion {
		border: 1.5px solid var(--color-border, #e5e7eb);
		border-radius: var(--radius-medium);
		overflow: hidden;

		.packet-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: var(--spacing-md);
			cursor: pointer;
			font: var(--font-body-small-bold);
			color: var(--color-text-light);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-size: 0.7rem;
			list-style: none;

			&::-webkit-details-marker {
				display: none;
			}

			&::after {
				content: "›";
				font-size: 1.1rem;
				line-height: 1;
				transition: transform 0.2s ease;
				display: inline-block;
			}
		}

		&[open] .packet-header::after {
			transform: rotate(90deg);
		}

		&::details-content {
			opacity: 0;
			transform: translateY(-4px);
			transition:
				opacity 0.2s ease,
				transform 0.2s ease,
				content-visibility 0.2s allow-discrete;
		}

		&[open]::details-content {
			opacity: 1;
			transform: translateY(0);
		}

		.germination-info {
			margin: 0 var(--spacing-md) var(--spacing-md);
		}
	}

	.sowing-months-strip {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 6px;

		.sowing-month-chip {
			padding: 6px 4px;
			border-radius: var(--radius-small, 8px);
			background: var(--color-surface-alt);
			color: var(--color-text-light);
			font: var(--font-body-small-semibold);
			text-align: center;
			font-size: 0.7rem;

			&.active {
				background: var(--color-primary);
				color: white;
			}
		}
	}

	.germination-section {
		.care-title {
			font: var(--font-body-medium-bold);
			color: var(--color-text-light);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-size: 0.7rem;
			margin-bottom: var(--spacing-sm);
		}

		.germination-info {
			background: var(--color-surface-alt);
			border-radius: var(--radius-medium);
			padding: var(--spacing-md);
			display: flex;
			flex-direction: column;
			gap: var(--spacing-sm);
		}

		.germination-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--spacing-sm);
		}

		.germination-label {
			font: var(--font-body-small-regular);
			color: var(--color-text-light);
		}

		.germination-value {
			font: var(--font-body-small-semibold);
			color: var(--color-text);
			text-align: right;

			&.germination-waiting {
				color: var(--color-text-light);
			}

			&.germination-window {
				color: var(--color-success, #3a7d44);
			}

			&.germination-late {
				color: var(--color-warning, #b45309);
			}

			&.germination-done {
				color: var(--color-success, #3a7d44);
			}
		}

		.germination-mark-btn {
			margin: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
			padding: 8px 16px;
			border: none;
			border-radius: var(--radius-medium);
			background: var(--color-success, #3a7d44);
			color: white;
			font: var(--font-body-small-semibold);
			cursor: pointer;
			width: calc(100% - var(--spacing-md) * 2);
		}
	}

	.detail-notes {
		.notes-title {
			font: var(--font-body-small-bold);
			color: var(--color-text-light);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			margin-bottom: var(--spacing-sm);
		}

		.notes-subtitle {
			font: var(--font-body-small-bold);
			color: var(--color-text);
			margin-top: var(--spacing-md);
			margin-bottom: 2px;

			&:first-of-type {
				margin-top: 0;
			}
		}

		.notes-text {
			font: var(--font-body-medium-regular);
			color: var(--color-text);
			white-space: pre-wrap;
			line-height: 1.6;
		}
	}
}

/* =============================================
   Plant Form
   ============================================= */

.plant-form-page {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: var(--color-surface);

	.form-body {
		flex: 1;
		padding: var(--page-padding);
		padding-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.form-section-title {
		font: var(--font-body-small-bold);
		color: var(--color-text-light);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: calc(-1 * var(--spacing-sm));
	}

	.photo-picker {
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: var(--radius-medium);
		border: 2px dashed var(--color-border);
		background: var(--color-surface-alt);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-sm);
		cursor: pointer;
		overflow: hidden;
		position: relative;
		transition: border-color 0.2s, background 0.2s;

		&:hover {
			border-color: var(--color-primary);
			background: var(--color-primary-100);
		}

		input[type="file"] {
			position: absolute;
			inset: 0;
			opacity: 0;
			cursor: pointer;
			width: 100%;
			height: 100%;
		}

		.photo-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--spacing-sm);
			pointer-events: none;

			svg {
				width: 40px;
				height: 40px;
				color: var(--color-text-light);
			}

			span {
				font: var(--font-body-medium-semibold);
				color: var(--color-text-light);
			}
		}

		img.photo-preview {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.photo-remove {
			position: absolute;
			top: 8px;
			right: 8px;
			background: rgba(0, 0, 0, 0.6);
			color: white;
			border: none;
			border-radius: 50%;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			z-index: 2;

			svg {
				width: 16px;
				height: 16px;
			}
		}
	}

	.fertilizing-field {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);

		.fertilizing-label {
			font: var(--font-body-small-bold);
			color: var(--color-text-light);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}
	}

	.mode-toggle {
		display: flex;
		background: var(--color-surface-alt);
		border-radius: var(--radius-input);
		padding: 4px;
		gap: 4px;

		.mode-btn {
			flex: 1;
			padding: 8px 12px;
			border: none;
			border-radius: calc(var(--radius-input) - 4px);
			background: transparent;
			color: var(--color-text-light);
			font: var(--font-body-small-semibold);
			cursor: pointer;
			transition: all 0.2s;

			&.active {
				background: var(--color-surface);
				color: var(--color-primary);
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
			}
		}
	}

	.form-section-label {
		font: var(--font-body-small-bold);
		color: var(--color-text-light);
	}

	.sowing-calendar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-top: var(--spacing-sm);

		.sowing-month {
			padding: 10px 4px;
			border: 1.5px solid var(--color-border, #e5e7eb);
			border-radius: var(--radius-small, 8px);
			background: transparent;
			color: var(--color-text-light);
			font: var(--font-body-small-semibold);
			cursor: pointer;
			transition: all 0.15s;
			text-align: center;

			&.active {
				background: var(--color-primary);
				border-color: var(--color-primary);
				color: white;
			}
		}
	}

	.segment-control {
		display: flex;
		background: var(--color-surface-alt);
		border-radius: var(--radius-input);
		padding: 4px;
		gap: 4px;

		.segment-option {
			flex: 1;
			display: flex;

			input[type="radio"] {
				display: none;
			}

			span {
				flex: 1;
				padding: 8px 12px;
				border-radius: calc(var(--radius-input) - 4px);
				background: transparent;
				color: var(--color-text-light);
				font: var(--font-body-small-semibold);
				cursor: pointer;
				transition: all 0.2s;
				text-align: center;
			}

			input:checked+span {
				background: var(--color-surface);
				color: var(--color-primary);
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
			}
		}
	}

	.form-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-md);
	}

	.form-actions {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		padding: var(--page-padding);
		padding-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
		background: var(--color-surface);
		border-top: var(--border-subtle);
	}
}

.calendar-page {
	display: flex;
	flex-direction: column;
	min-height: 100%;

	.cal-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
		padding: var(--page-padding);
		padding-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
	}

	.cal-section {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.cal-section-title {
		font: var(--font-body-large-bold);
		color: var(--color-text);
	}

	.cal-month-strip {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;

		&::-webkit-scrollbar {
			display: none;
		}

		.cal-month-btn {
			flex-shrink: 0;
			padding: 6px 12px;
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-button);
			background: transparent;
			color: var(--color-text-light);
			font: var(--font-body-small-semibold);
			cursor: pointer;
			transition: all 0.15s;

			&.active {
				background: var(--color-primary);
				border-color: var(--color-primary);
				color: white;
			}
		}
	}

	.cal-month-label {
		font: var(--font-body-medium-semibold);
		color: var(--color-text-light);
		margin-top: 2px;
	}

	.cal-plant-list {
		display: flex;
		flex-direction: column;
		gap: 2px;

		.cal-plant-row {
			display: flex;
			align-items: center;
			gap: var(--spacing-md);
			padding: 10px 12px;
			background: var(--color-surface);
			border: var(--border-subtle);
			border-radius: var(--radius-medium);
			cursor: pointer;

			.cal-plant-photo {
				width: 40px;
				height: 40px;
				border-radius: var(--radius-small);
				overflow: hidden;
				background: var(--color-surface-alt);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				font-size: 1.25rem;

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

			.cal-plant-info {
				flex: 1;
				min-width: 0;
				display: flex;
				flex-direction: column;
				gap: 2px;

				.cal-plant-name {
					font: var(--font-body-large-semibold);
					color: var(--color-text);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.cal-plant-meta {
					font: var(--font-body-small-regular);
					color: var(--color-text-light);
				}
			}

			.cal-sowed-badge {
				font: var(--font-body-small-semibold);
				color: var(--color-primary);
				background: var(--color-primary-100);
				padding: 3px 8px;
				border-radius: var(--radius-button);
				flex-shrink: 0;
			}
		}
	}

	.cal-empty {
		font: var(--font-body-medium-regular);
		color: var(--color-text-light);
		text-align: center;
		padding: var(--spacing-lg) 0;
	}

	.germination-tracker {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);

		.germ-entry {
			padding: 12px var(--spacing-md);
			background: var(--color-surface);
			border: var(--border-subtle);
			border-radius: var(--radius-medium);
			display: flex;
			flex-direction: column;
			gap: 6px;
			cursor: pointer;

			.germ-header {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				gap: var(--spacing-sm);

				.germ-name {
					font: var(--font-body-large-semibold);
					color: var(--color-text);
				}

				.germ-status {
					font: var(--font-body-small-semibold);
					flex-shrink: 0;

					&.waiting {
						color: var(--color-text-light);
					}

					&.window {
						color: var(--color-primary);
					}

					&.late {
						color: var(--color-warning);
					}

					&.sowed {
						color: var(--color-info);
					}
				}
			}

			.germ-bar-track {
				height: 6px;
				background: var(--color-surface-alt);
				border-radius: var(--radius-button);
				overflow: hidden;

				.germ-bar-fill {
					height: 100%;
					border-radius: var(--radius-button);
					transition: width 0.4s ease;

					&.waiting {
						background: var(--color-primary-200);
					}

					&.window {
						background: var(--color-primary);
					}

					&.late {
						background: var(--color-warning);
					}
				}
			}

			.germ-sown-date {
				font: var(--font-body-small-regular);
				color: var(--color-text-light);
			}
		}
	}
}