:root {
	/* Pure Black Theme - Only Black Backgrounds */
	--bg-primary: #000000; /* Pure black background */
	--bg-secondary: #000000; /* Pure black */
	--bg-tertiary: #000000; /* Pure black */
	--bg-elevated: #000000; /* Pure black for cards */
	--bg-surface: #000000; /* Pure black */
	--bg-overlay: #000000; /* Pure black */
	
	/* Text Colors - High Contrast Light Greys */
	--text-primary: #f8f9fa; /* Off-white for main text */
	--text-secondary: rgba(248, 249, 250, 0.7); /* Soft off-white for secondary text */
	--text-tertiary: rgba(248, 249, 250, 0.5); /* Medium off-white */
	--text-disabled: #555555; /* Dark grey for disabled */
	--text-inverse: #000000;
	
	/* Monochrome Accent System - Transparency Based */
	--accent-primary: rgba(255, 255, 255, 0.1); /* Transparent white for active states */
	--accent-secondary: rgba(255, 255, 255, 0.15); /* Lighter accent */
	--accent-tertiary: rgba(255, 255, 255, 0.08); /* Darker accent */
	--accent-light: rgba(255, 255, 255, 0.05);
	--accent-medium: rgba(255, 255, 255, 0.1);
	--accent-strong: rgba(255, 255, 255, 0.15);
	
	/* Status Colors - Monochrome */
	--success: #666666;
	--warning: #777777;
	--error: #888888;
	--info: #555555;
	
	/* Black/Grey Palette */
	--black-000: #000000;
	--black-100: #111111;
	--black-200: #121212;
	--black-300: #1a1a1a;
	--black-400: #222222;
	--black-500: #333333;
	--black-600: #444444;
	--black-700: #555555;
	--black-800: #666666;
	--black-900: #777777;
	
	/* Borders & Dividers - Transparent */
	--border-primary: rgba(255, 255, 255, 0.1);
	--border-secondary: rgba(255, 255, 255, 0.15);
	--border-accent: rgba(255, 255, 255, 0.1);
	--border-focus: rgba(255, 255, 255, 0.2);
	
	/* Shadows - Black/Grey Only */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
	
	/* Spacing System */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	
	/* Typography Scale - Consistent Font Hierarchy */
	--text-xs: 0.75rem;     /* 12px - Small labels, captions */
	--text-sm: 0.875rem;    /* 14px - Secondary text, form labels */
	--text-base: 1rem;      /* 16px - Body text, default */
	--text-lg: 1.125rem;    /* 18px - Large body text, card titles */
	--text-xl: 1.25rem;     /* 20px - Section headers */
	--text-2xl: 1.5rem;     /* 24px - Page titles */
	--text-3xl: 1.875rem;   /* 30px - Main headings */
	--text-4xl: 2.25rem;    /* 36px - Hero text */
	
	/* Responsive Typography Scale */
	--text-xs-mobile: 0.7rem;    /* 11.2px - Mobile small text */
	--text-sm-mobile: 0.8rem;    /* 12.8px - Mobile secondary text */
	--text-base-mobile: 0.9rem;  /* 14.4px - Mobile body text */
	--text-lg-mobile: 1rem;      /* 16px - Mobile large text */
	--text-xl-mobile: 1.1rem;    /* 17.6px - Mobile section headers */
	--text-2xl-mobile: 1.3rem;   /* 20.8px - Mobile page titles */
	--text-3xl-mobile: 1.6rem;   /* 25.6px - Mobile main headings */
	
	/* Border Radius */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;
	--radius-full: 9999px;
	
	/* Legacy compatibility */
	--bg: var(--bg-primary);
	--card: var(--bg-elevated);
	--card-alt: var(--bg-surface);
	--text: var(--text-primary);
	--text-dark: var(--text-primary);
	--muted: var(--text-secondary);
	--muted-dark: var(--text-tertiary);
	--primary: var(--accent-primary);
	--primary-2: var(--accent-secondary);
	--success: var(--success);
	--warning: var(--warning);
	--danger: var(--error);
	--border: var(--border-primary);
	--border-light: var(--border-secondary);
	--shadow: var(--shadow-sm);
	--shadow-lg: var(--shadow-lg);
}

* { box-sizing: border-box; }

html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	min-height: 100vh;
	width: 100%;
}
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
	background: #0a0a0f;
	color: var(--text-primary);
	line-height: 1.5;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: var(--text-base);
	font-weight: 400;
	position: relative;
	overflow-x: hidden;
}

/* Ensure background covers entire viewport */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url('./Gemini_Generated_Image_7frhjx7frhjx7frh.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
	/* Clean background without pixelation */
	filter: 
		contrast(1.2) 
		saturate(0.8) 
		brightness(0.9);
	/* Smooth image rendering */
	image-rendering: auto;
	transform: scale(1);
	transform-origin: center;
}

/* Remove the second pixelated layer */

/* Mobile Header */
.mobile-header {
	display: none;
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: var(--space-sm) var(--space-md);
	box-shadow: var(--shadow-sm);
	height: 56px;
}

.mobile-header-content {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.mobile-menu-toggle {
	background: transparent;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
	background: var(--accent-primary);
}

.mobile-title h1 {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

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

.app-title {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.app-icon {
	font-size: var(--text-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
	color: var(--text-primary);
}

.app-icon:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	background: var(--bg-surface);
	border-color: var(--border-secondary);
}

.app-title-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.app-title h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.app-subtitle {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0;
	font-weight: 500;
	line-height: 1.5;
}

.header-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.header-actions .btn {
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--text-primary); /* White text */
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.header-actions .btn:hover {
	background: rgba(255, 255, 255, 0.2); /* More transparent on hover */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--text-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-actions .btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.actions-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.file-input input { display: none; }

/* Fixed Sidebar - UI Best Practices */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 200px; /* Reduced width for more compact sidebar */
	height: 100vh;
	background: rgba(0, 0, 0, 0.1); /* More transparent like other elements */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	z-index: 200;
	display: flex;
	flex-direction: column;
	transform: translateX(0); /* Ensure sidebar is always visible on desktop */
	box-shadow: var(--shadow-lg);
	padding: var(--space-md); /* Equal padding from all sides */
	will-change: auto; /* Prevent GPU acceleration issues */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.sidebar-header {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--border-primary);
	min-height: 60px; /* Reduced height for compact sidebar */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
}

.sidebar-title {
	text-align: center;
	width: 100%;
}

.sidebar-title h1 {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs) 0;
	line-height: 1.2;
}

.sidebar-subtitle {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.4;
	opacity: 0.8;
}

.sidebar-nav {
	flex: 1;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	justify-content: flex-start;
}

.sidebar-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-xs);
	border-radius: var(--radius-lg);
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.2s ease;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 100%;
	max-width: 160px; /* Constrain width for centering */
	text-align: center;
	font-size: var(--text-xs);
	font-weight: 500;
	min-height: 40px; /* Reduced height for compact sidebar */
}

.sidebar-item:hover {
	background: var(--accent-primary);
	color: var(--text-primary);
}

