/**
 * Views Styles
 * Individual view styling for Photos, Tasks, Settings
 */

/* ==========================================
   PHOTOS VIEW - SWIPER SLIDESHOW
   ========================================== */

#view-photos {
	padding: 0;
	background: #000;
	overflow: hidden;
}

/* Swiper Container */
.photos-swiper-container {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
}

.photos-swiper {
	width: 100%;
	height: 100%;
	/* Superflow-lite: 3D perspective for drag tilt */
	perspective: 1200px;
	perspective-origin: center center;
	transform-style: preserve-3d;
}

.photos-swiper .swiper-wrapper {
	/* Enable 3D transforms on wrapper */
	transform-style: preserve-3d;
}

.photos-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	overflow: hidden;
	/* Superflow-lite: 3D rendering for slides */
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/* Photo Inner - Ken Burns Container (GSAP animates this, not img) */
.photo-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transform-origin: center;
	will-change: transform;
	/* Superflow-lite: Smooth 3D transitions */
	transform-style: preserve-3d;
}

.photo-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: opacity 0.3s ease;
}

/* Lazy loading preloader */
.swiper-lazy-preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	margin-left: -21px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #4ecdc4;
	border-radius: 50%;
	animation: swiper-preloader-spin 1s infinite linear;
}

@keyframes swiper-preloader-spin {
	100% {
		transform: rotate(360deg);
	}
}

.swiper-slide.lazy-loaded .swiper-lazy-preloader {
	display: none;
}

/* Ken Burns CSS Effect (fallback when no GSAP - animates wrapper) */
.photo-inner.ken-burns {
	transform: scale(1.0);
}

.photo-inner.ken-burns-active {
	animation: kenBurns 12s ease-out forwards;
}

@keyframes kenBurns {
	0% {
		transform: scale(1.0) translate(0, 0);
	}

	100% {
		transform: scale(1.15) translate(-2%, -1%);
	}
}

/* Alternative Ken Burns variations */
@keyframes kenBurns2 {
	0% {
		transform: scale(1.15) translate(-2%, -1%);
	}

	100% {
		transform: scale(1.0) translate(0, 0);
	}
}

@keyframes kenBurns3 {
	0% {
		transform: scale(1.0) translate(0, 0);
	}

	100% {
		transform: scale(1.12) translate(2%, 1%);
	}
}

/* Overlay - Controls Container */
.photos-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.photos-overlay.visible {
	opacity: 1;
}

.photos-overlay>* {
	pointer-events: auto;
}

/* Vignette Effect - GPU accelerated */
.photos-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
	will-change: opacity;
}

/* ==========================================
   PHOTOS HAMBURGER MENU & SLIDEOUT
   ========================================== */

/* Hamburger Menu Button */
.photos-menu-btn {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 48px;
	height: 48px;
	font-size: 24px;
	z-index: 15;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	border: none;
	border-radius: 12px;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photos-menu-btn:hover {
	background: rgba(0, 0, 0, 0.7);
	transform: scale(1.05);
}

/* Slideout Menu */
.photos-slideout-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 100%;
	background: rgba(20, 20, 30, 0.95);
	backdrop-filter: blur(20px);
	z-index: 100;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.photos-slideout-menu.open {
	transform: translateX(0);
}

.photos-menu-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.photos-menu-backdrop.visible {
	opacity: 1;
	pointer-events: auto;
}

.photos-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.photos-menu-header h3 {
	margin: 0;
	font-size: 18px;
	color: white;
	font-weight: 600;
}

.photos-menu-close {
	width: 36px;
	height: 36px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	transition: background 0.2s;
}

.photos-menu-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.photos-menu-content {
	flex: 1;
	overflow-y: auto;
	padding: 15px;
}

/* Album Items */
.photos-album-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: 8px;
}

.photos-album-item:hover {
	background: rgba(255, 255, 255, 0.1);
}

.photos-album-item.active {
	background: rgba(78, 205, 196, 0.2);
	border: 1px solid rgba(78, 205, 196, 0.4);
}

.photos-album-item .album-icon {
	font-size: 24px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.photos-album-item .album-name {
	flex: 1;
	color: white;
	font-size: 14px;
	font-weight: 500;
}

.photos-album-item .album-count {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	background: rgba(255, 255, 255, 0.1);
	padding: 2px 8px;
	border-radius: 10px;
}

.photos-menu-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 15px 0;
}

/* Menu Actions */
.photos-menu-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.photos-menu-action {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	border: none;
	background: rgba(255, 255, 255, 0.05);
	color: white;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
	text-align: left;
}

.photos-menu-action:hover {
	background: rgba(255, 255, 255, 0.15);
}

.photos-menu-action span:first-child {
	font-size: 18px;
	width: 24px;
	text-align: center;
}

/* Exit Button */
.photos-exit-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	font-size: 20px;
	z-index: 11;
}

/* Info Area - Caption & Counter */
.photos-info {
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	max-width: 80%;
}

.photo-caption {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	padding: 12px 24px;
	border-radius: 16px;
	margin-bottom: 8px;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.2s ease;
	/* Superflow-lite: GPU acceleration for parallax */
	will-change: transform;
	transform: translateZ(0);
}

.photo-caption.visible {
	opacity: 1;
}

.photo-title {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: white;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.photo-date {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.photo-counter {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	display: inline-block;
	/* Superflow-lite: GPU acceleration for parallax */
	will-change: transform;
	transform: translateZ(0);
	transition: transform 0.2s ease;
}

/* Controls Row */
.photos-controls {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	align-items: center;
}

/* Photo Buttons */
.photos-btn {
	width: 56px;
	height: 56px;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: 50%;
	font-size: 24px;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photos-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.1);
}

.photos-btn:active {
	transform: scale(0.95);
}

/* Prev/Next larger */
.photos-prev-btn,
.photos-next-btn {
	width: 50px;
	height: 50px;
	font-size: 28px;
}

/* Play button prominent */
.photos-play-btn {
	width: 64px;
	height: 64px;
	font-size: 28px;
	background: rgba(78, 205, 196, 0.4);
}

.photos-play-btn:hover {
	background: rgba(78, 205, 196, 0.6);
}

/* Shuffle button */
.photos-shuffle-btn {
	width: 44px;
	height: 44px;
	font-size: 18px;
}

.photos-shuffle-btn.active {
	background: rgba(78, 205, 196, 0.5);
	box-shadow: 0 0 12px rgba(78, 205, 196, 0.4);
}

/* Swiper Pagination */
.photos-swiper-container .swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 5;
}

.photos-swiper-container .swiper-pagination.visible {
	opacity: 1;
}

.swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: #4ecdc4;
}

/* Empty State */
.photos-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	padding: 40px;
}

.photos-empty-icon {
	font-size: 64px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.photos-empty h3 {
	font-size: 24px;
	margin-bottom: 8px;
}

.photos-empty p {
	font-size: 16px;
	opacity: 0.7;
}

/* Legacy support for upload/manage buttons */
.photos-upload-btn,
.photos-manage-btn {
	position: absolute;
	top: 20px;
	width: 48px;
	height: 48px;
	min-width: 48px;
	max-width: 48px;
	font-size: 20px;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
	z-index: 10;
	border-radius: 50%;
}

.photos-upload-btn {
	right: 80px;
}

.photos-manage-btn {
	right: 140px;
}

.photos-overlay.visible~.photos-upload-btn,
.photos-overlay.visible~.photos-manage-btn {
	opacity: 1;
}

/* ==========================================
   PHOTOS MODAL STYLES
   ========================================== */

.photos-modal-content {
	max-width: 700px;
	max-height: 90vh;
}

.photos-modal-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.photos-tab {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.photos-tab:hover {
	background: rgba(0, 0, 0, 0.08);
}

.photos-tab.active {
	background: linear-gradient(135deg, #4ecdc4 0%, #44b8b0 100%);
	color: white;
}

.photos-tab-content {
	display: none;
}

.photos-tab-content.active {
	display: block;
}

/* Gallery Tab */
.photos-gallery-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.photos-count {
	font-size: 14px;
	color: #64748b;
	font-weight: 500;
}

.photos-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	max-height: 400px;
	overflow-y: auto;
	padding: 4px;
}

.photo-grid-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-grid-item:hover {
	transform: scale(1.03);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

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

.photo-grid-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 8px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.photo-grid-item:hover .photo-grid-overlay {
	opacity: 1;
}

.photo-grid-title {
	font-size: 11px;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.photo-delete-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	background: rgba(239, 68, 68, 0.9);
	border-radius: 50%;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.photo-delete-btn:hover {
	transform: scale(1.1);
	background: rgba(220, 38, 38, 1);
}

.photos-empty-gallery {
	text-align: center;
	padding: 40px 20px;
	color: #94a3b8;
}

.photos-empty-gallery .empty-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 12px;
	opacity: 0.5;
}

.photos-empty-gallery p {
	margin: 4px 0;
}

.photos-empty-gallery .empty-hint {
	font-size: 13px;
	opacity: 0.7;
}

.photos-loading,
.photos-error {
	text-align: center;
	padding: 40px;
	color: #64748b;
}

/* Upload Tab */
.photos-upload-zone {
	border: 2px dashed rgba(78, 205, 196, 0.4);
	border-radius: 16px;
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background: rgba(78, 205, 196, 0.05);
}

.photos-upload-zone:hover,
.photos-upload-zone.dragover {
	border-color: #4ecdc4;
	background: rgba(78, 205, 196, 0.1);
}

.upload-zone-content .upload-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 12px;
}

.upload-zone-content h3 {
	font-size: 18px;
	color: #1e293b;
	margin-bottom: 4px;
}

.upload-zone-content p {
	color: #64748b;
	margin: 0;
}

.upload-zone-content .upload-hint {
	font-size: 12px;
	color: #94a3b8;
	margin-top: 12px;
}

.photos-upload-preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 12px;
	margin-top: 16px;
	max-height: 200px;
	overflow-y: auto;
}

.upload-preview-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.upload-preview-item .preview-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	padding: 4px 6px;
	font-size: 10px;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upload-preview-item .preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border: none;
	background: rgba(239, 68, 68, 0.9);
	border-radius: 50%;
	font-size: 14px;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photos-upload-actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	justify-content: flex-end;
}

