:root {
			/* Material Design Color Palette */
			--md-primary: #1976D2;
			--md-primary-dark: #1565C0;
			--md-primary-light: #42A5F5;
			--md-secondary: #00ACC1;
			--md-accent: #FF6D00;
			--md-success: #4CAF50;
			--md-warning: #FFB300;
			--md-error: #F44336;
			--md-surface: #FFFFFF;
			--md-background: #FAFAFA;
			--md-on-primary: #FFFFFF;
			--md-on-surface: #212121;
			--md-on-background: #424242;
			
			/* Shadows */
			--md-shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			--md-shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
			--md-shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
			--md-shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
			--md-shadow-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
			
			/* Dark mode variables */
			--dark-surface: #121212;
			--dark-surface-variant: #1E1E1E;
			--dark-on-surface: #E0E0E0;
		}
		
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		
		body {
			font-family: 'Roboto', sans-serif;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			overflow: hidden;
			position: relative;
			width: 100%;
			height: 100vh;
		}
		
		/* Material Design App Bar */
		.app-bar {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 64px;
			background: var(--md-primary);
			box-shadow: var(--md-shadow-2);
			z-index: 1200;
			display: flex;
			align-items: center;
			padding: 0 16px;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}
		
		.app-bar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		
		.app-bar-left {
			display: flex;
			align-items: center;
			gap: 16px;
		}
		
		.menu-button {
			background: none;
			border: none;
			color: var(--md-on-primary);
			cursor: pointer;
			padding: 8px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.2s;
		}
		
		.menu-button:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		
		.menu-button:active {
			background: rgba(255, 255, 255, 0.2);
		}
		
		.app-title {
			color: var(--md-on-primary);
			font-size: 20px;
			font-weight: 500;
			letter-spacing: 0.25px;
		}
		
		.app-subtitle {
			color: rgba(255, 255, 255, 0.7);
			font-size: 12px;
			font-weight: 400;
			margin-left: 8px;
		}
		
		.logo-container {
			display: flex;
			align-items: center;
			gap: 12px;
		}
		
		.logo-img {
			height: 45px;
			width: auto;
			border-radius: 8px;
			background: white;
			padding: 4px;
			box-shadow: var(--md-shadow-1);
		}