.sidebar-item.active {
	background: var(--accent-primary);
	color: var(--text-primary);
	border-left: 3px solid var(--accent-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-text {
	flex: 1;
	text-align: center;
}

.user-info {
	margin-top: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info small {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: 500;
}

/* Sidebar Footer */
.sidebar-footer {
	padding: var(--space-md) 0;
	border-top: 1px solid var(--border-primary);
	margin-top: auto;
	text-align: center;
}

.footer-info {
	margin-bottom: var(--space-sm);
	font-size: var(--text-xs);
}

.footer-info:last-child {
	margin-bottom: 0;
}

.footer-info small {
	color: var(--text-tertiary);
	font-size: var(--text-xs);
	line-height: 1.4;
	display: block;
}

.sidebar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3); /* Transparent black */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 150;
}

main { 
	padding: var(--space-2xl); 
	margin-left: 200px; /* Match sidebar width */
	display: grid; 
	gap: var(--space-xl);
	min-height: 100vh;
	padding-bottom: var(--space-2xl);
}

/* Mobile responsive main content */
@media (max-width: 768px) {
	main {
		margin-left: 0;
		padding: var(--space-md);
		gap: var(--space-md);
		min-height: calc(100vh - 60px); /* Account for mobile header */
	}
}

@media (max-width: 480px) {
	main {
		padding: var(--space-sm);
		gap: var(--space-sm);
	}
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }


/* Sidebar Styles - Removed duplicate definition */

.sidebar-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--space-md);
	margin-bottom: var(--space-xs);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.2s ease;
	width: 100%;
	text-align: center;
}

.sidebar-item:hover {
	background: var(--accent-primary);
	color: var(--text-primary);
}

.sidebar-item.active {
	background: var(--accent-primary);
	color: var(--text-primary);
	border-left: 3px solid var(--accent-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.panel-header { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 16px; 
	margin-bottom: 20px; 
	flex-wrap: wrap; 
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header h2 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text);
}

/* Subjects Section Transparency */
.subjects-section {
	padding: 0;
	margin: 0;
}

.subjects-wrapper {
	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive Design for Subjects Section */
@media (max-width: 768px) {
	.subjects-wrapper {
		padding: var(--space-lg);
	}
	
	.panel-header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		padding: var(--space-md);
	}
	
	.panel-header h2 {
		text-align: center;
		margin-bottom: var(--space-sm);
	}
}

@media (max-width: 480px) {
	.subjects-wrapper {
		padding: var(--space-md);
	}
	
	.panel-header {
		padding: var(--space-sm);
	}
	
	.panel-header h2 {
		font-size: var(--text-2xl);
		font-weight: 600;
	}
}

.inline-form { 
	display: flex; 
	gap: 12px; 
	align-items: flex-end; 
	flex-wrap: wrap; 
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
}
.inline-form input, .inline-form textarea { 
	background: var(--bg); 
	border: 1px solid var(--border); 
	color: var(--text); 
	padding: 12px 14px; 
	border-radius: 8px; 
	min-width: 180px; 
	font-size: var(--text-sm);
	transition: border-color 0.2s ease;
}
.inline-form input:focus, .inline-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.inline-form textarea {
	resize: vertical;
	min-height: 60px;
	font-family: inherit;
}

.filters { 
	display: flex; 
	gap: 12px; 
	margin-bottom: 20px; 
	flex-wrap: wrap; 
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.filters select { 
	background: rgba(255, 255, 255, 0.1); 
	color: var(--text-primary); 
	border: 1px solid rgba(255, 255, 255, 0.2); 
	padding: 10px 12px; 
	border-radius: 8px; 
	font-size: var(--text-sm);
	transition: all 0.2s ease;
}
.filters select:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
	background: rgba(255, 255, 255, 0.15);
}

.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.card { 
	background: rgba(0, 0, 0, 0.4); /* Darker background for better separation */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.2); 
	padding: var(--space-xl); 
	border-radius: var(--radius-lg); 
	display: grid; 
	gap: var(--space-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease;
}
.card:hover {
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.3);
}
.card:nth-child(even) { background: rgba(0, 0, 0, 0.35); }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.card .meta { color: var(--muted); font-size: 13px; line-height: 1.4; }

.badges { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.badge { 
	font-size: var(--text-xs); 
	padding: var(--space-xs) var(--space-sm); 
	border-radius: var(--radius-full); 
	border: 1px solid var(--border-primary); 
	background: var(--bg-tertiary); 
	color: var(--text-secondary); 
	font-weight: 500; 
	line-height: 1;
}
.badge.due { 
	color: var(--text-primary); 
	border-color: var(--accent-primary); 
	background: var(--accent-light); 
}
.badge.overdue { 
	color: var(--text-primary); 
	border-color: var(--error); 
	background: var(--accent-light); 
}
.badge.completed { 
	color: var(--text-primary); 
	border-color: var(--success); 
	background: var(--accent-light); 
}

.btn { 
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--text-primary); /* White text */
	border: 1px solid rgba(255, 255, 255, 0.2); 
	padding: var(--space-sm) var(--space-lg); 
	border-radius: var(--radius-md); 
	cursor: pointer; 
	font-size: var(--text-sm);
	font-weight: 500;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	box-shadow: var(--shadow-xs);
	min-height: 44px;
}
.btn:hover { 
	border-color: rgba(255, 255, 255, 0.4); 
	background: rgba(255, 255, 255, 0.2); /* More transparent on hover */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: var(--text-primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }
.btn.primary { 
	background: rgba(255, 255, 255, 0.15); /* More transparent background */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-color: rgba(255, 255, 255, 0.3); 
	color: var(--text-primary); /* White text */
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}
.btn.primary:hover { 
	background: rgba(255, 255, 255, 0.25); /* More transparent on hover */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn.danger { 
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(244, 93, 72, 0.3); 
	color: var(--text-primary); /* White text */
}

/* Modern Icon Styles */
.icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.icon-sm {
	width: 16px;
	height: 16px;
}

.icon-lg {
	width: 24px;
	height: 24px;
}

.icon-xl {
	width: 32px;
	height: 32px;
}

/* Progress Bar Component */
.progress-container {
	background: var(--gray-200);
	border-radius: var(--radius-full);
	height: 8px;
	overflow: hidden;
	position: relative;
}

.progress-bar {
	background: var(--accent-primary);
	height: 100%;
	border-radius: var(--radius-full);
	transition: width 0.3s ease;
	position: relative;
}

.progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.progress-label {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin-bottom: var(--space-xs);
	font-weight: 500;
}

.progress-percentage {
	font-size: var(--text-xs);
	color: var(--text-tertiary);
	margin-top: var(--space-xs);
	font-weight: 500;
}

/* Dashboard Layout */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.dashboard-card {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.dashboard-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

.dashboard-title {
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.dashboard-icon {
	width: 24px;
	height: 24px;
	color: var(--accent-primary);
}

/* Subject Progress Component */
.subject-progress {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
}

.subject-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

.subject-progress-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.subject-progress-stats {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.stat-label {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin: var(--space-xs) 0 0 0;
	font-weight: 500;
}

/* Topic List with Modern Icons */
.topic-item {
	display: block;
	padding: 8px 12px;
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	margin-bottom: 2px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: all 0.2s ease;
}

.topic-item:hover {
	border-color: var(--accent-primary);
	box-shadow: var(--shadow-sm);
}

.topic-icon {
	width: 20px;
	height: 20px;
	color: var(--accent-primary);
	flex-shrink: 0;
}

.topic-content {
	flex: 1;
	min-width: 0;
}

.topic-name {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs) 0;
}

.topic-meta {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0;
}

/* Modern Form Elements */
.form-group {
	margin-bottom: var(--space-md);
}

/* Fix excessive spacing in existing components */
.panel-header {
	margin-bottom: var(--space-lg);
}

.panel-header h2 {
	margin: 0 0 var(--space-sm) 0;
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text-primary);
}

.actions-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--space-md);
}

.subject-item {
	margin-bottom: var(--space-md);
}

.topic-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
}

.topic-content {
	margin-top: var(--space-sm);
}

.topic-actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-top: var(--space-sm);
}