/* Folder Tab */
.photos-folder-info {
	text-align: center;
	margin-bottom: 24px;
}

.photos-folder-info .folder-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 12px;
}

.photos-folder-info h3 {
	font-size: 18px;
	color: #1e293b;
	margin-bottom: 8px;
}

.photos-folder-info p {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.photos-folder-status {
	margin: 16px 0;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.photos-folder-status .status-success {
	color: #059669;
}

.photos-folder-status .status-error {
	color: #dc2626;
}

.photos-folder-status .status-info {
	color: #64748b;
}

/* ==========================================
   TASKS VIEW - SKYLIGHT CALENDAR STYLE
   ========================================== */

#view-tasks {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.tasks-content {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.tasks-skylight {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 20px;
}

/* Today Header */
.tasks-today-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.tasks-today-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.tasks-today-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tasks-today-day {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-dark);
}

.tasks-add-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: none;
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-radius: 30px;
	font-size: 15px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.tasks-add-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
}

.tasks-add-btn .add-icon {
	font-size: 20px;
	font-weight: 700;
}

/* Filter Bar */
.tasks-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.filter-members {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.filter-label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	margin-right: 4px;
}

.filter-member-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	position: relative;
}

.filter-member-btn:hover {
	background: rgba(255, 255, 255, 0.9);
}

.filter-member-btn.active {
	border-color: var(--member-color);
	background: color-mix(in srgb, var(--member-color) 15%, white);
}

.filter-member-btn.done .filter-name {
	text-decoration: line-through;
	opacity: 0.7;
}

.filter-member-btn .filter-check {
	font-size: 11px;
	color: #34d399;
	font-weight: 700;
}

.filter-emoji {
	font-size: 16px;
}

.filter-name {
	font-weight: 600;
	color: var(--text-dark);
}

.filter-options {
	display: flex;
	align-items: center;
	gap: 12px;
}

.auto-hide-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--text-medium);
}

.auto-hide-toggle input {
	width: 18px;
	height: 18px;
	accent-color: #4ecdc4;
	cursor: pointer;
}

.toggle-label {
	font-weight: 500;
}

/* Show completed button (in header) */
.show-completed-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: none;
	background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(78, 205, 196, 0.2));
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid rgba(52, 211, 153, 0.3);
}

.show-completed-btn:hover {
	background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(78, 205, 196, 0.3));
	transform: scale(1.05);
}

/* No members visible message */
.no-members-visible {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 20px;
	text-align: center;
	color: var(--text-medium);
	font-size: 16px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 24px;
}

.no-members-icon {
	font-size: 48px;
}

/* Family Grid - Skylight Style Columns */
.tasks-family-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	flex: 1;
	min-height: 0;
}

/* Member Column - Light tinted background per person */
.tasks-member-column {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, color-mix(in srgb, var(--member-color) 15%, white) 0%, color-mix(in srgb, var(--member-color) 8%, white) 100%);
	backdrop-filter: blur(20px);
	border-radius: 28px;
	border: 3px solid color-mix(in srgb, var(--member-color) 30%, white);
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tasks-member-column.all-done {
	border-color: var(--member-color);
	box-shadow: 0 0 30px color-mix(in srgb, var(--member-color) 40%, transparent), 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Member Header */
.member-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 16px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-color) 25%, white) 0%, color-mix(in srgb, var(--member-color) 15%, white) 100%);
	border-bottom: 2px solid color-mix(in srgb, var(--member-color) 20%, white);
	position: relative;
}

.member-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: 3px solid rgba(255, 255, 255, 0.8);
}

.member-emoji {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

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

.member-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-dark);
}

.member-progress-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-medium);
	opacity: 0.8;
}

.member-star {
	font-size: 28px;
	animation: starPulse 1s ease-in-out infinite;
}