.repetition-flow {
	margin-top: var(--space-sm);
}

.flow-step {
	margin-bottom: var(--space-xs);
}

.pomodoro-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
	align-items: start;
}

.pomodoro-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.session-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.stat-card {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	text-align: center;
	transition: all 0.2s ease;
}

.stat-card:hover {
	border-color: var(--accent-primary);
	transform: translateY(-1px);
}

.stat-number {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--space-xs);
}

.stat-label {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	font-weight: 500;
}

/* Calendar spacing fixes */
.calendar-container {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--space-lg);
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--border-primary);
}

.calendar-title {
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.calendar-nav {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.calendar-month {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-primary);
	min-width: 120px;
	text-align: center;
}

.calendar-nav-btn {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text-secondary);
}

.calendar-nav-btn:hover {
	background: var(--accent-light);
	border-color: var(--accent-primary);
	color: var(--accent-primary);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.calendar-day {
	border: 1px solid var(--border-primary);
	padding: var(--space-sm);
	min-height: 80px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.2s ease;
	cursor: pointer;
}

.calendar-day:hover {
	border-color: var(--accent-primary);
	box-shadow: var(--shadow-sm);
}

.calendar-day.today {
	background: var(--accent-light);
	border-color: var(--accent-primary);
}

.calendar-day.has-agenda {
	border-left: 3px solid var(--accent-primary);
	background: var(--accent-light);
}

.calendar-day.empty {
	opacity: 0.3;
	cursor: default;
}

.day-number {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--space-xs);
	line-height: 1;
}

.day-indicators {
	display: flex;
	gap: 4px;
	justify-content: flex-start;
}

.indicator {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-xs);
	transition: all 0.2s ease;
}

.indicator:hover {
	transform: scale(1.2);
}

.indicator.due {
	background: #3B82F6; /* Bright blue */
	box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.indicator.overdue {
	background: #EF4444; /* Bright red */
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.indicator.completed {
	background: #10B981; /* Bright green */
	box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Authentication Styles */
.auth-body {
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	overflow-x: hidden;
}

/* Mobile-specific auth body adjustments */
@media (max-width: 768px) {
	.auth-body {
		padding: var(--space-sm);
		align-items: flex-start;
		padding-top: var(--space-md);
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	.auth-body {
		padding: var(--space-xs);
		padding-top: var(--space-sm);
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/* iPhone XR specific fixes */
@media (max-width: 479px) and (min-width: 375px) {
	.auth-body {
		padding: 0;
		align-items: flex-start;
		justify-content: flex-start;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		height: 100vh;
		height: -webkit-fill-available;
	}
	
	.auth-container {
		width: 100vw;
		max-width: 100vw;
		padding: 12px;
		box-sizing: border-box;
		overflow-x: hidden;
	}
}

/* Old auth-container styles removed - now using new grid layout */

.auth-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.auth-header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.auth-header h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs) 0;
}

.auth-header p {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0;
}

.auth-tabs {
	display: flex;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-lg);
	padding: var(--space-xs);
	margin-bottom: var(--space-xl);
}

.auth-tab {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.auth-tab.active {
	background: var(--accent-primary);
	color: var(--text-primary);
}

.auth-tab:hover:not(.active) {
	color: var(--text-primary);
}

.auth-form {
	display: none;
}

.auth-form.active {
	display: block;
}

.form-group {
	margin-bottom: var(--space-lg);
}

.form-group label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--space-xs);
}

.form-group input {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: var(--text-sm);
	transition: all 0.2s ease;
}

.form-group input:focus {
	outline: none;
	border-color: var(--accent-primary);
	background: rgba(255, 255, 255, 0.08);
}

.form-hint {
	display: block;
	font-size: var(--text-xs);
	color: var(--text-tertiary);
	margin-top: var(--space-xs);
}

.auth-btn {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-size: var(--text-sm);
	font-weight: 600;
	margin-top: var(--space-md);
	margin-bottom: var(--space-sm);
}

.auth-message {
	display: none;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	margin-top: var(--space-md);
	text-align: center;
}

.auth-message.success {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.2);
	color: #22c55e;
}

.auth-message.error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #ef4444;
}

.auth-message.info {
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: #3b82f6;
}

/* New Auth Layout Styles */
.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 500px;
	min-height: 100vh;
	padding: var(--space-lg);
	box-sizing: border-box;
	margin: 0 auto;
	overflow: hidden; /* prevent container from creating page overflow */
}

/* Integrated Features Styles */
.features-integrated {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0;
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-highlight {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
	flex: 1;
	min-width: 120px;
	justify-content: center;
}

.feature-highlight:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
}

.feature-highlight .feature-icon {
	font-size: var(--text-lg);
}

.feature-highlight .feature-text {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
}



.quote-section {
	margin-top: var(--space-lg);
	padding: var(--space-md) 0;
}

.inspirational-quote {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	text-align: center;
	margin: 0;
	padding: var(--space-md) var(--space-lg);
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}

.inspirational-quote::before {
	content: '"';
	font-size: 3rem;
	color: var(--accent-primary);
	position: absolute;
	top: -10px;
	left: 10px;
	opacity: 0.3;
	font-family: serif;
}

.inspirational-quote::after {
	content: '"';
	font-size: 3rem;
	color: var(--accent-primary);
	position: absolute;
	bottom: -20px;
	right: 10px;
	opacity: 0.3;
	font-family: serif;
}

.features-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border-radius: var(--radius-lg);
	transition: all 0.3s ease;
}

.feature-item:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(8px);
}

.feature-icon {
	font-size: 2rem;
	flex-shrink: 0;
	margin-top: var(--space-xs);
}

.feature-content h3 {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs) 0;
}

.feature-content p {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
}

.auth-form-container {
	width: 100%;
}

.auth-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 100%;
	max-height: 90vh; /* constrain height to viewport */
	overflow-y: auto; /* allow inner scroll instead of page overflow */
	-webkit-overflow-scrolling: touch;
}

/* Responsive Auth Layout - Enhanced for All Devices */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
	.auth-container {
		max-width: 600px;
		padding: var(--space-2xl);
	}
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
	.auth-container {
		max-width: 550px;
	}
}

/* Laptop (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
	.auth-container {
		max-width: 500px;
	}
}

/* Tablet Landscape (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
	.auth-container {
		max-width: 500px;
		padding: var(--space-lg);
	}
}

/* Tablet Portrait (600px - 767px) */
@media (max-width: 767px) and (min-width: 600px) {
	.auth-container {
		max-width: 450px;
		padding: var(--space-md);
	}
}

/* Mobile Landscape (480px - 599px) */
@media (max-width: 599px) and (min-width: 480px) {
	.auth-container {
		max-width: 400px;
		padding: var(--space-sm);
	}
}

/* iPhone XR and similar devices (375px - 479px) */
@media (max-width: 479px) and (min-width: 375px) {
	.auth-container {
		max-width: 100%;
		padding: 12px;
		padding-bottom: 24px;
		min-height: 100vh;
		width: 100%;
	}
	
	
	.auth-card {
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
		max-height: calc(100vh - 24px); /* tighter bound on small screens */
		overflow-y: auto;
	}
	
	.features-integrated {
		margin: 12px 0;
		padding: 8px;
		gap: 6px;
	}
	
	.feature-highlight {
		padding: 6px 8px;
		min-width: 80px;
	}
	
	.feature-highlight .feature-icon {
		font-size: 14px;
	}
	
	.feature-highlight .feature-text {
		font-size: 11px;
	}
	
	/* Auth form adjustments for iPhone XR */
	.auth-header {
		text-align: center;
		margin-bottom: 20px;
	}
	
	.auth-header h1 {
		font-size: 24px;
		margin-bottom: 4px;
		line-height: 1.2;
	}
	
	.auth-header p {
		font-size: 12px;
		margin: 0;
		line-height: 1.3;
	}
	
	.auth-tabs {
		padding: 4px;
		margin-bottom: 20px;
		display: flex;
		gap: 4px;
	}
	
	.auth-tab {
		padding: 12px 16px;
		font-size: 14px;
		min-height: 44px;
		flex: 1;
		text-align: center;
		border-radius: 8px;
	}
	
	.form-group {
		margin-bottom: 16px;
	}
	
	.form-group label {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 6px;
		display: block;
	}
	
	.form-group input {
		padding: 12px 16px;
		font-size: 16px;
		min-height: 44px;
		width: 100%;
		box-sizing: border-box;
		border-radius: 8px;
	}
	
	.auth-btn {
		padding: 14px 20px;
		font-size: 16px;
		min-height: 48px;
		width: 100%;
		border-radius: 8px;
		font-weight: 600;
	}
	
	.form-hint {
		font-size: 11px;
		margin-top: 4px;
		line-height: 1.3;
	}
	
	.auth-message {
		font-size: 12px;
		padding: 8px 12px;
		margin-top: 12px;
		border-radius: 6px;
	}
}

/* Smaller mobile devices (320px - 374px) */
@media (max-width: 374px) {
	.auth-container {
		padding: 8px;
		gap: 12px;
	}
	
	.features-card {
		padding: 12px;
		margin-bottom: 12px;
	}
	
	.auth-card {
		padding: 12px;
	}
	
	.features-header h2 {
		font-size: 16px;
	}
	
	.features-header p {
		font-size: 11px;
	}
	
	.feature-item {
		padding: 6px;
		gap: 6px;
	}
	
	.feature-icon {
		font-size: 18px;
		width: 20px;
	}
	
	.feature-content h3 {
		font-size: 13px;
	}
	
	.feature-content p {
		font-size: 10px;
	}
	
	.auth-header h1 {
		font-size: 20px;
	}
	
	.auth-header p {
		font-size: 11px;
	}
	
	.auth-tab {
		padding: 10px 12px;
		font-size: 13px;
	}
	
	.form-group input {
		padding: 10px 12px;
		font-size: 14px;
	}
	
	.auth-btn {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	.feature-item:hover {
		transform: none;
		background: rgba(255, 255, 255, 0.02);
	}
	
	.feature-item:active {
		background: rgba(255, 255, 255, 0.05);
		transform: scale(0.98);
	}
	
	.auth-tab:active {
		transform: scale(0.95);
	}
	
	.auth-btn:active {
		transform: scale(0.95);
	}
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
	.auth-container {
		padding: 8px;
		padding-bottom: 16px;
		gap: 8px;
	}
	
	.features-card {
		max-height: 30vh;
		padding: 8px;
		overflow-y: auto;
	}
	
	.auth-card {
		padding: 12px;
		margin-bottom: 8px;
	}
}

/* Responsive Design - UI Best Practices */
@media (max-width: 1024px) {
	.sidebar {
		width: 200px; /* Maintain good proportions on tablets */
	}
	
	main {
		margin-left: 200px;
	}
}

/* Tour Overlay Styles */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

/* Make only the tooltip and its contents interactive */
.tour-tooltip {
    pointer-events: all;
}

.tour-tooltip * {
    pointer-events: all;
}

/* Make highlighted elements clickable */
.tour-highlight {
    pointer-events: none;
}

.tour-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.tour-highlight {
    position: absolute;
    border: 2px solid var(--accent-primary);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 15px rgba(74, 144, 226, 0.3);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10001;
}

.tour-tooltip {
    position: absolute;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    min-width: 300px;
    pointer-events: all;
    z-index: 10002;
    animation: tourFadeIn 0.3s ease;
}

@keyframes tourFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.tour-content {
    padding: 24px;
}

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

.tour-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.tour-progress {
    background: var(--accent-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.tour-body {
    margin-bottom: 24px;
}

.tour-body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 14px;
}

.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tour-nav {
    display: flex;
    gap: 8px;
}

.tour-nav .btn {
    padding: 8px 16px;
    font-size: 14px;
    min-width: 80px;
}

.tour-nav .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ensure tour buttons are always clickable */
#tourSkip, #tourPrev, #tourNext, #tourComplete {
    pointer-events: all !important;
    cursor: pointer !important;
    z-index: 10010 !important;
    position: relative !important;
}

/* Tour positioning classes */
.tour-tooltip.top {
    transform: translateX(-50%);
    margin-top: -10px;
}

.tour-tooltip.bottom {
    transform: translateX(-50%);
    margin-top: 10px;
}

.tour-tooltip.left {
    transform: translateY(-50%);
    margin-left: -10px;
}

.tour-tooltip.right {
    transform: translateY(-50%);
    margin-left: 10px;
}

/* Mobile responsive tour styles */
@media (max-width: 768px) {
    .tour-tooltip {
        max-width: 90vw;
        min-width: 280px;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        position: fixed !important;
    }
    
    .tour-content {
        padding: 20px;
    }
    
    .tour-header h3 {
        font-size: 16px;
    }
    
    .tour-body p {
        font-size: 14px;
    }
    
    .tour-nav .btn {
        padding: 6px 12px;
        font-size: 12px;
        min-width: 60px;
    }
    
    .tour-footer {
        flex-direction: column;
        gap: 8px;
    }
    
    .tour-nav {
        width: 100%;
        justify-content: center;
    }
}

/* How It Works Modal Styles */
#howItWorksModal .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 90vw;
    max-height: 80vh;
    margin: 0;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.step-content h3 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile responsive for steps */
@media (max-width: 768px) {
    .steps-container {
        max-height: 50vh;
        gap: 16px;
    }
    
    .step {
        padding: 12px;
        gap: 12px;
    }
    
    .step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .step-content h3 {
        font-size: 14px;
    }
    
    .step-content p {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
	.mobile-header {
		display: block;
	}
	
	.sidebar {
		transform: translateX(-100%);
		width: 240px; /* Reduced mobile width for better proportions */
		background: rgba(0, 0, 0, 0.1); /* Maintain transparent background on mobile */
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
	}
	
	.sidebar.open {
		transform: translateX(0);
	}
	
	.sidebar-overlay {
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}
	
	.sidebar-overlay.open {
		opacity: 1;
		visibility: visible;
	}
	
	main {
		margin-left: 0;
		padding: var(--space-md);
	}
	
	.card {
		padding: var(--space-md);
	}
	
	.btn {
		min-height: 44px;
		width: 100%;
		justify-content: center;
	}
	
	.dashboard-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.pomodoro-container {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	
	.session-stats {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
	
	.calendar-grid {
		gap: 1px;
	}
	
	.calendar-day {
		min-height: 60px;
		padding: var(--space-xs);
	}
}

@media (max-width: 480px) {
	.mobile-header {
		padding: var(--space-xs) var(--space-sm);
		height: 52px;
	}
	
	.mobile-title h1 {
		font-size: var(--text-base);
	}
	
	.sidebar {
		width: 240px; /* Consistent mobile width */
	}
	
	.sidebar-header {
		padding: var(--space-lg);
		min-height: 70px; /* Slightly smaller for mobile */
	}
	
	.sidebar-nav {
		padding: var(--space-md);
	}
	
	.sidebar-item {
		padding: var(--space-sm);
		font-size: var(--text-xs);
	}
	
	main {
		padding: var(--space-sm);
	}
	
	.card {
		padding: var(--space-sm);
	}
	
	.calendar-day {
		min-height: 50px;
		padding: 2px;
	}
	
	.day-number {
		font-size: var(--text-xs);
	}
}

.form-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--space-sm);
}

.form-input {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	background: var(--bg-tertiary);
	color: var(--text-primary);
	transition: all 0.2s ease;
	min-height: 44px;
}

.form-input:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: 0 0 0 3px var(--accent-light);
}

.form-input::placeholder {
	color: var(--text-disabled);
}

.form-textarea {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	background: var(--bg-tertiary);
	color: var(--text-primary);
	resize: vertical;
	min-height: 100px;
	transition: all 0.2s ease;
}

.form-textarea:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: 0 0 0 3px var(--accent-light);
}