@keyframes starPulse {

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

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

/* Progress Bar */
.member-progress-bar {
	height: 8px;
	background: color-mix(in srgb, var(--member-color) 15%, white);
	overflow: hidden;
	margin: 0;
}

.member-progress-fill {
	height: 100%;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 4px 4px 0;
	box-shadow: 0 0 10px color-mix(in srgb, var(--member-color) 50%, transparent);
}

/* Tasks List */
.member-tasks {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	background: color-mix(in srgb, var(--member-color) 5%, white);
}

/* Individual Task Card */
.task-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 16px;
	border: none;
	transition: all 0.2s ease;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.task-card:hover {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.task-card.completed {
	background: rgba(255, 255, 255, 0.5);
	opacity: 0.8;
}

.task-card.completed .task-name {
	text-decoration: line-through;
	color: var(--text-light);
}

.task-card.skipped {
	background: rgba(255, 200, 100, 0.2);
	border: 1px dashed rgba(200, 150, 50, 0.4);
}

.task-card.skipped .task-name {
	font-style: italic;
}

.task-skipped-badge {
	font-size: 10px;
	padding: 2px 6px;
	background: rgba(255, 180, 50, 0.3);
	color: #8b6914;
	border-radius: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.task-card.completing {
	animation: taskComplete 0.5s ease;
}

.task-card.uncompleting {
	animation: taskUncomplete 0.3s ease;
}

@keyframes taskComplete {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
		background: rgba(78, 205, 196, 0.3);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes taskUncomplete {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.97);
		background: rgba(255, 200, 100, 0.2);
	}

	100% {
		transform: scale(1);
	}
}

.task-card.deleting {
	animation: taskDelete 0.3s ease forwards;
}

@keyframes taskDelete {
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* Task Checkbox */
.task-check {
	width: 32px;
	height: 32px;
	border: 3px solid var(--check-color, #4ecdc4);
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: transparent;
	cursor: pointer;
	transition: all 0.25s ease;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-check:hover {
	background: color-mix(in srgb, var(--check-color, #4ecdc4) 15%, white);
	transform: scale(1.1);
}

.task-card.completed .task-check {
	background: var(--check-color, #4ecdc4);
	border-color: var(--check-color, #4ecdc4);
	color: white;
	box-shadow: 0 2px 12px color-mix(in srgb, var(--check-color) 40%, transparent);
}

/* Task Content */
.task-content {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.task-icon {
	font-size: 22px;
	flex-shrink: 0;
}

.task-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Task Menu Button */
.task-menu-btn {
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	border-radius: 50%;
	font-size: 16px;
	color: var(--text-light);
	cursor: pointer;
	opacity: 0;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.task-card:hover .task-menu-btn {
	opacity: 1;
}

.task-menu-btn:hover {
	background: rgba(0, 0, 0, 0.1);
	color: var(--text-dark);
}

/* Context Menu */
.task-context-menu {
	position: fixed;
	background: white;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	z-index: 1000;
	min-width: 120px;
}

.task-context-menu .menu-item {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: none;
	background: transparent;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.task-context-menu .menu-item:hover {
	background: rgba(78, 205, 196, 0.1);
}

/* No Tasks Message */
.no-tasks-today {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	text-align: center;
	color: var(--text-medium);
	font-size: 14px;
}

.no-tasks-icon {
	font-size: 32px;
	margin-bottom: 8px;
}

/* All Done Message */
.all-done-message {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(52, 211, 153, 0.2));
	border-radius: 12px;
	margin: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	animation: doneAppear 0.5s ease;
}

@keyframes doneAppear {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

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

.done-emoji {
	font-size: 20px;
}

/* Confetti Canvas */
#confetti-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	display: none;
}

/* Task Form Styles */
.task-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.task-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.task-form .form-label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.task-form .form-input {
	padding: 12px 16px;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	font-size: 15px;
	color: #1f2937;
	background: #ffffff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.task-form .form-input::placeholder {
	color: #9ca3af;
}

.task-form .form-input:focus {
	outline: none;
	border-color: #4ecdc4;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.task-form .form-hint {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

/* Icon Picker */
.icon-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.icon-option {
	width: 44px;
	height: 44px;
	border: 2px solid #e5e7eb;
	background: #ffffff;
	border-radius: 10px;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.icon-option:hover {
	background: rgba(78, 205, 196, 0.1);
	border-color: rgba(78, 205, 196, 0.4);
}

.icon-option.selected {
	background: rgba(78, 205, 196, 0.2);
	border-color: #4ecdc4;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

/* Assignee Picker */
.assignee-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.assignee-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 80px;
}

.assignee-option:hover {
	border-color: var(--member-color);
	background: color-mix(in srgb, var(--member-color) 10%, white);
}

.assignee-option.selected {
	border-color: var(--member-color);
	background: color-mix(in srgb, var(--member-color) 20%, white);
}

/* Multi-select assignee picker with checkboxes */
.assignee-picker.multi-select,
.assignee-picker.single-edit {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 12px;
}

.assignee-option-checkbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	border: 2px solid #e5e7eb;
	background: #ffffff;
	border-radius: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.assignee-option-checkbox input[type="checkbox"],
.assignee-option-checkbox input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.assignee-option-checkbox:hover {
	border-color: var(--member-color);
	background: color-mix(in srgb, var(--member-color) 8%, white);
}

.assignee-option-checkbox.selected {
	border-color: var(--member-color);
	background: color-mix(in srgb, var(--member-color) 15%, white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--member-color) 20%, transparent);
}

.assignee-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--member-color) 20%, white);
	overflow: hidden;
}

.assignee-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.assignee-option-checkbox .assignee-emoji {
	font-size: 28px;
	line-height: 1;
}

.assignee-option-checkbox .assignee-name {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	text-align: center;
}

.assignee-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	background: var(--member-color);
	color: white;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s ease;
}

.assignee-option-checkbox.selected .assignee-check {
	opacity: 1;
	transform: scale(1);
}

/* Recurrence Picker */
.recurrence-picker {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.recurrence-option {
	padding: 10px 18px;
	border: 2px solid #e5e7eb;
	background: #ffffff;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	transition: all 0.2s ease;
}

.recurrence-option:hover {
	border-color: #4ecdc4;
	background: rgba(78, 205, 196, 0.08);
}

.recurrence-option.selected {
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-color: transparent;
	color: white;
}

/* Form hint inline */
.form-hint-inline {
	font-weight: 400;
	font-size: 12px;
	color: #9ca3af;
	text-transform: none;
	letter-spacing: normal;
}

/* Hidden class for days group */
.form-group.hidden {
	display: none;
}

.assignee-emoji {
	font-size: 28px;
}

.assignee-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dark);
}

/* Schedule/Day Picker */
.schedule-picker {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.day-option {
	width: 50px;
	height: 50px;
	border: 2px solid #e5e7eb;
	background: #ffffff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all 0.2s ease;
}

.day-option:hover {
	background: rgba(78, 205, 196, 0.1);
	border-color: rgba(78, 205, 196, 0.4);
}

.day-option.selected {
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-color: transparent;
	color: white;
	box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
}

/* Form Actions */
.task-form .form-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 10px;
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 1200px) {
	.tasks-family-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.tasks-family-grid {
		grid-template-columns: 1fr;
	}

	.tasks-today-header {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
}

/* ==========================================
   SETTINGS VIEW
   ========================================== */

#view-settings {
	display: flex;
	flex-direction: column;
	height: 100%;
}



.settings-content {
	flex: 1;
	padding: 24px 32px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 800px;
}

.settings-section {
	background: linear-gradient(135deg, rgb(255 255 255 / 45%) 0%, rgb(235 235 235 / 80%) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.settings-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.settings-icon {
	font-size: 22px;
}

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

/* Toggle Switch */
.settings-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	cursor: pointer;
}

.settings-toggle input {
	display: none;
}

.settings-label {
	font-size: 15px;
	color: var(--text-dark);
}

.toggle-slider {
	width: 52px;
	height: 28px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 14px;
	position: relative;
	transition: all 0.3s ease;
}

.toggle-slider::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.settings-toggle input:checked+.toggle-slider {
	background: linear-gradient(135deg, #4ecdc4, #34d399);
}

.settings-toggle input:checked+.toggle-slider::after {
	left: 28px;
}

/* Select Rows */
.settings-select-row,
.settings-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	gap: 16px;
}

.settings-select,
.settings-input {
	padding: 10px 16px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	font-size: 14px;
	color: var(--text-dark);
	min-width: 160px;
}

.settings-select:focus,
.settings-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.7);
}

/* Family Members List */
.family-members-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.family-member-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 20px;
}

.family-member-emoji {
	font-size: 18px;
}

.family-member-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
}

.family-member-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

/* Buttons */
.settings-btn {
	padding: 12px 24px;
	border: none;
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
}

.settings-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.settings-btn-secondary {
	background: rgba(255, 255, 255, 0.3);
	color: var(--text-dark);
}

.settings-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: none;
}

/* Footer */
.settings-footer {
	text-align: center;
	padding: 24px 0;
	opacity: 0.6;
}

.settings-version {
	font-size: 18px;
	color: #000000;
}

.settings-credit {
	font-size: 18px;
	color: var(--text-light);
	margin-top: 4px;
	color: #000000;
}

/* ==========================================
   CALENDAR MANAGEMENT
   ========================================== */

.calendars-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.calendar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	gap: 12px;
}

.calendar-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.calendar-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	gap: 8px;
}

.calendar-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.calendar-url {
	font-size: 12px;
	color: var(--text-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 400px;
}

.remove-calendar-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255, 100, 100, 0.2);
	border-radius: 8px;
	font-size: 16px;
	color: #e74c3c;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.remove-calendar-btn:hover {
	background: rgba(255, 100, 100, 0.4);
	transform: scale(1.1);
}

/* Calendar item color indicator */
.calendar-item-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.calendar-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.calendar-item-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dark);
}

.calendar-item-url {
	font-size: 12px;
	color: var(--text-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar-item-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}

.calendar-toggle-btn,
.calendar-edit-btn,
.calendar-delete-btn {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.1);
}

.calendar-toggle-btn:hover,
.calendar-edit-btn:hover {
	background: rgba(0, 0, 0, 0.2);
}

.calendar-toggle-btn.enabled {
	background: rgba(78, 205, 196, 0.3);
	color: #2c8c85;
}

.calendar-delete-btn {
	background: rgba(255, 100, 100, 0.15);
	color: #e74c3c;
}

.calendar-delete-btn:hover {
	background: rgba(255, 100, 100, 0.3);
}

.calendar-item.disabled {
	opacity: 0.5;
}

.empty-list {
	padding: 16px;
	text-align: center;
	color: var(--text-medium);
	font-size: 14px;
}

/* Hidden event meta */
.hidden-event-meta {
	font-size: 12px;
	color: var(--text-medium);
}

.restore-event-btn {
	padding: 6px 12px;
	border: none;
	background: rgba(78, 205, 196, 0.3);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.restore-event-btn:hover {
	background: rgba(78, 205, 196, 0.5);
	transform: translateY(-1px);
}

/* Settings section description */
.settings-section-desc {
	font-size: 13px;
	color: var(--text-medium);
	margin-bottom: 12px;
}

/* Form hint text */
.form-hint {
	font-size: 12px;
	color: var(--text-medium);
	margin-top: 6px;
}

/* Color picker row */
.color-picker-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.form-color {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	background: transparent;
	padding: 0;
}

.form-color::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.form-color::-webkit-color-swatch {
	border: none;
	border-radius: 8px;
}

.color-preview {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Add Calendar Form */
.add-calendar-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	margin-top: 8px;
}

.add-calendar-form .form-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.add-calendar-form input[type="text"],
.add-calendar-form input[type="url"] {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	font-size: 14px;
	color: var(--text-dark);
}

.add-calendar-form input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.7);
}

.add-calendar-form input::placeholder {
	color: var(--text-light);
}

.add-calendar-form input[type="color"] {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	background: transparent;
	padding: 0;
}

.add-calendar-form input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.add-calendar-form input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 8px;
}

.add-calendar-btn {
	padding: 12px 24px;
	border: none;
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	align-self: flex-start;
}

.add-calendar-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

/* ==========================================
   HIDDEN EVENTS
   ========================================== */

.hidden-events-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
}