.form-textarea::placeholder {
	color: var(--text-disabled);
}
.btn.danger:hover {
	background: rgba(244, 93, 72, .25);
}
.btn.success { 
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, 0.2); 
	color: var(--text-primary); /* White text */
}
.btn.success:hover {
	background: rgba(255, 255, 255, 0.2); /* More transparent on hover */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: var(--text-primary);
	border-color: rgba(255, 255, 255, 0.4);
}
.btn.ghost { 
	background: rgba(255, 255, 255, 0.05); /* Very transparent background */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: var(--text-primary); /* White text */
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn.ghost:hover {
	background: rgba(255, 255, 255, 0.15); /* More transparent on hover */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--text-primary);
	border-color: rgba(255, 255, 255, 0.4);
}

.row.actions { gap: 6px; }
.row.actions .btn { padding: 8px 10px; font-size: 13px; }

/* Calendar - Modern UI Best Practices */
.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 32px;
	gap: 24px;
}

.calendar-title h2 {
	margin: 0 0 8px 0;
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text);
}

.calendar-subtitle {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: 1.5;
}

.calendar-navigation {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 8px;
}

.btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 8px;
	transition: all 0.2s ease;
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--text-primary); /* White text */
}

.btn-icon:hover {
	background: rgba(255, 255, 255, 0.2); /* More transparent on hover */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: var(--text-primary);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.05);
}

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

.month-display {
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--text);
	min-width: 180px;
	text-align: center;
	padding: 0 16px;
}

/* Today's Agenda Section */
.today-section {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 32px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.section-header h3 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text);
}

.today-date {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-muted);
	background: var(--bg-alt);
	padding: 8px 16px;
	border-radius: 20px;
}

.today-content {
	min-height: 60px;
}

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

.today-list:empty::before {
	content: "No tasks scheduled for today";
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
	padding: 20px;
}

/* Calendar Container */
.calendar-container {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 32px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.calendar-container {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border);
	margin-top: 16px;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.calendar-title {
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.calendar-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.calendar-month {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text);
	min-width: 140px;
	text-align: center;
}

.calendar-nav-btn {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text);
}