.hidden-event-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 10px;
	gap: 12px;
}

.hidden-event-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hidden-event-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hidden-event-date {
	font-size: 12px;
	color: var(--text-medium);
}

.restore-hidden-btn {
	padding: 6px 12px;
	border: none;
	background: rgba(78, 205, 196, 0.3);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.restore-hidden-btn:hover {
	background: rgba(78, 205, 196, 0.5);
	transform: translateY(-1px);
}

.empty-state {
	padding: 24px;
	text-align: center;
	color: var(--text-medium);
	font-size: 14px;
}

/* ==========================================
   SETTINGS ACTIONS
   ========================================== */

.settings-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ==========================================
   AUTOCOMPLETE HISTORY
   ========================================== */

.autocomplete-history-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	gap: 12px;
	transition: all 0.2s ease;
}

.autocomplete-history-card:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: translateX(2px);
}

.autocomplete-history-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.autocomplete-history-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.autocomplete-history-meta {
	font-size: 12px;
	color: var(--text-medium);
}

.delete-autocomplete-btn {
	padding: 6px 10px;
	border: none;
	background: rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #dc2626;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	line-height: 1;
}

.delete-autocomplete-btn:hover {
	background: rgba(239, 68, 68, 0.3);
	transform: scale(1.1);
}

#autocomplete-history-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
}

/* Responsive adjustments for settings */
@media (max-width: 600px) {
	.add-calendar-form .form-row {
		flex-direction: column;
	}

	.add-calendar-form input[type="color"] {
		width: 100%;
		height: 44px;
	}

	.calendar-url {
		max-width: 200px;
	}

	.calendar-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.remove-calendar-btn {
		align-self: flex-end;
	}
}

/* ==========================================
   FAMILY MEMBER EDITOR
   ========================================== */

/* Family Members List */
.family-members-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.family-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 16px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
}

.family-member-card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--member-color, var(--accent));
	transform: translateY(-2px);
}

.family-member-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	color: white;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

.family-member-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
}

.family-member-color {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.family-member-actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.edit-family-btn,
.delete-family-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.edit-family-btn:hover {
	background: rgba(78, 205, 196, 0.3);
}

.delete-family-btn:hover {
	background: rgba(239, 68, 68, 0.3);
}

.add-family-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	background: rgba(255, 255, 255, 0.03);
	border: 2px dashed rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text-medium);
	min-height: 150px;
}

.add-family-btn:hover {
	background: rgba(78, 205, 196, 0.1);
	border-color: var(--accent);
	color: var(--accent);
}

.add-family-btn .add-icon {
	font-size: 36px;
	line-height: 1;
}

.add-family-btn .add-text {
	font-size: 14px;
	font-weight: 500;
}

/* Family Member Modal Styles */
.family-modal-content {
	padding: 20px;
}

.family-member-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.family-member-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.family-member-form label {
	font-size: 14px;
	font-weight: 500;
	color: #475569;
}

.family-member-form input[type="text"] {
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.8);
	color: #1e293b;
	font-size: 16px;
	transition: all 0.2s ease;
}

.family-member-form input[type="text"]::placeholder {
	color: #94a3b8;
}

.family-member-form input[type="text"]:focus {
	outline: none;
	background: rgba(255, 255, 255, 1);
	border-color: #4ecdc4;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

/* Avatar Picker Tabs */
.avatar-picker-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 16px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.avatar-tab {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: transparent;
	color: #64748b;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.avatar-tab.active {
	background: linear-gradient(135deg, #4ecdc4 0%, #44b8b0 100%);
	color: white;
}

.avatar-tab:hover:not(.active) {
	background: rgba(0, 0, 0, 0.05);
	color: #334155;
}

/* Avatar Tab Content */
.avatar-tab-content {
	display: block;
}

.avatar-tab-content.hidden {
	display: none;
}

/* Avatar Picker Content */
.avatar-picker-content {
	max-height: 200px;
	overflow-y: auto;
	padding: 4px;
}

.emoji-picker,
.avatar-picker {
	display: grid;
}

.emoji-picker {
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
	max-height: 200px;
	overflow-y: auto;
	padding: 4px;
}

.emoji-option {
	width: 44px;
	height: 44px;
	border: 2px solid transparent;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.emoji-option:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.1);
}

.emoji-option.selected {
	border-color: var(--accent);
	background: rgba(78, 205, 196, 0.2);
}

.avatar-picker {
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	max-height: 200px;
	overflow-y: auto;
	padding: 4px;
}

.avatar-option {
	width: 56px;
	height: 56px;
	border: 3px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
}

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

.avatar-option:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.avatar-option.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.3);
}

/* Load More Avatars Button */
.load-more-avatars {
	width: 100%;
	padding: 12px;
	margin-top: 12px;
	border: 2px dashed rgba(255, 255, 255, 0.2);
	background: transparent;
	border-radius: 12px;
	color: var(--text-medium);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.load-more-avatars:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(78, 205, 196, 0.1);
}

/* Color Picker */
.color-picker {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.color-option {
	width: 36px;
	height: 36px;
	border: 3px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.color-option:hover {
	transform: scale(1.15);
}

.color-option.selected {
	border-color: white;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Member Preview */
.member-preview {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	margin-top: 8px;
}

.preview-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: white;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease;
}

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

.preview-info {
	flex: 1;
}

.preview-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-dark);
}

.preview-label {
	font-size: 12px;
	color: var(--text-medium);
	margin-top: 4px;
}

/* Form Actions */
.family-form-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 8px;
}

.family-form-actions button {
	padding: 12px 24px;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cancel-family-btn {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-medium);
}

.cancel-family-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.save-family-btn {
	background: var(--accent);
	color: white;
}

.save-family-btn:hover {
	background: #3dbdb0;
	transform: translateY(-2px);
}

/* Tasks View Avatar Images */
.member-avatar-img,
.filter-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.filter-avatar-img {
	width: 24px;
	height: 24px;
}

/* Responsive adjustments for family editor */
@media (max-width: 600px) {
	.family-members-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.emoji-picker {
		grid-template-columns: repeat(6, 1fr);
	}

	.avatar-picker {
		grid-template-columns: repeat(4, 1fr);
	}

	.color-picker {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ==========================================
   LIST VIEW - Shopping List Style
   ========================================== */

#view-list {
	padding: 24px;
	height: 100%;
	overflow: hidden;
}

.list-view-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 800px;
	margin: 0 auto;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 100%);
	border-radius: var(--radius-xl);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* List Tabs */
.list-tabs-container {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.list-tabs-container::-webkit-scrollbar {
	display: none;
}

.list-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
}

.list-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(120, 120, 120, 0.15);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-medium);
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	min-width: fit-content;
}

.list-tab:hover {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(78, 205, 196, 0.3);
	transform: translateY(-1px);
}

.list-tab.active {
	background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
	color: white;
	border-color: transparent;
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.list-tab-icon {
	font-size: 16px;
}

.list-tab-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.list-tab-count {
	font-size: 11px;
	padding: 2px 6px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	min-width: 20px;
	text-align: center;
}

.list-tab.active .list-tab-count {
	background: rgba(255, 255, 255, 0.2);
}

.list-add-tab-btn {
	width: 40px;
	height: 40px;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.5);
	border: 2px dashed rgba(78, 205, 196, 0.4);
	border-radius: 12px;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--primary-blue);
}

.list-add-tab-btn:hover {
	background: rgba(78, 205, 196, 0.15);
	border-color: var(--primary-blue);
	transform: scale(1.05);
}

.list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.list-title-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

.list-title {
	font-size: 24px;
	font-weight: 700;
	font-family: "Playfair Display", Georgia, serif;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	gap: 10px;
}

.list-title-icon {
	font-size: 28px;
}

.list-edit-title-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	opacity: 0.5;
}

.list-edit-title-btn:hover {
	background: rgba(78, 205, 196, 0.15);
	opacity: 1;
}

.list-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.list-delete-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 107, 107, 0.3);
	border-radius: 12px;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	opacity: 0.7;
}

.list-delete-btn:hover {
	background: rgba(255, 107, 107, 0.15);
	border-color: #ff6b6b;
	opacity: 1;
}

.list-clear-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: linear-gradient(135deg, #ff6b6b, #ef4444);
	color: white;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.list-clear-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.list-clear-btn:active {
	transform: translateY(0);
}

.list-input-container {
	display: flex;
	gap: 12px;
	padding: 16px 24px;
	background: rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.list-input-wrapper {
	flex: 1;
	position: relative;
}

.list-input {
	width: 100%;
	padding: 16px 20px;
	font-size: 18px;
	border: 2px solid rgba(120, 120, 120, 0.2);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.8);
	color: var(--text-dark);
	transition: all 0.2s ease;
	outline: none;
}

.list-input::placeholder {
	color: var(--text-light);
}

.list-input:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
}

/* Autocomplete Dropdown */
.list-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 16px;
	border: 1px solid rgba(120, 120, 120, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	max-height: 280px;
	overflow-y: auto;
	z-index: 100;
	display: none;
	backdrop-filter: blur(10px);
}

.list-autocomplete.active {
	display: block;
	animation: autocompleteSlideIn 0.2s ease;
}

@keyframes autocompleteSlideIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

.list-autocomplete-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: all 0.15s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.list-autocomplete-item:hover,
.list-autocomplete-item.selected {
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.12) 0%, rgba(167, 139, 250, 0.08) 100%);
}

.list-autocomplete-item-text {
	flex: 1;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-dark);
}

.list-autocomplete-item-text mark {
	background: rgba(78, 205, 196, 0.3);
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
}

.list-autocomplete-item-meta {
	font-size: 12px;
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: 4px;
}

.list-autocomplete-item-delete {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 14px;
	cursor: pointer;
	opacity: 0;
	transition: all 0.15s ease;
	color: var(--text-light);
}

.list-autocomplete-item:hover .list-autocomplete-item-delete {
	opacity: 0.6;
}

.list-autocomplete-item-delete:hover {
	opacity: 1 !important;
	background: rgba(255, 107, 107, 0.15);
	color: #ff6b6b;
}

.list-autocomplete-empty {
	padding: 20px;
	text-align: center;
	color: var(--text-light);
	font-size: 14px;
}

.list-autocomplete-header {
	padding: 10px 16px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-light);
	background: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Spell Check Suggestions */
.spell-suggestions-dropdown {
	display: none;
	position: fixed;
	z-index: 1000;
	background: white;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.08);
	overflow: hidden;
	max-width: 280px;
	animation: spellFadeIn 0.2s ease;
}

@keyframes spellFadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

.spell-header {
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-medium);
	background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.1));
	border-bottom: 1px solid rgba(255, 152, 0, 0.2);
	display: flex;
	align-items: center;
	gap: 6px;
}

.spell-icon {
	font-size: 14px;
}

.spell-suggestion-item {
	padding: 12px 14px;
	font-size: 15px;
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.15s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.spell-suggestion-item:last-of-type {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.spell-suggestion-item:hover {
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.12));
	color: #2e7d32;
	padding-left: 18px;
}

.spell-dismiss {
	padding: 10px 14px;
	font-size: 12px;
	color: var(--text-light);
	cursor: pointer;
	text-align: center;
	transition: all 0.15s ease;
	background: rgba(0, 0, 0, 0.02);
}

.spell-dismiss:hover {
	background: rgba(0, 0, 0, 0.05);
	color: var(--text-medium);
}

.list-add-btn {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
	color: white;
	border: none;
	border-radius: 16px;
	font-size: 24px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.list-add-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

.list-add-btn:active {
	transform: scale(0.95);
}

.list-items-container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}

/* Empty state */
.list-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	color: var(--text-medium);
}

.list-empty-icon {
	font-size: 64px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.list-empty p {
	font-size: 18px;
	margin: 4px 0;
}

.list-empty-hint {
	font-size: 14px !important;
	color: var(--text-light);
}

/* List items */
.list-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 8px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
	border-radius: 16px;
	border: 1px solid rgba(120, 120, 120, 0.15);
	transition: all 0.3s ease;
	cursor: default;
	position: relative;
	overflow: hidden;
}

.list-item::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 60px;
	background: linear-gradient(90deg, transparent, #ff6b6b);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.list-item:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(78, 205, 196, 0.1) 100%);
	border-color: rgba(78, 205, 196, 0.3);
	transform: translateX(0);
}

.list-item.completed {
	background: rgba(200, 200, 200, 0.2);
	opacity: 0.7;
}

.list-item.completed .list-item-text {
	text-decoration: line-through;
	color: var(--text-light);
}

.list-item.completed .list-item-check {
	background: linear-gradient(135deg, var(--primary-green), #10b981);
	border-color: transparent;
}

.list-item.completed .list-item-check .check-icon {
	color: white;
}

/* Check button */
.list-item-check {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	border: 2px solid rgba(120, 120, 120, 0.3);
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.list-item-check:hover {
	border-color: var(--primary-green);
	background: rgba(52, 211, 153, 0.1);
}

.list-item-check .check-icon {
	font-size: 16px;
	font-weight: 700;
	color: white;
}

/* Item text */
.list-item-text {
	flex: 1;
	font-size: 18px;
	font-weight: 500;
	color: var(--text-dark);
	line-height: 1.4;
}

/* Delete button */
.list-item-delete {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--text-light);
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	opacity: 0.5;
}

.list-item-delete:hover {
	background: rgba(255, 107, 107, 0.15);
	color: #ff6b6b;
	opacity: 1;
}

/* Completed divider */
.list-completed-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	margin: 8px 0;
	color: var(--text-light);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.list-completed-divider::before,
.list-completed-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(120, 120, 120, 0.3), transparent);
}

/* Footer */
.list-footer {
	padding: 12px 24px;
	background: rgba(255, 255, 255, 0.3);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	text-align: center;
}

.list-count {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-medium);
}

/* Animations */
.list-item.item-added {
	animation: itemSlideIn 0.3s ease;
}

@keyframes itemSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

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

.list-item.item-toggling {
	animation: itemToggle 0.3s ease;
}

@keyframes itemToggle {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.02);
	}

	100% {
		transform: scale(1);
	}
}

/* Rename List Modal Input */
.list-rename-input {
	width: 100%;
	padding: 14px 16px;
	font-size: 18px;
	border: 2px solid rgba(120, 120, 120, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--text-dark);
	transition: all 0.2s ease;
	outline: none;
	margin-bottom: 16px;
}

.list-rename-input:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
}

/* Icon Picker for List */
.list-icon-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 12px;
	max-height: 150px;
	overflow-y: auto;
}

.list-icon-option {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.list-icon-option:hover {
	background: rgba(78, 205, 196, 0.15);
	transform: scale(1.1);
}

.list-icon-option.selected {
	border-color: var(--primary-blue);
	background: rgba(78, 205, 196, 0.2);
}

/* Responsive */
@media (max-width: 600px) {
	#view-list {
		padding: 12px;
	}

	.list-tabs-container {
		padding: 8px 12px;
	}

	.list-tab {
		padding: 8px 12px;
		font-size: 13px;
	}

	.list-add-tab-btn {
		width: 36px;
		height: 36px;
		min-width: 36px;
	}

	.list-header {
		padding: 12px 16px;
		flex-direction: column;
		gap: 12px;
	}

	.list-title-container {
		width: 100%;
		justify-content: center;
	}

	.list-title {
		font-size: 20px;
	}

	.list-header-actions {
		width: 100%;
		justify-content: center;
	}

	.list-clear-btn {
		flex: 1;
		justify-content: center;
	}

	.list-input-container {
		padding: 12px 16px;
	}

	.list-input {
		font-size: 16px;
		padding: 14px 16px;
	}

	.list-autocomplete {
		font-size: 15px;
	}

	.list-autocomplete-item {
		padding: 12px 14px;
	}

	.list-autocomplete-item-text {
		font-size: 15px;
	}

	.list-autocomplete-item-meta {
		font-size: 11px;
	}

	.list-add-btn {
		width: 50px;
		height: 50px;
	}

	.list-item {
		padding: 14px 16px;
	}

	.list-item-text {
		font-size: 16px;
	}
}

/* ==========================================
   WEATHER VIEW
   ========================================== */

#view-weather {
	padding: 0;
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.weather-content {
	height: 100%;
	padding: 16px;
	overflow-y: auto;
}

.weather-view-layout {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Weather Header with Search */
.weather-header {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.weather-location-display {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 600;
	color: var(--text-dark);
}

.location-icon {
	font-size: 28px;
}

.weather-search-container {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	max-width: 500px;
	position: relative;
}

.weather-search-input {
	flex: 1;
	padding: 12px 20px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	font-size: 15px;
	color: var(--text-dark);
	transition: all 0.2s ease;
}

.weather-search-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.weather-search-input::placeholder {
	color: var(--text-light);
}

.weather-home-btn {
	padding: 12px 16px;
	border: none;
	background: rgba(78, 205, 196, 0.3);
	border-radius: 12px;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1;
}

.weather-home-btn:hover {
	background: rgba(78, 205, 196, 0.5);
	transform: translateY(-2px);
}

.weather-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 60px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	display: none;
	z-index: 100;
	animation: dropdownSlideIn 0.2s ease;
}

.weather-search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.weather-search-result-item:last-child {
	border-bottom: none;
}

.weather-search-result-item:hover {
	background: rgba(78, 205, 196, 0.2);
}

.search-result-icon {
	font-size: 18px;
}

.search-result-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.search-result-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
}