.calendar-nav-btn:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--text-dark);
	transform: translateY(-1px);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	background: var(--bg-alt);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-day-header {
	background: var(--primary);
	color: var(--text-dark);
	padding: 16px 8px;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.calendar-day {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	min-height: 100px;
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.2s ease;
	cursor: pointer;
	border: 1px solid transparent;
}

.calendar-day:hover {
	background: rgba(255, 255, 255, 0.03);
	border-color: var(--primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.calendar-day.today {
	background: linear-gradient(135deg, var(--primary-light), var(--primary));
	border-color: var(--primary);
	box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
}

.calendar-day.today .day-number {
	color: var(--text-dark);
	font-weight: 800;
}

.calendar-day.has-agenda {
	border-left: 4px solid var(--primary);
	background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 255, 255, 0.05));
}

.calendar-day.empty {
	background: var(--bg-alt);
	cursor: default;
	opacity: 0.4;
}

.calendar-day.empty:hover {
	background: var(--bg-alt);
	transform: none;
	box-shadow: none;
}

.day-number {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
	line-height: 1;
}

.day-indicators {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: auto;
	justify-content: center;
}

.indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

.indicator:hover {
	transform: scale(1.2);
}

.indicator.due {
	background: #3B82F6; /* Bright blue */
	box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.indicator.overdue {
	background: #EF4444; /* Bright red */
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.indicator.completed {
	background: #10B981; /* Bright green */
	box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Calendar Legend */
.calendar-legend {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--border-primary);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.calendar-legend h4 {
	margin: 0 0 16px 0;
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--text-primary);
}

.legend-items {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.2s ease;
}

.legend-item:hover {
	background: var(--accent-primary);
	transform: translateY(-1px);
}

.legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-dot.due {
	background: #3B82F6; /* Bright blue */
	box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.legend-dot.overdue {
	background: #EF4444; /* Bright red */
	box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.legend-dot.completed {
	background: #10B981; /* Bright green */
	box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.legend-label {
	font-size: 0.9rem;
	color: var(--text-primary);
	font-weight: 500;
}

/* Day Detail Modal */
.day-detail-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3); /* Transparent black */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.modal-content {
	position: relative;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--border-primary);
	border-radius: 16px;
	max-width: 500px;
	width: 100%;
	max-height: 80vh;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
	border-bottom: 1px solid var(--border);
}

.modal-header h3 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--text);
}

.modal-body {
	padding: 24px;
	max-height: 60vh;
	overflow-y: auto;
}

.day-detail-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.day-detail-list:empty::before {
	content: "No tasks scheduled for this day";
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
	padding: 20px;
}

/* Responsive Design for Calendar */
@media (max-width: 768px) {
	.calendar-header {
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
		padding: 0;
	}
	
	.calendar-navigation {
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
	}
	
	.calendar-container {
		padding: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.calendar-grid {
		min-width: 100%;
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 1px;
		background: var(--border-primary);
		border-radius: var(--radius-md);
		overflow: hidden;
	}
	
	.calendar-day {
		min-height: 60px;
		padding: 4px 2px;
		font-size: 0.8rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	.day-number {
		font-size: 0.8rem;
		margin-bottom: 2px;
	}
	
	.day-indicators {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		justify-content: center;
	}
	
	.indicator {
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}
	
	.calendar-legend {
		padding: 12px;
		margin-top: 16px;
	}
	
	.legend-items {
		flex-direction: column;
		gap: 8px;
	}
	
	.today-section {
		padding: 12px;
		margin-bottom: 16px;
	}
	
	.section-header {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}
	
	.agenda-item {
		padding: 8px;
		margin-bottom: 8px;
	}
	
	.agenda-details {
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.calendar-container {
		padding: 4px;
	}
	
	.calendar-grid {
		gap: 0;
	}
	
	.calendar-day {
		min-height: 50px;
		padding: 2px 1px;
		font-size: 0.7rem;
	}
	
	.day-number {
		font-size: 0.7rem;
		margin-bottom: 1px;
	}
	
	.calendar-day-header {
		padding: 8px 2px;
		font-size: 0.7rem;
	}
	
	.month-display {
		font-size: 0.9rem;
		min-width: 120px;
	}
	
	.btn-icon {
		width: 28px;
		height: 28px;
		font-size: 0.8rem;
	}
	
	.indicator {
		width: 4px;
		height: 4px;
	}
	
	.calendar-legend {
		padding: 8px;
	}
	
	.legend-item {
		font-size: 0.8rem;
		padding: 4px 8px;
	}
	
	.today-section {
		padding: 8px;
	}
	
	.agenda-item {
		padding: 6px;
		margin-bottom: 6px;
	}
	
	.agenda-details {
		font-size: 0.7rem;
	}
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
	.mobile-header {
		display: block;
	}
	
	.sidebar {
		transform: translateX(-100%);
		width: 240px; /* Reduced mobile width for better proportions */
		background: rgba(0, 0, 0, 0.1); /* Maintain transparent background on mobile */
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
	}
	
	.sidebar.open {
		transform: translateX(0);
	}
	
	.sidebar-overlay {
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}
	
	.sidebar-overlay.open {
		opacity: 1;
		visibility: visible;
	}
	
	main {
		margin-left: 0;
		padding: var(--space-md);
	}
	
	/* Make calendar fully responsive */
	.calendar-container {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
	}
	
	.calendar-grid {
		min-width: 100%;
		width: 100%;
	}
	
	/* Improve card responsiveness */
	.card {
		margin-bottom: var(--space-sm);
	}
	
	/* Make forms more mobile-friendly */
	.form-group {
		margin-bottom: var(--space-sm);
	}
	
	.form-group input,
	.form-group textarea,
	.form-group select {
		width: 100%;
		font-size: var(--text-base); /* Prevent zoom on iOS */
	}
	
	/* Improve button responsiveness */
	.btn {
		min-height: 44px; /* Touch target size */
		padding: var(--space-sm) var(--space-md);
	}
	
	/* Make modals mobile-friendly */
	.modal-content {
		width: 95vw;
		max-width: 95vw;
		margin: var(--space-md);
		max-height: 90vh;
		overflow-y: auto;
	}
}

@media (max-width: 480px) {
	.mobile-header {
		padding: var(--space-xs) var(--space-sm);
		height: 52px;
	}
	
	.sidebar {
		width: 240px; /* Consistent mobile width */
	}
	
	.calendar-day {
		min-height: 45px !important;
		font-size: 0.7rem !important;
	}
	
	.day-number {
		font-size: 0.7rem !important;
	}
	
	.modal-content {
		width: 100vw;
		max-width: 100vw;
		margin: 0;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
}

/* Focus and Accessibility Improvements */
.calendar-day:focus {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.calendar-day:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
}

.calendar-nav-btn:focus {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.calendar-nav-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.btn-icon:focus {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.indicator:focus {
	outline: 2px solid var(--primary);
	outline-offset: 1px;
}

.modal-content:focus {
	outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.calendar-day {
		border: 2px solid var(--border);
	}
	
	.calendar-day.today {
		border-color: var(--primary);
		border-width: 3px;
	}
	
	.indicator {
		border: 1px solid var(--text);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.calendar-day,
	.btn-icon,
	.modal-content {
		transition: none;
	}
	
	.calendar-day:hover {
		transform: none;
	}
	
	.btn-icon:hover {
		transform: none;
	}
}

/* Make calendar horizontally scrollable on small screens */
#calendar { overflow-x: auto; }

/* Modal styles */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3); /* Transparent black */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.modal-content {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--border-primary);
	border-radius: 16px;
	padding: 24px;
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.modal-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text);
	margin: 0;
}
.modal-close {
	background: none;
	border: none;
	color: var(--muted);
	font-size: var(--text-2xl);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all 0.2s ease;
}
.modal-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text);
}
.modal-body {
	margin-bottom: 20px;
}
.modal-footer {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}
.form-group {
	margin-bottom: 16px;
}
.form-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--text);
}
.form-textarea {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--text-sm);
	resize: vertical;
	min-height: 100px;
	transition: border-color 0.2s ease;
}
.form-textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Form styles */
.modal-form {
	display: grid;
	gap: 16px;
}
.form-input {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 14px;
	border-radius: 8px;
	font-size: var(--text-sm);
	transition: border-color 0.2s ease;
}
.form-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.form-help {
	font-size: var(--text-xs);
	color: var(--muted);
	margin: 4px 0 0 0;
	line-height: 1.4;
}

/* Subject and Topic hierarchy */
.subject-card {
	margin-bottom: 12px;
	border-left: 4px solid var(--primary);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.subject-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.subject-title h3 {
	margin: 0;
	font-size: var(--text-lg);
	color: var(--text);
}

.subject-name {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.subject-name .expand-icon {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--text-secondary);
	cursor: pointer;
	transition: color 0.2s ease;
}

.subject-name:hover .expand-icon {
	color: var(--text-primary);
}

.expand-indicator {
	font-size: 0.8em;
	color: var(--muted-dark);
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.subject-title:hover .expand-indicator {
	color: var(--primary);
}

.topic-count {
	color: var(--muted);
	font-size: var(--text-sm);
	margin-left: 8px;
}

.subject-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.topics-container {
	display: grid;
	gap: 4px;
	margin-top: 12px;
}

.topic-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px;
	margin-left: 20px;
	position: relative;
}

.topic-card::before {
	content: '';
	position: absolute;
	left: -16px;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--border);
}

.topic-card::after {
	content: '';
	position: absolute;
	left: -16px;
	top: 0;
	width: 1px;
	height: 50%;
	background: var(--border);
}

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

.topic-name {
	flex: 1;
}

.topic-name strong {
	color: var(--text);
	font-size: var(--text-base);
}

.next-repetition {
	font-size: 0.9em;
	color: var(--text-muted);
	margin-top: 2px;
}

.repetition-schedule {
	font-size: 0.85em;
	color: var(--text-muted);
	margin-top: 4px;
	line-height: 1.4;
}

.schedule-item {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.8em;
}

.schedule-item.completed {
	background: var(--success-light);
	color: var(--success);
}

.schedule-item.current {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 600;
}

.schedule-item.overdue {
	background: var(--error-light);
	color: var(--error);
	font-weight: 600;
}

.schedule-item.pending {
	background: var(--bg-alt);
	color: var(--text-muted);
}

/* Expand/Collapse functionality */
.expand-btn {
	font-size: var(--text-base);
	padding: 10px 14px;
	min-width: 44px;
	text-align: center;
	font-weight: bold;
	background: var(--primary);
	color: white;
	border: 1px solid var(--primary);
	border-radius: 8px;
	transition: all 0.2s ease;
	cursor: pointer;
}

.expand-btn:hover {
	background: var(--primary-2);
	border-color: var(--primary-2);
	transform: scale(1.05);
}

/* Topic details layout */
.topic-details {
	margin: 8px 0;
	display: grid;
	gap: 4px;
}

.topic-weak, .topic-notes {
	color: var(--muted);
	font-size: var(--text-xs);
	line-height: 1.4;
}

.topic-weak strong, .topic-notes strong {
	color: var(--text);
	font-weight: 600;
}

.topic-meta {
	margin: 8px 0;
	color: var(--muted);
	font-size: var(--text-xs);
}

.topic-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 8px 0;
}

.topic-actions .btn {
	padding: 6px 10px;
	font-size: var(--text-xs);
}

/* Steps row alignment */
.topic-card .row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Today section improvements */
.today-item:last-child {
	border-bottom: none;
}

.today-item:hover {
	background: rgba(255, 255, 255, 0.02);
	border-radius: 4px;
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
}

/* Tooltip for calendar hover */
.tooltip {
	position: fixed;
	background: #0e131b;
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	padding: 10px 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	max-width: 320px;
	z-index: 1000;
	pointer-events: none;
}
.tooltip .title { font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.tooltip .line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; }
.tooltip .meta { color: var(--muted); font-size: 12px; }

.app-footer { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; display: grid; gap: 6px; }

/* Responsive */
@media (max-width: 1024px) {
	main { max-width: 860px; }
}

@media (max-width: 768px) {
	main { padding: 14px; max-width: 680px; }
	.btn { padding: 10px 12px; }
	.calendar-grid { min-width: 520px; }
}

@media (max-width: 480px) {
	main { padding: 12px; max-width: 420px; }
	.inline-form input { min-width: 140px; }
	.card { padding: 10px; }
	.cal-cell { min-height: 72px; }
	.tabs { top: 56px; }
	.btn { padding: 12px 14px; }
	.calendar-grid { min-width: 490px; }
}

/* Overdue Recovery Modal Styles */
.overdue-topic-name {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--text);
}

.days-overdue {
	font-size: var(--text-base);
	color: var(--danger);
	font-weight: 600;
	margin-bottom: 16px;
}

.overdue-suggestion {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 20px;
}

.overdue-suggestion .suggestion {
	color: var(--text);
}

.overdue-suggestion strong {
	color: var(--primary);
}

.overdue-suggestion em {
	color: var(--muted);
	font-size: var(--text-sm);
}

.overdue-options h3 {
	margin-bottom: 16px;
	color: var(--text);
}

.recovery-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.recovery-buttons .btn {
	padding: 16px 12px;
	text-align: center;
	line-height: 1.4;
	border-radius: 8px;
	transition: all 0.2s ease;
}

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

.recovery-buttons .btn strong {
	display: block;
	font-size: var(--text-base);
	margin-bottom: 4px;
}

.recovery-buttons .option-desc {
	font-size: var(--text-xs);
	opacity: 0.9;
	display: block;
}

/* Responsive adjustments for overdue modal */
@media (max-width: 768px) {
	.recovery-buttons {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.recovery-buttons .btn {
		padding: 12px;
	}
}

@media (max-width: 480px) {
	.overdue-topic-name {
		font-size: var(--text-base);
	}
	
	.days-overdue {
		font-size: var(--text-sm);
	}
	
	.overdue-suggestion {
		padding: 8px;
	}
}

/* Pomodoro Timer Styles */
.pomodoro-controls {
	display: flex;
	gap: 12px;
	align-items: center;
}

.pomodoro-controls select {
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--text);
	font-size: var(--text-sm);
}

.pomodoro-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 24px;
	align-items: start;
}

.pomodoro-timer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.timer-circle {
	position: relative;
	width: 200px;
	height: 200px;
}

.timer-display {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 2;
}

.timer-display #timerTime {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 4px;
}

.timer-display #timerStatus {
	font-size: 0.9rem;
	color: var(--muted);
}

.timer-svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.timer-bg {
	fill: none;
	stroke: var(--border);
	stroke-width: 8;
}

.timer-progress {
	fill: none;
	stroke: var(--primary);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 283;
	stroke-dashoffset: 283;
	transition: stroke-dashoffset 1s linear;
}

.timer-controls {
	display: flex;
	gap: 12px;
}

.btn-large {
	padding: 12px 24px;
	font-size: var(--text-base);
	font-weight: 600;
}

.pomodoro-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.session-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.stat-card {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	transition: all 0.2s ease;
}

.stat-card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
}

.stat-number {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.stat-label {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 500;
}

.current-session {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
}

.current-session h3 {
	margin: 0 0 12px 0;
	color: var(--text);
	font-size: 1.1rem;
}

.current-session #currentTopic {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.current-session #sessionProgress {
	color: var(--muted);
	font-size: 0.9rem;
}

.session-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.stat {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 0.8rem;
	color: var(--muted);
	margin-bottom: 4px;
}

.stat-value {
	display: block;
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--text-primary);
}

.topic-selection {
	margin: 24px auto 0 auto;
	padding: 60px 20px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--border-primary);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 400px;
	width: 100%;
	max-width: 600px;
}

.topic-selection h3 {
	margin: 0 0 20px 0;
	color: var(--text-primary);
	font-size: var(--text-xl);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.topic-selection h3::before {
	content: "📚";
	font-size: 1.2rem;
}

.topic-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	width: 100%;
	justify-content: center;
}

.no-topics-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	width: 100%;
	margin: 0 auto;
}

.no-topics-icon {
	font-size: 4rem;
	margin-bottom: 24px;
	opacity: 0.7;
	display: block;
}

.no-topics-state h4 {
	margin: 0 0 16px 0;
	color: var(--text-primary);
	font-size: var(--text-2xl);
	font-weight: 600;
	display: block;
	width: 100%;
}

.no-topics-state p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-lg);
	line-height: 1.6;
	max-width: 500px;
	display: block;
	width: 100%;
}

/* Responsive font sizes for topic selection */
@media (max-width: 768px) {
	.topic-selection {
		padding: 40px 16px;
		min-height: 300px;
		margin: 16px auto 0 auto;
	}
	
	.topic-selection h3 {
		font-size: var(--text-lg);
		margin-bottom: 16px;
	}
	
	.no-topics-icon {
		font-size: 3rem;
		margin-bottom: 20px;
	}
	
	.no-topics-state h4 {
		font-size: var(--text-xl);
		margin-bottom: 12px;
	}
	
	.no-topics-state p {
		font-size: var(--text-base);
		max-width: 400px;
	}
}

@media (max-width: 480px) {
	.topic-selection {
		padding: 30px 12px;
		min-height: 250px;
		margin: 12px auto 0 auto;
	}
	
	.topic-selection h3 {
		font-size: var(--text-base);
		margin-bottom: 12px;
	}
	
	.no-topics-icon {
		font-size: 2.5rem;
		margin-bottom: 16px;
	}
	
	.no-topics-state h4 {
		font-size: var(--text-lg);
		margin-bottom: 10px;
	}
	
	.no-topics-state p {
		font-size: var(--text-sm);
		max-width: 350px;
		line-height: 1.5;
	}
}

/* Global Responsive Typography */
@media (max-width: 768px) {
	body {
		font-size: var(--text-base-mobile);
	}
	
	.sidebar-title h1 {
		font-size: var(--text-xl-mobile);
	}
	
	.app-title h1 {
		font-size: var(--text-2xl-mobile);
	}
	
	.panel-header h2 {
		font-size: var(--text-xl-mobile);
	}
	
	.topic-name {
		font-size: var(--text-base-mobile);
	}
	
	.topic-meta {
		font-size: var(--text-sm-mobile);
	}
	
	.calendar-title {
		font-size: var(--text-xl-mobile);
	}
	
	.dashboard-title {
		font-size: var(--text-xl-mobile);
	}
	
	.auth-header h1 {
		font-size: var(--text-2xl-mobile);
	}
	
	.btn {
		font-size: var(--text-sm-mobile);
	}
	
	.sidebar-item {
		font-size: var(--text-xs-mobile);
	}
}

@media (max-width: 480px) {
	body {
		font-size: var(--text-sm-mobile);
	}
	
	.sidebar-title h1 {
		font-size: var(--text-lg-mobile);
	}
	
	.app-title h1 {
		font-size: var(--text-xl-mobile);
	}
	
	.panel-header h2 {
		font-size: var(--text-lg-mobile);
	}
	
	.topic-name {
		font-size: var(--text-sm-mobile);
	}
	
	.topic-meta {
		font-size: var(--text-xs-mobile);
	}
	
	.calendar-title {
		font-size: var(--text-lg-mobile);
	}
	
	.dashboard-title {
		font-size: var(--text-lg-mobile);
	}
	
	.auth-header h1 {
		font-size: var(--text-xl-mobile);
	}
	
	.btn {
		font-size: var(--text-xs-mobile);
		padding: 8px 12px;
	}
	
	.sidebar-item {
		font-size: 0.7rem;
	}
}

/* Enhanced Topic Card Styles */
.topic-selection .topic-item {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--border-primary);
	border-radius: 12px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.topic-selection .topic-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.topic-selection .topic-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	border-color: var(--accent-primary);
}

.topic-selection .topic-item:hover::before {
	opacity: 1;
}