.search-result-location {
	font-size: 12px;
	color: var(--text-medium);
}

.weather-search-empty {
	padding: 16px;
	text-align: center;
	color: var(--text-medium);
	font-size: 14px;
}

/* Main Weather Container */
.weather-main-container {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 16px;
	max-height: 450px;
}

/* Current Weather Card */
.weather-current-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

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

.weather-current-header h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-dark);
	margin: 0;
}

.weather-last-updated {
	font-size: 12px;
	color: var(--text-medium);
}

.weather-current-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.weather-current-primary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 16px;
}

.weather-current-temp {
	font-size: 64px;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1;
}

.weather-current-icon {
	width: 130px;
	height: 80px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.weather-video-icon {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	pointer-events: none;
}

.weather-current-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.weather-detail-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 12px;
}

.weather-detail-label {
	font-size: 12px;
	color: var(--text-medium);
	font-weight: 500;
}

.weather-detail-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
}

/* Weather Map Card */
.weather-map-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.weather-map-header h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-dark);
	margin: 0;
}

.weather-map-controls {
	display: flex;
	gap: 8px;
}

.weather-layer-btn {
	padding: 8px 12px;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1;
}

.weather-layer-btn:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
}

.weather-layer-btn.active {
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.windy-map-container {
	width: 100%;
	height: 360px;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
}

/* Forecast Section */
.weather-forecast-container {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.weather-forecast-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.weather-forecast-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-dark);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.forecast-toggle-buttons {
	display: flex;
	gap: 8px;
}

.forecast-toggle-btn {
	padding: 8px 16px;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.2s ease;
}

.forecast-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
}

.forecast-toggle-btn.active {
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	color: white;
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.weather-forecast-title span {
	font-size: 24px;
}

.weather-forecast-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.2s ease,
		transform 0.2s ease;
	width: 100%;
	opacity: 1;
	transform: scale(1);
}

/* When showing 7 days, span full width */
.weather-forecast-grid.seven-day {
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
}

.forecast-day-card {
	background: rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	transform: scale(1);
}

.forecast-day-card:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.forecast-day-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	text-transform: uppercase;
}

.forecast-day-icon {
	width: 130px;
	height: 80px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
}

.forecast-day-temps {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
}

.forecast-high {
	color: var(--text-dark);
}

.forecast-low {
	color: var(--text-medium);
}

.forecast-day-condition {
	font-size: 13px;
	color: var(--text-medium);
	font-weight: 500;
}

.forecast-day-precip {
	font-size: 12px;
	color: var(--text-medium);
}

.forecast-loading {
	padding: 40px;
	text-align: center;
	color: var(--text-medium);
}

/* Weather Alerts */
.weather-alerts-container {
	background: linear-gradient(135deg, rgba(255, 200, 100, 0.3) 0%, rgba(255, 150, 100, 0.2) 100%);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 24px;
	border: 2px solid rgba(255, 150, 0, 0.4);
}

.weather-alerts-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.weather-alerts-header h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-dark);
	margin: 0;
}

.alert-icon {
	font-size: 28px;
}

.weather-alerts-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.weather-alert-item {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	padding: 16px;
	border-left: 4px solid;
}

.weather-alert-item.alert-severe {
	border-left-color: #dc2626;
	background: rgba(220, 38, 38, 0.1);
}

.weather-alert-item.alert-moderate {
	border-left-color: #f59e0b;
	background: rgba(245, 158, 11, 0.1);
}

.weather-alert-item.alert-minor {
	border-left-color: #3b82f6;
	background: rgba(59, 130, 246, 0.1);
}

.weather-alert-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.weather-alert-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
}

.weather-alert-time {
	font-size: 12px;
	color: var(--text-medium);
	font-weight: 500;
}

.weather-alert-description {
	font-size: 14px;
	color: var(--text-dark);
	line-height: 1.5;
	margin-bottom: 8px;
}

.weather-alert-source {
	font-size: 12px;
	color: var(--text-medium);
	font-style: italic;
}

/* Weather Alert Modal */
.weather-alert-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.weather-alert-modal.active {
	opacity: 1;
}

.weather-alert-modal-content {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
	backdrop-filter: blur(20px);
	border-radius: 24px;
	padding: 32px;
	max-width: 500px;
	width: 100%;
	border: 2px solid rgba(255, 150, 0, 0.5);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: scale(0.9);
	transition: transform 0.3s ease;
	text-align: center;
}

.weather-alert-modal.active .weather-alert-modal-content {
	transform: scale(1);
}

.weather-alert-modal-icon {
	font-size: 64px;
	margin-bottom: 16px;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

	50% {
		transform: scale(1.1);
	}
}

.weather-alert-modal-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-dark);
	margin: 0 0 16px 0;
}

.weather-alert-modal-description {
	font-size: 16px;
	color: var(--text-dark);
	line-height: 1.6;
	margin: 0 0 16px 0;
}

.weather-alert-modal-time {
	font-size: 14px;
	color: var(--text-medium);
	font-weight: 500;
	margin-bottom: 24px;
}

.weather-alert-modal-btn {
	padding: 14px 32px;
	border: none;
	background: linear-gradient(135deg, #4ecdc4, #34d399);
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
}

.weather-alert-modal-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.weather-main-container {
		grid-template-columns: 1fr;
	}

	.weather-current-card {
		order: -1;
	}
}

@media (max-width: 768px) {
	.weather-content {
		padding: 16px;
	}

	.weather-view-layout {
		gap: 16px;
	}

	.weather-header {
		flex-direction: column;
		align-items: stretch;
	}

	.weather-search-container {
		max-width: none;
	}

	.weather-location-display {
		font-size: 18px;
	}

	.location-icon {
		font-size: 24px;
	}

	.weather-current-temp {
		font-size: 48px;
	}

	.weather-current-icon {
		font-size: 60px;
	}

	.weather-current-details {
		grid-template-columns: 1fr;
	}

	.windy-map-container {
		height: 350px;
	}

	.weather-forecast-grid {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
		gap: 12px;
	}

	.forecast-day-card {
		padding: 12px;
	}

	.forecast-day-icon {
		font-size: 36px;
	}

	.weather-alert-modal-content {
		padding: 24px;
	}

	.weather-alert-modal-icon {
		font-size: 48px;
	}

	.weather-alert-modal-title {
		font-size: 20px;
	}

	.weather-alert-modal-description {
		font-size: 14px;
	}
}

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

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

/* ==========================================
   YEAR-AT-A-GLANCE VIEW
   ========================================== */

#view-year {
	padding: 0;
	overflow: hidden;
	/* NO SCROLLING */
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.03) 0%, rgba(85, 98, 112, 0.05) 100%);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.year-view-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px;
	overflow: hidden;
}

/* Year Header */
.year-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.year-nav-btn {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px);
	border: 2px solid rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 16px;
}

.year-nav-btn:hover {
	background: rgba(255, 255, 255, 0.95);
	transform: scale(1.1);
	border-color: rgba(78, 205, 196, 0.3);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.year-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0;
	background: linear-gradient(135deg, #4ECDC4 0%, #556270 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Category Filters */
.category-filters {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.filter-btn {
	padding: 6px 12px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #666;
}

.filter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.filter-btn.active {
	background: var(--filter-color);
	color: white;
	border-color: var(--filter-color);
}

.filter-emoji {
	font-size: 14px;
}

.filter-label {
	font-size: 12px;
}

/* Countdowns Section */
.countdowns-section {
	margin-bottom: 16px;
	flex-shrink: 0;
}

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

.countdowns-header h2 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: #333;
}

.add-countdown-btn {
	background: rgba(78, 205, 196, 0.9);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.add-countdown-btn:hover {
	background: rgba(78, 205, 196, 1);
	transform: translateY(-2px);
}

.countdowns-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

/* Banner Countdown Widget - Wide Thin Banner (4:1 Aspect Ratio) */
.countdown-banner-widget {
	/* Custom property defaults */
	--countdown-color: #4ECDC4;
	--countdown-text-color: rgba(255, 255, 255, 0.98);
	--countdown-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--countdown-title-size: 32px;
	--countdown-days-size: 64px;
	--countdown-overlay-opacity: 0.3;
	--countdown-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	--countdown-border-style: solid;
	--countdown-border-width: 2px;
	--countdown-border-color: rgba(255, 255, 255, 0.3);
	--countdown-border-radius: 16px;
	--countdown-bg-color: transparent;

	position: relative;
	background: var(--countdown-bg-color, linear-gradient(135deg, var(--countdown-color)15, var(--countdown-color)30));
	background-size: cover;
	background-position: center;
	border-radius: var(--countdown-border-radius);
	border-style: var(--countdown-border-style);
	border-width: var(--countdown-border-width);
	border-color: var(--countdown-border-color);
	overflow: visible;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	animation: fadeInScale 0.4s ease-out;
	width: 100%;
	max-width: 850px;
	aspect-ratio: 5 / 1;
	min-height: 140px;
	max-height: 200px;
	font-family: var(--countdown-font);
	color: var(--countdown-text-color);
}

.countdown-banner-inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}

.countdown-banner-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
}

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

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

.countdown-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, calc(var(--countdown-overlay-opacity) + 0.1)), rgba(0, 0, 0, var(--countdown-overlay-opacity)));
	z-index: 1;
}