.topic-card-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.topic-icon {
	font-size: var(--text-2xl);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	flex-shrink: 0;
}

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

.topic-info h4 {
	margin: 0 0 6px 0;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.3;
}

.topic-status {
	margin-bottom: 8px;
}

.topic-card-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.repetition-info {
	display: flex;
	align-items: center;
	gap: 6px;
}

.repetition-label {
	font-size: 0.8rem;
	color: var(--text-secondary);
	font-weight: 500;
}

.repetition-value {
	font-size: 0.8rem;
	color: var(--text-primary);
	font-weight: 600;
}

.topic-progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.progress-bar-mini {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill-mini {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
	border-radius: 2px;
	transition: width 0.3s ease;
}

.progress-text-mini {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-weight: 500;
	min-width: 30px;
	text-align: right;
}

/* No Topics State */
.no-topics-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-secondary);
}

.no-topics-icon {
	font-size: 3rem;
	margin-bottom: 16px;
	opacity: 0.6;
}

.no-topics-state h4 {
	margin: 0 0 8px 0;
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 600;
}

.no-topics-state p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.8;
}

.topic-item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.topic-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	padding: 4px;
	border-radius: 4px;
}

.topic-header:hover {
	background: rgba(255, 255, 255, 0.05);
}

.topic-name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.topic-name .collapse-icon {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--text-secondary);
	transition: color 0.2s ease;
}

.topic-header:hover .collapse-icon {
	color: var(--text-primary);
}

.collapse-btn {
	background: none;
	border: none;
	color: var(--text);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.collapse-btn:hover {
	background: var(--bg-alt);
}

.collapse-icon {
	font-size: var(--text-xs);
	transition: transform 0.2s ease;
}

.topic-content {
	transition: all 0.3s ease;
}

.topic-notes {
	background: var(--bg-alt);
	padding: 12px;
	border-radius: 6px;
	margin-bottom: 12px;
	border-left: 3px solid var(--primary);
}

.topic-item:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
}

.topic-item.selected {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--text-dark);
}

.topic-item h4 {
	margin: 0 0 8px 0;
	font-size: var(--text-base);
}

.topic-item .topic-meta {
	font-size: 0.8rem;
	color: var(--muted);
}

.no-topics {
	text-align: center;
	padding: 20px;
	color: var(--text-muted);
	font-style: italic;
}

.agenda-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.agenda-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9em;
}

.step-info {
	color: var(--text-muted);
}


/* Analytics Styles */
.analytics-controls {
	display: flex;
	gap: 12px;
	align-items: center;
}

.analytics-controls select {
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--text);
	font-size: var(--text-sm);
}

.analytics-container {
	margin-top: 24px;
}

.chart-container {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
	text-align: center;
}

.analytics-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.stat-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
}

.stat-card h3 {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-card .stat-value {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text-primary);
}

/* Responsive Design for Pomodoro */
@media (max-width: 768px) {
	.pomodoro-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.timer-circle {
		width: 150px;
		height: 150px;
	}
	
	.timer-display #timerTime {
		font-size: var(--text-3xl);
	}
	
	.session-stats {
		grid-template-columns: 1fr;
	}
	
	.topic-list {
		grid-template-columns: 1fr;
	}
	
	.analytics-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.pomodoro-controls {
		flex-direction: column;
		align-items: stretch;
	}
	
	.timer-circle {
		width: 120px;
		height: 120px;
	}
	
	.timer-display #timerTime {
		font-size: var(--text-2xl);
	}
	
	.analytics-stats {
		grid-template-columns: 1fr;
	}
}

/* Notification Animations */
@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* Repetition Sequence Styles - Positioned below topic title */
.repetition-sequence {
	margin: 16px 0;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 12px;
	border: 1px solid var(--border-primary);
}

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

.sequence-header h4 {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: 600;
}

.sequence-progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.progress-text {
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.progress-bar {
	width: 80px;
	height: 4px;
	background: var(--border);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
}

.sequence-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

/* Simple connecting lines between repetition blocks */
.sequence-step:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 28px;
	top: 100%;
	width: 2px;
	height: 8px;
	background: rgba(255, 255, 255, 0.3);
	z-index: 2;
}

.sequence-step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	transition: all 0.2s ease;
	position: relative;
	z-index: 2;
}



.sequence-step.completed {
	background: rgba(16, 185, 129, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.sequence-step.current {
	background: rgba(59, 130, 246, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(59, 130, 246, 0.3);
	cursor: pointer;
}

.sequence-step.current:hover {
	background: rgba(59, 130, 246, 0.2);
	transform: translateY(-1px);
}

.sequence-step.overdue {
	background: rgba(239, 68, 68, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(239, 68, 68, 0.3);
}

.sequence-step.pending {
	background: rgba(156, 163, 175, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(156, 163, 175, 0.3);
}

.step-icon {
	font-size: 20px;
	flex-shrink: 0;
	margin-left: 4px;
	margin-right: 8px;
	z-index: 4;
	position: relative;
}

.step-content {
	flex: 1;
}

.step-title {
	font-weight: 600;
	color: var(--text);
	font-size: var(--text-sm);
	margin-bottom: 2px;
}

.step-status {
	font-size: var(--text-xs);
	font-weight: 500;
	margin-bottom: 2px;
}

.flow-step.completed .step-status {
	color: #22c55e;
}

.flow-step.current .step-status {
	color: #22c55e;
}

.flow-step.overdue .step-status {
	color: #ef4444;
}

.flow-step.pending .step-status {
	color: #9ca3af;
}

.step-date {
	font-size: 11px;
	color: var(--text-secondary);
}

.step-completed {
	font-size: 11px;
	color: var(--text-secondary);
	margin-top: 2px;
}

.step-action {
	font-size: 11px;
	color: var(--primary);
	font-weight: 500;
	background: rgba(34, 197, 94, 0.1);
	padding: 4px 8px;
	border-radius: 4px;
}

.flow-connector {
	height: 8px;
	width: 2px;
	background: var(--border);
	margin-left: 20px;
}

/* Enhanced Calendar Styles */
.agenda-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.agenda-header h3 {
	margin: 0;
	color: var(--text);
	font-size: var(--text-lg);
	font-weight: 600;
}

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

.agenda-section {
	background: var(--bg);
	padding: 16px;
	border-radius: 8px;
	border: 1px solid var(--border);
}

.agenda-section h4 {
	margin: 0 0 12px 0;
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 600;
}

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

.objective-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 6px;
	border: 1px solid var(--border);
}

.objective-icon {
	font-size: var(--text-base);
}

.objective-text {
	flex: 1;
	font-size: var(--text-xs);
	color: var(--text);
}

.objective-progress {
	font-size: 11px;
	color: var(--text-secondary);
}

.pomodoro-sessions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pomodoro-session {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 6px;
	border: 1px solid var(--border);
}

.session-icon {
	font-size: var(--text-base);
}

.session-info {
	flex: 1;
}

.session-topic {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text);
}

.session-duration {
	font-size: 11px;
	color: var(--text-secondary);
}

.day-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.day-detail-header h3 {
	margin: 0;
	color: var(--text);
	font-size: var(--text-lg);
	font-weight: 600;
}

.day-detail-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.day-objectives, .day-tasks {
	background: var(--bg);
	padding: 16px;
	border-radius: 8px;
	border: 1px solid var(--border);
}

.day-objectives h4, .day-tasks h4 {
	margin: 0 0 12px 0;
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 600;
}

.badge.pomodoro {
	background: rgba(168, 85, 247, 0.1);
	color: #a855f7;
	border: 1px solid rgba(168, 85, 247, 0.2);
}