.countdown-banner-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
	gap: 32px;
}

.countdown-banner-left {
	flex: 0 0 auto;
}

.countdown-days-display {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.countdown-days-number {
	font-size: var(--countdown-days-size);
	font-weight: 900;
	line-height: 1;
	color: var(--countdown-text-color);
	text-shadow: var(--countdown-text-shadow);
	font-family: var(--countdown-font);
	letter-spacing: -2px;
}

.countdown-days-text {
	font-size: 18px;
	font-weight: 600;
	color: var(--countdown-text-color);
	text-shadow: var(--countdown-text-shadow);
	white-space: nowrap;
	opacity: 0.9;
}

.countdown-banner-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.countdown-banner-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.countdown-banner-left {
	flex: 0 0 auto;
}

.countdown-days-display {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.countdown-days-number {
	font-size: var(--countdown-days-size);
	font-weight: 900;
	line-height: 1;
	color: var(--countdown-text-color);
	text-shadow: var(--countdown-text-shadow);
	font-family: var(--countdown-font);
	letter-spacing: -2px;
}

.countdown-days-text {
	font-size: 18px;
	font-weight: 600;
	color: var(--countdown-text-color);
	text-shadow: var(--countdown-text-shadow);
	white-space: nowrap;
	opacity: 0.9;
}

.countdown-banner-icon {
	font-size: 48px;
	flex-shrink: 0;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.countdown-banner-text {
	flex: 1;
	min-width: 0;
}

.countdown-banner-title {
	font-size: var(--countdown-title-size);
	font-weight: 800;
	margin: 0 0 4px 0;
	color: var(--countdown-text-color);
	text-shadow: var(--countdown-text-shadow);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.1;
	font-family: var(--countdown-font);
}

.countdown-banner-date {
	font-size: 15px;
	color: var(--countdown-text-color);
	margin: 0;
	font-weight: 600;
	text-shadow: var(--countdown-text-shadow);
	opacity: 0.85;
}

.flip-clock-wrapper {
	margin: 0 auto;
}

.flip-clock-wrapper ul {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 8px !important;
}

.flip-clock-wrapper .inn {
	background: rgba(255, 255, 255, 0.95) !important;
	color: #333 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.flip-clock-divider .flip-clock-label {
	color: rgba(0, 0, 0, 0.7) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	font-size: 11px !important;
}

.countdown-banner-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}

/* Countdown Section Wrapper */
.countdown-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto 20px auto;
	padding: 0 70px;
}

/* Countdown Navigation Buttons */
.countdown-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	border-radius: 50%;
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.countdown-nav-btn:hover {
	background: rgba(0, 0, 0, 0.6);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.countdown-nav-btn:active {
	transform: translateY(-50%) scale(0.95);
}

.countdown-prev-btn {
	left: 10px;
}

.countdown-next-btn {
	right: 10px;
}

.countdown-menu-toggle {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	color: rgba(255, 255, 255, 0.95);
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.countdown-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	transform: scale(1.05);
	color: white;
}

.countdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	z-index: 1500;
	min-width: 200px;
	animation: menuSlideDown 0.2s ease-out;
}

/* Floating menu portal - rendered to body */
.countdown-floating-menu {
	background: white;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	min-width: 200px;
	animation: menuSlideDown 0.2s ease-out;
}

@keyframes menuSlideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

.countdown-menu.hidden {
	display: none;
}

.countdown-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border: none;
	background: white;
	color: rgba(0, 0, 0, 0.8);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.countdown-menu-item:last-child {
	border-bottom: none;
}

.countdown-menu-item:hover {
	background: rgba(78, 205, 196, 0.1);
	color: rgba(0, 0, 0, 0.9);
}

.countdown-menu-item.danger:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.countdown-menu-item span {
	font-size: 16px;
}

.countdown-featured-footer {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
	flex-wrap: wrap;
}

.countdown-cycle-btn,
.countdown-theme-btn,
.countdown-add-btn {
	background: rgba(255, 255, 255, 0.9);
	color: rgba(0, 0, 0, 0.7);
	border: 2px solid rgba(0, 0, 0, 0.1);
	padding: 8px 16px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.countdown-cycle-btn:hover,
.countdown-theme-btn:hover,
.countdown-add-btn:hover {
	background: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.countdown-add-btn {
	background: rgba(78, 205, 196, 0.9);
	color: white;
	border-color: rgba(78, 205, 196, 1);
}

.countdown-add-btn:hover {
	background: rgba(78, 205, 196, 1);
}

/* Old countdown cards - remove if not used elsewhere */
.countdowns-section {
	margin-bottom: 16px;
	flex-shrink: 0;
}

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

.countdowns-header h2 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: #333;
}

.add-countdown-btn {
	background: rgba(78, 205, 196, 0.9);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.add-countdown-btn:hover {
	background: rgba(78, 205, 196, 1);
	transform: translateY(-2px);
}

.countdowns-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.countdown-card {
	position: relative;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	border: 2px solid rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
}

.countdown-card.auto-countdown {
	border-style: dashed;
}

.countdown-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.countdown-icon {
	font-size: 28px;
	flex-shrink: 0;
}

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

.countdown-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 2px 0;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.auto-badge {
	font-size: 10px;
	padding: 2px 6px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-weight: 500;
}

.countdown-date {
	font-size: 11px;
	color: #666;
	margin: 0;
}

.countdown-days {
	text-align: right;
	flex-shrink: 0;
}

.days-number {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: #333;
}

.days-label {
	display: block;
	font-size: 10px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.countdown-delete {
	position: absolute;
	top: 6px;
	right: 6px;
	background: rgba(0, 0, 0, 0.1);
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #666;
	cursor: pointer;
	opacity: 0;
	transition: all 0.2s ease;
}

.countdown-card:hover .countdown-delete {
	opacity: 1;
}

.countdown-delete:hover {
	background: rgba(239, 68, 68, 0.9);
	color: white;
}

/* Month Grid - FITS VIEWPORT */
.month-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 12px;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.month-card {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(20px);
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	position: relative;
	min-height: 200px;
	max-height: 280px;
}

.month-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #4ECDC4, #556270);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.month-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(78, 205, 196, 0.2);
	border-color: rgba(78, 205, 196, 0.4);
}

.month-card:hover::before {
	opacity: 1;
}

.month-card.current-month {
	border-color: rgba(78, 205, 196, 0.6);
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.15);
}

.month-card.current-month::before {
	opacity: 1;
}

.month-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.month-name {
	font-size: 15px;
	font-weight: 800;
	margin: 0;
	color: #1a1a1a;
	letter-spacing: -0.3px;
}

.current-indicator {
	color: #10b981;
	font-size: 10px;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.month-events-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 2px 0;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 200px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.month-events-list::-webkit-scrollbar {
	width: 6px;
}

.month-events-list::-webkit-scrollbar-track {
	background: transparent;
}

.month-events-list::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.month-events-list::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

.month-event-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: var(--pill-color);
	opacity: 0.85;
	border-radius: 16px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 9px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
	min-height: 22px;
}

.month-event-pill:hover {
	opacity: 1;
	transform: translateX(4px) scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.pill-emoji {
	font-size: 12px;
	flex-shrink: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.pill-title {
	flex: 1;
	color: rgba(255, 255, 255, 1);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	font-size: 9px;
	letter-spacing: -0.1px;
}

.pill-days {
	font-weight: 800;
	color: rgba(255, 255, 255, 1);
	font-size: 8px;
	padding: 2px 5px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	flex-shrink: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


.no-events {
	color: rgba(0, 0, 0, 0.4);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	padding: 16px 8px;
	font-style: italic;
}

.month-event-more {
	color: rgba(0, 0, 0, 0.5);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 6px 8px;
	margin-top: 4px;
}

.month-event-item {
	display: grid;
	grid-template-columns: 24px 20px 1fr;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	border-left: 3px solid var(--event-color, #6366f1);
	transition: all 0.2s ease;
	font-size: 11px;
}

.month-event-item:hover {
	background: rgba(255, 255, 255, 0.8);
	transform: translateX(3px);
}

.month-event-day {
	font-weight: 700;
	color: rgba(0, 0, 0, 0.7);
	text-align: center;
	font-size: 12px;
}

.month-event-emoji {
	font-size: 14px;
	text-align: center;
}

.month-event-title {
	color: rgba(0, 0, 0, 0.8);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.month-event-more {
	text-align: center;
	color: rgba(0, 0, 0, 0.5);
	font-size: 10px;
	font-weight: 600;
	padding: 4px;
	font-style: italic;
}

.event-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.month-badge {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	border: 2px solid currentColor;
	transition: all 0.2s ease;
}

.badge-emoji {
	font-size: 14px;
}

.badge-count {
	font-size: 12px;
	font-weight: 700;
}

.badge-days {
	font-size: 10px;
	opacity: 0.8;
	margin-left: 2px;
}

.no-events {
	text-align: center;
	color: #999;
	font-size: 12px;
	font-style: italic;
	padding: 8px;
}

/* Responsive Design */
@media (max-width: 1400px) {
	.month-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}
}

@media (max-width: 1000px) {
	.month-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}

	.year-title {
		font-size: 24px;
	}
}

/* Countdown Modal */
#countdown-modal .modal-content {
	animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

.icon-picker,
.color-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.icon-option,
.color-option {
	width: 48px;
	height: 48px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	font-size: 24px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-option:hover,
.color-option:hover {
	transform: scale(1.1);
	border-color: rgba(78, 205, 196, 0.5);
}

.icon-option.selected,
.color-option.selected {
	border-color: #4ECDC4;
	border-width: 3px;
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.color-option {
	border-radius: 50%;
	border-width: 3px;
}

/* Theme Picker Modal */
.theme-picker-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	padding: 16px 0;
}

/* Theme Section */
.theme-section {
	margin-bottom: 24px;
}

.theme-section-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Icon Picker Grid */
.icon-picker-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.icon-pick-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
	border: 2px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.icon-pick-btn:hover {
	background: linear-gradient(145deg, #e0f2fe, #f0f9ff);
	border-color: rgba(59, 130, 246, 0.3);
	transform: scale(1.1) translateY(-2px);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
}

.icon-pick-btn.selected {
	background: linear-gradient(145deg, #dbeafe, #eff6ff);
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(59, 130, 246, 0.25);
	transform: scale(1.05);
}

/* Color Picker Grid */
.color-picker-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
}

.color-pick-btn {
	width: 44px;
	height: 44px;
	border: 3px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.color-pick-btn:hover {
	transform: scale(1.2) translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.color-pick-btn.selected {
	border-color: #1e293b;
	box-shadow: 0 0 0 4px white, 0 0 0 6px currentColor, 0 8px 20px rgba(0, 0, 0, 0.3);
	transform: scale(1.15);
}

/* Background Picker Grid */
.background-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.background-pick-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 10px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
	border: 2px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.background-pick-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(59, 130, 246, 0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.background-pick-btn:hover::before {
	opacity: 1;
}

.background-pick-btn:hover {
	border-color: rgba(78, 205, 196, 0.4);
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.background-pick-btn.selected {
	background: linear-gradient(145deg, rgba(78, 205, 196, 0.15), rgba(59, 130, 246, 0.1));
	border-color: #4ECDC4;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2), 0 8px 24px rgba(78, 205, 196, 0.2);
}

.background-pick-btn .bg-preview {
	font-size: 28px;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.background-pick-btn .bg-name {
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	text-align: center;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.background-pick-btn .bg-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 8px;
	font-weight: 800;
	background: linear-gradient(135deg, #3b82f6, #6366f1);
	color: white;
	padding: 3px 6px;
	border-radius: 6px;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* Background Size Options */
.bg-size-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.bg-size-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 10px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
	border: 2px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.bg-size-btn:hover {
	border-color: rgba(78, 205, 196, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.bg-size-btn.selected {
	background: linear-gradient(145deg, rgba(78, 205, 196, 0.15), rgba(59, 130, 246, 0.1));
	border-color: #4ECDC4;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2), 0 4px 12px rgba(78, 205, 196, 0.15);
}

.bg-size-btn .bg-size-icon {
	font-size: 20px;
}

.bg-size-btn .bg-size-label {
	font-size: 12px;
	font-weight: 700;
	color: #1e293b;
}

.bg-size-btn .bg-size-desc {
	font-size: 10px;
	color: #64748b;
	text-align: center;
}

/* Theme Actions */
.theme-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================
   ADD COUNTDOWN MODAL STYLES
   ========================================== */

#countdown-modal .modal-content {
	max-width: 480px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

#countdown-modal .modal-header {
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(59, 130, 246, 0.08));
	border-bottom: 1px solid rgba(78, 205, 196, 0.15);
	padding: 20px 24px;
}

#countdown-modal .modal-header h3 {
	font-size: 20px;
	font-weight: 700;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 10px;
}

#countdown-modal form {
	padding: 24px;
}

#countdown-modal .form-group {
	margin-bottom: 22px;
}

#countdown-modal .form-group label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#countdown-modal .form-group input[type="text"],
#countdown-modal .form-group input[type="date"] {
	width: 100%;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 500;
	color: #1e293b;
	background: linear-gradient(145deg, #ffffff, #f8fafc);
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	transition: all 0.25s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#countdown-modal .form-group input[type="text"]:focus,
#countdown-modal .form-group input[type="date"]:focus {
	outline: none;
	border-color: #4ECDC4;
	box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15), 0 4px 12px rgba(78, 205, 196, 0.1);
}

#countdown-modal .form-group input[type="text"]::placeholder {
	color: #94a3b8;
}

/* Icon Picker in Add Countdown */
#countdown-modal .icon-picker {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 8px;
}

#countdown-modal .icon-option {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: linear-gradient(145deg, #ffffff, #f1f5f9);
	border: 2px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}

#countdown-modal .icon-option:hover {
	background: linear-gradient(145deg, #e0f2fe, #f0f9ff);
	border-color: rgba(59, 130, 246, 0.3);
	transform: scale(1.1);
}

#countdown-modal .icon-option.selected {
	background: linear-gradient(145deg, #dbeafe, #eff6ff);
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Color Picker in Add Countdown */
#countdown-modal .color-picker {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
}

#countdown-modal .color-option {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

#countdown-modal .color-option:hover {
	transform: scale(1.2);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#countdown-modal .color-option.selected {
	border-color: #1e293b;
	box-shadow: 0 0 0 3px white, 0 0 0 5px currentColor, 0 6px 16px rgba(0, 0, 0, 0.25);
	transform: scale(1.1);
}

#countdown-modal .modal-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================
   THEME PICKER MODAL STYLES
   ========================================== */

#theme-picker-modal .modal-content {
	max-width: 520px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

#theme-picker-modal .modal-header {
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.08));
	border-bottom: 1px solid rgba(168, 85, 247, 0.12);
	padding: 20px 24px;
}

#theme-picker-modal .modal-header h3 {
	font-size: 20px;
	font-weight: 700;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 10px;
}

#theme-picker-modal .modal-body {
	padding: 24px;
}

/* Button Styles for Modals */
.modal .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, #4ECDC4, #44a8a0);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.modal .btn-primary:hover {
	background: linear-gradient(135deg, #44a8a0, #3d9d95);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

.modal .btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	background: linear-gradient(145deg, #f8fafc, #f1f5f9);
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.modal .btn-secondary:hover {
	background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
	border-color: rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

.theme-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.5);
	border: 3px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.theme-option::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--theme-color)22, var(--theme-color)44);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.theme-option:hover::before {
	opacity: 1;
}

.theme-option:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--theme-color);
}

.theme-option.active {
	background: linear-gradient(135deg, var(--theme-color)22, var(--theme-color)44);
	border-color: var(--theme-color);
	border-width: 3px;
	box-shadow: 0 4px 16px var(--theme-color)66;
}

.theme-emoji {
	font-size: 32px;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.theme-name {
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.8);
	position: relative;
	z-index: 1;
}

.theme-option.active .theme-name {
	color: var(--theme-color);
	font-weight: 700;
}

/* Month Detail Modal */
#month-detail-modal .modal-content {
	animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

#month-detail-modal .modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 0;
	max-height: 60vh;
}

.modal-events-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.modal-event-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--event-color);
	opacity: 0.9;
	border-radius: 12px;
	transition: all 0.2s ease;
	border: 2px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-event-item:hover {
	opacity: 1;
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-event-emoji {
	font-size: 32px;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.modal-event-info {
	flex: 1;
	min-width: 0;
}

.modal-event-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px 0;
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.modal-event-date {
	font-size: 14px;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.modal-event-badge {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.98);
	background: rgba(0, 0, 0, 0.25);
	padding: 6px 12px;
	border-radius: 20px;
	flex-shrink: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	white-space: nowrap;
}

.modal-no-events {
	text-align: center;
	padding: 40px 20px;
	color: rgba(0, 0, 0, 0.4);
	font-size: 16px;
	font-style: italic;
}