html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		width: 100%;
		min-height: 100%;
	}

	body {
		text-align: center;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
		margin: 0;
		padding: 0;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		width: 100%;
	}

	/* Force the calendar application container to occupy the full screen viewport height context */
	#mainCalendarApp {
		flex: 1 0 auto;
		min-height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-bottom: 60px;
		box-sizing: border-box;
		width: 100%;
		max-width: 100% !important;
		overflow-x: hidden;
	}


	/* Top Header Date Display Style */
	#date {
		display: inline-block;
		font-size: 1.35em;      
		font-weight: bold;      
		color: #222;            
		margin-bottom: 20px;    
		transition: color 0.15s ease, opacity 0.15s ease;
	}

	/* Visual Grid Layout */
	.calendar-grid { 
		display: grid !important; 
		grid-template-columns: repeat(7, 40px); 
		gap: 5px; 
		margin-top: 20px; 
		margin-left: auto !important;
		margin-right: auto !important;
		width: 310px !important; /* 7 * 40px + 6 * 5px gap = 310px exactly */
		box-sizing: border-box !important;
	}
	.calendar-grid.stats-columns-active {
		grid-template-columns: 16px repeat(8, 36px) !important;
		width: 336px !important; /* 16px + 8 * 36px + 8 * 4px gap = 336px exactly */
		gap: 4px !important;
	}
	.calendar-grid.stats-columns-active.stats-working-active {
		grid-template-columns: 16px repeat(8, 36px) !important;
		width: 336px !important;
		gap: 4px !important;
	}
	.calendar-grid.stats-columns-active.stats-school-active {
		grid-template-columns: 16px repeat(7, 36px) !important;
		width: 296px !important; /* 16px + 7 * 36px + 7 * 4px gap = 296px exactly */
		gap: 4px !important;
	}
	.day-name { 
		font-weight: bold; 
		padding-bottom: 5px; 
		font-size: 0.9em; 
	}
	.day-cell { 
		width: 40px; 
		height: 40px; 
		line-height: 40px; 
		aspect-ratio: 1 / 1 !important;
		border: 1px solid #ccc; 
		border-radius: 4px; 
		box-sizing: border-box; 
		position: relative !important;
		text-align: center !important;
		transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.calendar-grid.stats-columns-active .day-cell, 
	.calendar-grid.stats-columns-active .weekly-hours-stat-cell {
		width: 36px !important;
		height: 36px !important;
		aspect-ratio: 1 / 1 !important;
		line-height: 36px !important;
		font-size: 0.9em !important;
	}
	/* Guarantees highly prominent visual highlight for current day cell inside statistics/school modes */
	.calendar-grid.stats-columns-active .current-day,
	.calendar-grid.stats-school-active .current-day {
		background-color: #8f7fc2 !important;
		color: #ffffff !important;
		font-weight: bold !important;
		border: 1.5px solid #5a4a8c !important;
		box-shadow: 0 0 8px rgba(143, 127, 194, 0.7) !important;
		z-index: 10 !important;
	}
	.stats-only-cell {
		display: none !important;
	}
	.calendar-grid.stats-columns-active .stats-only-cell {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.empty-cell { 
		border: none; 
	}

	/* Weekend Tint Palette */
	.sat-day { 
		background-color: #ebebeb; 
	}
	.sun-day { 
		background-color: #dadada;
	}

	/* Public Holidays (Mark 1) inherit the Sunday color scheme */
	.holiday-bg {
		background-color: #dadada !important; 
	}

	/* Substitute Holiday (Mark 4 / ID 99) inherit the Sunday color scheme */
	.substitute-bg {
		background-color: #dadada !important; 
		cursor: pointer !important;
	}

	/* Bridge Day (Mark 6 / ID 98) inherit the Saturday color scheme */
	.bridge-bg {
		background-color: #ebebeb !important; 
		cursor: pointer !important;
	}

	/* --- Working Saturdays (Mark 7 & 8) Split Triangles Styling --- */

	/* Standard Matrix View (No Periods Shown) */
	.working-sat-standard {
		background: linear-gradient(to top right, #ffffff 50%, #ebebeb 50%) !important;
		position: relative;
	}

	/* Active Period Matrix View (Periods State Active) */
	.working-sat-period {
		background: linear-gradient(to top right, #f0f4f8 50%, #dce5f0 50%) !important;
		position: relative;
	}

	/* Mark 7 / Event 96 Custom Bottom-Right Corner "-1" Badge Indicator */
	.working-sat-minus-one::before {
		content: '-1';
		position: absolute;
		bottom: 2px;
		right: 4px;
		font-size: 0.65em;
		font-weight: bold;
		color: #444;
		line-height: 1;
		pointer-events: none;
		z-index: 4;
	}

	/* Dynamic Border Highlights for Celestial Events */
	.has-event { 
		border-bottom: 3px solid #666 !important; 
		border-right: 3px solid #666 !important;  
		cursor: pointer; 
	}

	/* 1. Base Highlight for the Current Day (White Text Test Variant) */
	.current-day { 
		background-color: #8f7fc2 !important; 
		color: #fff !important;               
		font-weight: bold;
		border: 1px solid #7463aa !important;  
		box-shadow: 0 4px 8px rgba(143, 127, 194, 0.3); 
		transform: scale(1.05);             
		position: relative;                 
		z-index: 5;
	}

	/* 2. Dynamic Shadow Border (ONLY applies if the current day has events) */
	.current-day.has-event { 
		border-bottom: 3px solid #333 !important; 
		border-right: 3px solid #333 !important;  
	}
		/* Relative container anchor to align corner badges perfectly */
	.shortened-container {
		position: relative;
	}
	/* Weekend-aware tonal hierarchy for active multi-day periods */
	.period-weekday {
		background-color: #f0f4f8 !important; 
	}
	.period-sat {
		background-color: #dce5f0 !important; 
	}
	.period-sun {
		background-color: #b9cfe3 !important; 
	}

	/* Rule to suppress standard shadow borders if a day ONLY contains a period */
	.has-event.only-period-border-trap {
		border-bottom: 1px solid #ccc !important;
		border-right: 1px solid #ccc !important;
		cursor: default;
	}

	.period-interactive {
		cursor: pointer !important;
	}

	/* Hollow / Empty ring/circle indicator for official minor celestial observances (Event mark 3) */
	.shortened-container::after {
		content: '' !important;            
		position: absolute !important;
		display: block !important;
		top: 3px !important;
		right: 3px !important;
		width: 8px !important;            
		height: 8px !important;           
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
		aspect-ratio: 1 / 1 !important;
		border: 1px solid #555 !important;
		border-radius: 50% !important;
		box-sizing: border-box !important;
		pointer-events: none !important;     
	}

	/* Solid Circle (Mini-Dot) indicator for official major celestial observances (Events 1, 2, 3, 4) */
	.major-celestial-container {
		position: relative;
	}
	.major-celestial-container::before {
		content: '' !important;            
		position: absolute !important;
		display: block !important;
		top: 3px !important;
		left: 3px !important;
		width: 8px !important;            
		height: 8px !important;           
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
		aspect-ratio: 1 / 1 !important;
		background-color: #555 !important;
		border-radius: 50% !important;
		box-sizing: border-box !important;
		pointer-events: none !important;     
	}

	/* Incomplete corner in the upper right inside the cell for Solar Holiday Eves (Events 29, 31) */
	.solar-eve-container {
		position: relative !important;
	}
	.solar-eve-container::after {
		content: '' !important;
		position: absolute !important;
		display: block !important;
		top: 4px !important;
		right: 4px !important;
		width: 7px !important;
		height: 7px !important;
		min-width: 7px !important;
		min-height: 7px !important;
		max-width: 7px !important;
		max-height: 7px !important;
		border-top: 1.9px solid #555 !important;
		border-right: 1.9px solid #555 !important;
		box-sizing: border-box !important;
		pointer-events: none !important;
	}

	/* Statistics working hours badge classes */
	.stat-badge {
		position: absolute !important;
		bottom: 2px !important;
		right: 4px !important;
		font-size: 0.65em !important;
		font-weight: bold !important;
		color: #111 !important;
		z-index: 10 !important;
		pointer-events: none !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* National Day flag badge */
	.flag-badge {
		position: absolute !important;
		bottom: 1px !important;
		left: 3px !important;
		font-size: 11.5px !important;
		color: #555 !important;
		z-index: 10 !important;
		pointer-events: none !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
	}

	/* Term triangle badge */
	.term-triangle-badge {
		position: absolute !important;
		bottom: 0 !important;
		right: 0 !important;
		width: 10px !important;
		height: 10px !important;
		display: block !important;
		z-index: 15 !important;
		pointer-events: none !important;
	}

	/* Academic break ring */
	.academic-break-ring {
		position: absolute !important;
		bottom: 1px !important;
		right: 1px !important;
		width: 8px !important;
		height: 8px !important;
		display: block !important;
		z-index: 15 !important;
		pointer-events: none !important;
	}

	.calendar-grid.stats-columns-active .stat-badge {
		position: absolute !important;
		bottom: 2px !important;
		right: 4px !important;
		font-size: 0.65em !important;
		font-weight: bold !important;
		z-index: 10 !important;
		pointer-events: none !important;
		line-height: 1 !important;
	}

	.current-day .stat-badge {
		color: #ffffff !important;
	}

	.current-day .flag-badge {
		color: #ffffff !important;
	}

	.current-day .term-triangle-badge polygon {
		fill: #ffffff !important;
	}

	.current-day.period-weekday .stat-badge,
	.current-day.period-sat .stat-badge,
	.current-day.period-sun .stat-badge {
		color: #3f2a56 !important;
	}

	.current-day.period-weekday .flag-badge,
	.current-day.period-sat .flag-badge,
	.current-day.period-sun .flag-badge {
		color: #3f2a56 !important;
	}

	.current-day.period-weekday .term-triangle-badge polygon,
	.current-day.period-sat .term-triangle-badge polygon,
	.current-day.period-sun .term-triangle-badge polygon {
		fill: #3f2a56 !important;
	}

	/* Adjust celestial observance ring color on current day depending on whether periods are active */
	.current-day.shortened-container::after {
		border-color: #ffffff !important;
	}

	.current-day.period-weekday.shortened-container::after,
	.current-day.period-sat.shortened-container::after,
	.current-day.period-sun.shortened-container::after {
		border-color: #3f2a56 !important;
	}

	/* Adjust major celestial observance dot color on current day depending on whether periods are active */
	.current-day.major-celestial-container::before {
		background-color: #ffffff !important;
	}

	.current-day.period-weekday.major-celestial-container::before,
	.current-day.period-sat.major-celestial-container::before,
	.current-day.period-sun.major-celestial-container::before {
		background-color: #3f2a56 !important;
	}

	/* Adjust solar holiday eve corner color on current day depending on whether periods are active */
	.current-day.solar-eve-container::after {
		border-color: #ffffff !important;
	}

	.current-day.period-weekday.solar-eve-container::after,
	.current-day.period-sat.solar-eve-container::after,
	.current-day.period-sun.solar-eve-container::after {
		border-color: #3f2a56 !important;
	}

	.stat-badge.high-hours {
		color: #ef4444 !important; /* high hours are displayed in red */
	}

	.stat-badge.shortened-hours {
		color: #27ae60 !important; /* shortened working hours highlighted in green */
	}

	/* Custom HTML Tooltip Box Styling */
	#customTooltip {
		position: absolute;
		display: none;
		background-color: rgba(33, 33, 33, 0.98);
		color: #fff;
		padding: 12px;
		border-radius: 8px;
		font-size: 1.1em;
		font-weight: normal;
		line-height: 1.4;
		max-width: 280px;
		text-align: left;
		z-index: 2000005 !important; /* Kept safely higher than the statistics modal layer */
		pointer-events: auto;
		box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	}

	/* Dedicated Separate Viewport Tooltip for 12-Month Year Dashboard Mode */
	#yearViewToolTip {
		position: fixed;
		display: none;
		background-color: rgba(33, 33, 33, 0.98);
		color: #fff;
		padding: 12px;
		border-radius: 8px;
		font-size: 1.1em;
		font-weight: normal;
		line-height: 1.4;
		max-width: 280px;
		text-align: left;
		z-index: 2000005 !important; /* Kept safely higher than the statistics modal layer */
		pointer-events: auto;
		box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	}

	/* Secure individual text block formatting to ensure names never collide */
	.tooltip-event-link {
		display: block;
		color: #ffffff !important;
		cursor: pointer;
		padding: 6px 8px;
		margin: 4px 0;
		border-radius: 4px;
		text-decoration: none !important;
		font-weight: normal;
		transition: background-color 0.15s ease;
	}

	/* Move only the soft background block overlay on mouse-over */
	.tooltip-event-link:hover {
		background-color: rgba(185, 207, 227, 0.25) !important;
	}

	/* Redesign the close element into a distinct absolute target boundary circle */
	.tooltip-close-x {
		position: absolute;
		top: -10px;
		right: -10px;
		width: 22px;
		height: 22px;
		line-height: 20px;
		text-align: center;
		background-color: #212121;
		border: 1px solid #666;
		color: #fff;
		border-radius: 50%;
		font-size: 0.9em;
		cursor: pointer;
		z-index: 2005;
		box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	}

	.tooltip-close-x:hover {
		background-color: #c93b3b;
		border-color: #ff5c5c;
	}

	/* Distinct visual style highlight for multi-day periods (Mark 5) */
	.period-highlight {
		background-color: #f0f4f8 !important; 
		border-color: #b0c4de !important;     
	}

	/* Container framework for the 12-month annual dashboard layout */
	.year-grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, 340px); 
		justify-content: center; 
		gap: 25px;
		padding: 20px 20px 140px 20px; /* Added 140px bottom padding to prevent tooltip shaking */
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	/* Individual monthly calendar card panels inside the year matrix */
	.month-card {
		background: #ffffff;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.03);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 340px !important; /* Matches grid-col width 340px */
		margin: 0 auto;
		box-sizing: border-box !important; /* Use border-box for precise layouts */
	}

	.month-card:has(.stats-working-active) {
		width: 366px !important;
	}
	.month-card:has(.stats-school-active) {
		width: 326px !important;
	}
	.month-card.stats-card-active {
		width: 366px !important;
	}
	.month-card.stats-card-active:has(.stats-school-active) {
		width: 326px !important;
	}

	.year-grid-container:has(.stats-working-active) {
		grid-template-columns: repeat(auto-fit, 366px) !important;
	}
	.year-grid-container:has(.stats-school-active) {
		grid-template-columns: repeat(auto-fit, 326px) !important;
	}
	.year-grid-container.stats-grid-active {
		grid-template-columns: repeat(auto-fit, 366px) !important;
	}
	.year-grid-container.stats-grid-active:has(.stats-school-active) {
		grid-template-columns: repeat(auto-fit, 326px) !important;
	}

	/* Monthly sub-title titles within Year View */
	.month-card-title {
		font-size: 1.25em;
		font-weight: bold;
		color: #222;
		margin-bottom: 12px;
		text-align: center;
	}

	/* Sticky Top Header container layout mechanics for Year View */
	.sticky-active-body {
		padding-top: 190px; 
	}

	.frozen-header-panel {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		background-color: rgba(255, 255, 255, 0.98);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		z-index: 99990 !important; /* Layered directly beneath the fullscreen glass modals */
		padding: 14px 0 10px 0; 
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px; 
		box-sizing: border-box;
	}

	/* Sets a balanced margin around the navigation panel when frozen */
	.frozen-header-panel div[style*="margin: 30px"] {
		margin-top: 8px !important;
		margin-bottom: 4px !important;
	}

	/* Tightens the spacing of the control panel inside the frozen bar */
	.frozen-header-panel .control-panel {
		margin-top: 5px !important;
	}

	/* Start Page Portal Layout Styles */
	#startPagePortal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 80vh;
		padding: 40px 20px;
		box-sizing: border-box;
	}

	.portal-title {
		font-size: 2.8em;
		color: #222;
		margin-bottom: 5px;
	}

	.portal-subtitle {
		font-size: 1.25em;
		color: #666;
		margin-bottom: 40px;
	}

	.menu-container {
		display: flex;
		flex-direction: column;
		gap: 15px;
		width: 100%;
		max-width: 320px;
	}

	.menu-btn {
		display: block;
		padding: 14px 20px;
		font-size: 1.1em;
		font-weight: bold;
		color: #444;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		border-radius: 6px;
		cursor: pointer;
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.menu-btn:hover {
		background-color: #ebebeb;
		border-color: #ccc;
		color: #111;
		transform: translateY(-1px);
	}

	/* Master utility class to hide sections dynamically with maximum layout override priority */
	.hidden-section, body .hidden-section.portal-modal-overlay {
		display: none !important;
	}

	/* Fullscreen-Locked Interactive Modal Window Overlays */
	.portal-modal-overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		background-color: rgba(0, 0, 0, 0.4) !important;
		backdrop-filter: blur(4px) !important;
		z-index: 99999 !important; /* Layered safely on top of all cards, scrollbars, and headers */
		display: flex !important; /* Forces layout tracking on browser glass context */
		justify-content: center !important;
		align-items: center !important;
	}

	.portal-modal-box {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 25px;
		width: 90%;
		max-width: 480px;
		max-height: 85vh;
		overflow-y: auto;
		box-sizing: border-box;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
		text-align: left;
		position: relative;
		animation: modalSlideUp 0.2s ease-out;
	}

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

	.modal-close-x {
		position: absolute;
		top: 15px;
		right: 20px;
		font-size: 1.5em;
		cursor: pointer;
		color: #888;
		transition: color 0.15s;
	}

	.modal-close-x:hover { color: #222; }

	/* Control Dashboard Layout */
	.nav-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
		margin: 30px 0 20px 0;
		user-select: none;
		box-sizing: border-box;
	}

	.nav-action-btn, .nav-arrow-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		font-size: 1.25em;
		font-weight: bold;
		color: #444;
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		border-radius: 6px;
		cursor: pointer;
		text-decoration: none !important;
		transition: all 0.15s ease;
		box-sizing: border-box;
	}

	.nav-arrow-btn {
		font-size: 1.1em;
	}

	.nav-action-btn:hover, .nav-arrow-btn:hover {
		background-color: #ebebeb;
		border-color: #bbb;
		color: #111;
	}

	.nav-title-display {
		min-width: 200px;
		text-align: center;
		font-size: 1.4em;
		font-weight: bold;
		color: #111;
		display: inline-block;
		white-space: nowrap;       
		overflow: hidden;          
		text-overflow: ellipsis;   
	}

	/* Compact width allocation for the year display inside the frozen dashboard bar (all screens) */
	.frozen-header-panel .nav-title-display {
		min-width: 80px !important;
	}

	/* VIEWPORT-LOCKED FLOATING INTERFACE BUTTONS */
	#btnOpenTrackerMenu, #btnOpenHelpMenu, #btnOpenHomeMenu, #btnOpenCalendarMenu, #btnOpenInfoMenu, #btnOpenProtoPortalMenu {
		position: fixed !important;
		left: auto !important;
		top: auto !important;
		right: 30px !important;
		width: 44px !important;
		height: 44px !important;
		background-color: rgba(248, 248, 248, 0.95) !important; 
		border: 1px solid rgba(221, 221, 221, 0.8) !important;
		border-radius: 50% !important; 
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-family: sans-serif !important;
		font-weight: bold !important;
		cursor: pointer !important;
		outline: none !important;
		text-decoration: none !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
		z-index: 99998 !important; /* Pinned safely just underneath active modal windows */
		transition: all 0.2s ease !important;
	}

	#btnOpenSettingsMenu {
		position: fixed !important;
		left: auto !important;
		top: 30px !important;
		right: 30px !important;
		bottom: auto !important;
		width: 44px !important;
		height: 44px !important;
		background-color: rgba(248, 248, 248, 0.95) !important; 
		border: 1px solid rgba(221, 221, 221, 0.8) !important;
		border-radius: 50% !important; 
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-family: sans-serif !important;
		font-weight: bold !important;
		cursor: pointer !important;
		outline: none !important;
		text-decoration: none !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
		z-index: 99998 !important; /* Pinned safely just underneath active modal windows */
		transition: all 0.2s ease !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenTrackerMenu {
		top: auto !important;
		bottom: 150px !important;
		font-size: 1.35em !important;
		line-height: 1 !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenHelpMenu {
		bottom: 90px !important;
		font-size: 1.2em !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenCalendarMenu {
		bottom: 90px !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenInfoMenu {
		bottom: 90px !important;
		font-size: 1.3em !important;
		font-family: serif !important; /* Italic-style serif makes the 'i' look elegant */
		font-style: italic !important;
		line-height: 1 !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenHomeMenu {
		bottom: 30px !important;
		font-size: 1.35em !important;
		line-height: 1 !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#btnOpenProtoPortalMenu {
		bottom: 270px !important;
		color: rgba(68, 68, 68, 0.9) !important;
	}

	#protoPortalDoorPanel {
		fill: rgba(248, 248, 248, 0.95);
		transition: fill 0.2s ease !important;
	}

	#btnOpenProtoPortalMenu:hover #protoPortalDoorPanel {
		fill: #ffffff;
	}

	#btnOpenTrackerMenu:hover, #btnOpenHelpMenu:hover, #btnOpenHomeMenu:hover, #btnOpenCalendarMenu:hover, #btnOpenInfoMenu:hover, #btnOpenSettingsMenu:hover, #btnOpenProtoPortalMenu:hover {
		background-color: #ffffff !important;
		border-color: #a394bc !important;
		color: #111 !important;
		transform: scale(1.05);
		box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
	}

	/* High-visibility hint applied instantly upon freezing the box */
	.tooltip-event-link.initial-hint {
		background-color: rgba(185, 207, 227, 0.25) !important;
	}

	/* Simple helper rule to contract the space in Year View mode */
	.hidden-year-element {
		display: none !important;
	}

	/* Dynamic Toggle Button Styling Options inside Navigation Bar */
	.nav-toggle-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 14px;
		height: 44px;
		font-size: 0.9em;
		font-weight: bold;
		color: #555;
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.15s ease;
		box-sizing: border-box;
		user-select: none;
	}

	.nav-toggle-btn:hover {
		background-color: #ebebeb;
		border-color: #bbb;
		color: #111;
	}

	/* Custom CSS Typography ABC Toggle Icon */
	.custom-abc-icon {
		font-size: 0.85em;
		font-weight: bold;
		letter-spacing: -0.5px;
		color: #444;
		transition: color 0.15s ease;
	}
	#btnToggleTrackerLayoutABC.btn-activated .custom-abc-icon {
		color: #222;
	}

	/* Custom CSS Three-Row Bullet List Icon */
	.custom-bullet-list-icon {
		display: flex !important;
		flex-direction: column;
		gap: 3.5px;
		justify-content: center;
		align-items: flex-start;
		width: 16px;
		height: 12px;
	}
	.custom-bullet-list-row {
		display: flex;
		align-items: center;
		gap: 3px;
		width: 100%;
	}
	.custom-bullet-dot {
		width: 3px;
		height: 3px;
		background-color: #444;
		border-radius: 50%;
		flex-shrink: 0;
		transition: background-color 0.15s ease;
	}
	.custom-bullet-line {
		height: 2px;
		background-color: #444;
		border-radius: 1px;
		width: 10px;
		transition: background-color 0.1s ease;
	}
	#btnToggleTrackerLayoutList.btn-activated .custom-bullet-dot,
	#btnToggleTrackerLayoutList.btn-activated .custom-bullet-line {
		background-color: #222;
	}

	/* Layout Toggle Container inside Modal Box */
	.modal-layout-toggle-bar {
		display: flex;
		gap: 8px;
		margin-bottom: 15px;
		border-bottom: 1px dashed #ddd;
		padding-bottom: 10px;
	}

	/* Spacing adjustments for text elements inside the Milestone Tracking Accordions */
	#trackerModalDynamicListContainer button {
		margin-bottom: 4px !important;
		padding: 11px 16px !important;
		line-height: 1.3 !important;
	}
	#trackerModalDynamicListContainer div[onclick] {
		padding-top: 8px !important;
		padding-bottom: 6px !important;
		letter-spacing: -0.1px;
	}

	/* Modal View Active Highlight Options */
	.modal-nav-toggle-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.15s ease;
		box-sizing: border-box;
	}
	.modal-nav-toggle-btn:hover {
		background-color: #ebebeb;
		border-color: #bbb;
	}
	.modal-nav-toggle-btn.btn-activated {
		background-color: #dadada !important;
		border-color: #b8b8b8 !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* Activated State Highlight Style */
	#btnTogglePeriods.btn-activated {
		background-color: #b9cfe3 !important;
		border-color: #9cb8d6 !important;
		color: #222222 !important;
		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
	}
	#btnToggleYearMode.btn-activated, #btnToggleStatisticsMode.btn-activated, #btnToggleSchoolMode.btn-activated, #btnToggleScrollView.btn-activated, #btnNavOpenTracker.btn-activated {
		background-color: #dadada !important;
		border-color: #b8b8b8 !important;
		color: #222222 !important;
		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	#btnToggleYearMode.btn-activated .custom-grid-icon span {
		background-color: #222;
	}

	#btnToggleScrollView {
		font-size: 2.1em !important;
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}

	/* Custom CSS Staggered Periods/Duration Icon */
	.custom-period-icon {
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 12px;
	}
	.custom-period-icon span {
		background-color: #444;
		border-radius: 1px;
		height: 4px;
		display: block;
		transition: background-color 0.15s ease;
	}
	/* Render exactly two clean staggered blocks—top shifted right, bottom shifted left */
	.custom-period-icon span:nth-child(1) {
		width: 11px;
		align-self: flex-end;
		margin-right: 1px;
	}
	.custom-period-icon span:nth-child(2) {
		width: 11px;
		align-self: flex-start;
		margin-left: 1px;
	}
	/* Hide any accidental extra trace child nodes if present */
	.custom-period-icon span:nth-child(n+3) {
		display: none !important;
	}
	#btnTogglePeriods.btn-activated .custom-period-icon span {
		background-color: #222;
	}

	/* Custom CSS 2x3 Calendar Grid Icon */
	.custom-grid-icon {
		display: inline-grid !important;
		grid-template-columns: repeat(3, 4px);
		grid-template-rows: repeat(2, 4px);
		gap: 2px;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 12px;
	}
	.custom-grid-icon span {
		background-color: #444;
		border-radius: 1px;
		display: block;
		width: 100%;
		height: 100%;
		transition: background-color 0.15s ease;
	}
	#btnToggleYearMode.btn-activated .custom-grid-icon span {
		background-color: #222;
	}

	/* Scroll View Layout Styles */
	.scroll-year-banner {
		font-family: 'Inter', sans-serif;
		font-weight: 700;
		font-size: 1.35em;
		color: #5c4b8e;
		background-color: #f6f4fa; /* Soft delicate grayish-purple */
		border: 1px solid rgba(116, 99, 170, 0.15);
		border-radius: 20px;
		padding: 5px 18px;
		display: inline-block;
		text-align: center;
		margin: 30px auto 15px auto;
		letter-spacing: -0.01em;
		width: auto !important;
		max-width: max-content !important;
		transition: all 0.3s ease;
	}
	.scroll-year-banner-grid {
		max-width: max-content !important;
		margin: 40px auto 15px auto !important;
		text-align: center;
		display: block !important;
	}
	.scroll-month-stack {
		display: flex;
		flex-direction: column;
		gap: 25px;
		align-items: center;
		padding-bottom: 120px;
	}
	.scroll-year-grid {
		padding-bottom: 40px !important;
	}

	/* Minimalist Persistent Event Tracking Highlight Accent */
	.tracked-target-pulse {
		border: 2px solid #2ecc71 !important;
		outline: 2px solid rgba(46, 204, 113, 0.4);
		box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
		animation: targetGlowPulse 2s infinite ease-in-out;
		position: relative;
		z-index: 6;
	}

	@keyframes targetGlowPulse {
		0% { outline-color: rgba(46, 204, 113, 0.4); box-shadow: 0 0 8px rgba(46, 204, 113, 0.5); }
		50% { outline-color: rgba(46, 204, 113, 0.8); box-shadow: 0 0 14px rgba(46, 204, 113, 0.9); }
		100% { outline-color: rgba(46, 204, 113, 0.4); box-shadow: 0 0 8px rgba(46, 204, 113, 0.5); }
	}

	/* Two-Sided Tracking Accent Frame for Multi-Day Period Elements */
	.tracked-period-corner {
		border-top: 2.5px solid #2ecc71 !important;
		border-left: 2.5px solid #2ecc71 !important;
		box-shadow: inset 3px 3px 6px rgba(46, 204, 113, 0.35);
		position: relative;
		z-index: 6;
		cursor: pointer !important;
	}

	.tracked-period-corner:hover {
		background-color: rgba(46, 204, 113, 0.12) !important;
		transform: scale(1.05) !important;
		box-shadow: inset 3px 3px 6px rgba(46, 204, 113, 0.35), 0 4px 10px rgba(46, 204, 113, 0.2) !important;
		z-index: 10 !important;
	}

	/* Prioritize and enhance Present-Day visibility inside active highlighted seasonal periods */
	.current-day.period-weekday,
	.current-day.period-sat,
	.current-day.period-sun,
	.calendar-grid.stats-columns-active .current-day.period-weekday,
	.calendar-grid.stats-columns-active .current-day.period-sat,
	.calendar-grid.stats-columns-active .current-day.period-sun,
	.calendar-grid.stats-school-active .current-day.period-weekday,
	.calendar-grid.stats-school-active .current-day.period-sat,
	.calendar-grid.stats-school-active .current-day.period-sun {
		background-color: #e2daf0 !important;   /* Soft, muted dusty lavender background */
		color: #3f2a56 !important;              /* Dark charcoal-violet text */
		font-weight: bold !important;
		border: 1px solid #a394bc !important;    /* Subtle lavender-grey perimeter line */
		box-shadow: 0 2px 6px rgba(63, 42, 86, 0.15) !important; /* Muted shadow depth */
	}

	/* Restore asymmetric event border indicators for current days with scheduled milestones inside periods */
	.current-day.has-event.period-weekday,
	.current-day.has-event.period-sat,
	.current-day.has-event.period-sun {
		border-bottom: 3px solid #3f2a56 !important; /* Clean dark asymmetric event marker */
		border-right: 3px solid #3f2a56 !important;
		border-top: 1px solid #a394bc !important;
		border-left: 1px solid #a394bc !important;
	}

	/* Slide-away state mechanics for frozen panel */
	.frozen-header-panel {
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	.frozen-header-panel.panel-retracted {
		transform: translateY(-100%);
	}

	/* Larger responsive viewport grab-handle tab */
	.header-grab-handle {
		position: absolute;
		bottom: -28px;
		left: 50%;
		transform: translateX(-50%);
		width: 100px;
		height: 28px;
		background-color: rgba(255, 255, 255, 0.98);
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		pointer-events: auto; /* Active zone when panel is hidden */
	}
	.header-grab-handle::after {
		content: '';
		width: 36px;
		height: 5px;
		background-color: #aaa;
		border-radius: 3px;
		transition: background-color 0.15s;
	}
	.header-grab-handle:hover::after {
		background-color: #7463aa;
	}

	/* Unified Text Content Blocks */
	.content-container {
		max-width: 750px;
		margin: 0 auto;
		text-align: left;
		font-size: 1.05em;
		padding: 20px;
		box-sizing: border-box;
	}

	.indent-block { 
		margin-left: 20px; 
		margin-bottom: 15px; 
	}
	.content-container h1 { 
		font-size: 2.2em; 
		color: #111; 
		margin-bottom: 5px; 
	}
	.content-container h2 { 
		font-size: 1.6em; 
		color: #111; 
		border-bottom: 2px solid #eee; 
		padding-bottom: 8px; 
		margin-top: 35px; 
		margin-bottom: 15px; 
	}
	.content-container p { 
		margin-bottom: 15px; 
		line-height: 1.6;
		color: #333;
	}
	.content-container ul {
		margin-left: 20px;
		padding-left: 0;
		margin-bottom: 15px;
	}
	.content-container li {
		margin-bottom: 8px;
		line-height: 1.6;
	}

	/* Unified Text Screen Action Buttons */
	.menu-btn {
		display: inline-block;
		padding: 12px 20px;
		font-size: 1em;
		font-weight: bold;
		color: #444;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		border-radius: 6px;
		cursor: pointer;
		text-decoration: none;
		transition: all 0.2s ease;
		margin-bottom: 30px;
	}
	.menu-btn:hover {
		background-color: #ebebeb;
		border-color: #ccc;
		color: #111;
		transform: translateY(-1px);
	}

	/* Specific Legend Title Alignment */
	.legend-group-title {
		font-size: 1.15em; 
		color: #111; 
		margin-top: 25px; 
		margin-bottom: 12px; 
		border-bottom: 1px solid #eee; 
		padding-bottom: 5px;
		font-weight: bold;
		text-align: left;
	}
	/* Unified Legend Layout Structure */
	.legend-flex-row {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 14px;
	}

	/* Force Legend Cells to maintain a perfect square shape and kill scaling distortions */
	.legend-flex-row .day-cell {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		max-width: 40px !important;
		max-height: 40px !important;
		line-height: 40px !important;
		display: inline-block !important;
		flex-shrink: 0 !important; /* Locks the horizontal width completely */
		transform: none !important; /* Disables the 1.05 current-day popup zoom */
		box-shadow: none !important; /* Smooths out heavy runtime depths */
		cursor: default !important; /* Drops the link-pointer hand icon */
		pointer-events: none !important; /* Completely kills hover color swaps */
		box-sizing: border-box !important;
		text-align: center;
	}

	/* Force Static Legend Illustration Controls to maintain perfect layout sizing safely */
	.legend-flex-row .nav-arrow-btn,
	.legend-flex-row .nav-action-btn {
		width: 44px !important;
		height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
		cursor: default !important;
		box-sizing: border-box !important;
		background-color: #f8f8f8 !important;
		color: #444 !important;
		border-color: #ddd !important;
	}

	/* Force Floating Help Buttons to stay round and beautifully proportioned */
	.legend-flex-row .floating-help-anchor {
		position: static !important; /* Bypasses viewport corner absolute pinning */
		width: 44px !important;
		height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important; /* Prevents compression */
		cursor: default !important;
		pointer-events: none !important;
		box-sizing: border-box !important;
		background-color: rgba(248, 248, 248, 0.95) !important;
		color: rgba(68, 68, 68, 0.9) !important;
		border: 1px solid rgba(221, 221, 221, 0.8) !important;
		border-radius: 50% !important; /* Enforces a perfect circle button shape */
		box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* Matches floating corner button depth shadow */
	}


	/* Modal Locked Interactive About Portal Transition Banner Button */
	.modal-info-btn {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		border-radius: 8px !important;
		margin-top: 15px !important;
		padding: 12px 16px !important;
		font-family: inherit !important;
		font-style: normal !important;
		font-weight: 600 !important;
		font-size: 0.95em !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background-color: rgba(116, 99, 170, 0.1) !important; /* Elegant theme match */
		border: 1px solid rgba(116, 99, 170, 0.25) !important;
		color: rgb(116, 99, 170) !important;
		cursor: pointer !important;
		outline: none !important;
		text-decoration: none !important;
		box-shadow: none !important;
		z-index: 100000 !important;
		box-sizing: border-box !important;
		transition: all 0.2s ease !important;
	}
	.modal-info-btn:hover {
		background-color: rgba(116, 99, 170, 0.18) !important;
		border-color: rgba(116, 99, 170, 0.4) !important;
		color: rgb(90, 72, 148) !important;
	}
	.desktop-i {
		display: none !important;
	}
	.mobile-info-text {
		display: inline-block !important;
	}

	/* RESPONSIVE VIEWPORT STYLES (Mobile & Tablet Adjustments) */
	@media screen and (max-width: 1024px), screen and (max-width: 1100px) and (max-height: 600px) {
		/* Prevent automatic zooming on iOS/Safari when focusing select dropdowns or inputs */
		select, input, textarea {
			font-size: 16px !important;
		}

		/* Keep mobile modals safely pushed away from bottom screen home indicator bar on iOS */
		.portal-modal-box {
			max-height: 80vh !important;
			margin-bottom: calc(20px + env(safe-area-inset-bottom, 15px)) !important;
		}

		/* 1. Contract the 12-month matrix layout spacing safely */
		.year-grid-container {
			grid-template-columns: repeat(auto-fit, 252px) !important;
			gap: 15px;
			padding: 10px 10px 120px 10px;
		}

		/* 2. Scale down individual month card footprints slightly */
		.month-card {
			width: 252px !important; /* Perfect fit for 10px padding + 232px grid = 252px */
			padding: 10px !important;
			box-sizing: border-box !important;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.scroll-month-stack .month-card {
			width: 252px !important;
		}
		.scroll-year-banner {
			font-size: 1.15em !important;
			padding: 4px 14px !important;
			margin: 25px auto 10px auto !important;
			max-width: max-content !important;
		}
		.scroll-year-banner-grid {
			font-size: 1.15em !important;
			margin: 25px auto 10px auto !important;
			display: block !important;
		}

		.calendar-grid {
			grid-template-columns: repeat(7, 30px) !important;
			gap: 3px !important;
			width: 228px !important; /* 7 * 30 + 6 * 3 = 228px exactly */
			margin-left: auto !important;
			margin-right: auto !important;
		}

		.calendar-grid.stats-columns-active.stats-working-active {
			display: grid !important;
			grid-template-columns: 16px repeat(8, 24px) !important;
			gap: 3px !important;
			width: 232px !important; /* 16px + 8 * 24px + 8 * 3px gap = 232px exactly */
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.calendar-grid.stats-columns-active.stats-school-active {
			display: grid !important;
			grid-template-columns: 16px repeat(7, 24px) !important;
			gap: 3px !important;
			width: 205px !important; /* 16px + 7 * 24px + 7 * 3px gap = 205px exactly */
			margin-left: auto !important;
			margin-right: auto !important;
		}

		.month-card:has(.stats-working-active) {
			width: 272px !important;
		}
		.month-card:has(.stats-school-active) {
			width: 245px !important;
		}
		.month-card.stats-card-active {
			width: 272px !important;
		}
		.month-card.stats-card-active:has(.stats-school-active) {
			width: 245px !important;
		}

		.scroll-month-stack .month-card:has(.stats-working-active),
		.scroll-month-stack .month-card.stats-card-active:not(:has(.stats-school-active)),
		.scroll-month-stack.stats-stack-active .month-card:not(:has(.stats-school-active)) {
			width: 272px !important;
		}
		.scroll-month-stack .month-card:has(.stats-school-active),
		.scroll-month-stack .month-card.stats-card-active:has(.stats-school-active),
		.scroll-month-stack.stats-stack-active .month-card:has(.stats-school-active) {
			width: 245px !important;
		}

		.year-grid-container:has(.stats-working-active) {
			grid-template-columns: repeat(auto-fit, 272px) !important;
		}
		.year-grid-container:has(.stats-school-active) {
			grid-template-columns: repeat(auto-fit, 245px) !important;
		}
		.year-grid-container.stats-grid-active {
			grid-template-columns: repeat(auto-fit, 272px) !important;
		}
		.year-grid-container.stats-grid-active:has(.stats-school-active) {
			grid-template-columns: repeat(auto-fit, 245px) !important;
		}

		.day-cell {
			width: 30px;
			height: 30px;
			line-height: 30px;
			font-size: 0.78em;
		}

		.calendar-grid.stats-columns-active .day-cell,
		.calendar-grid.stats-columns-active .weekly-hours-stat-cell {
			width: 24px !important;
			height: 24px !important;
			aspect-ratio: 1 / 1 !important;
			line-height: 24px !important;
			font-size: 0.68em !important;
		}

		/* Point 2: Smaller week number indicators on mobile with right padding to prevent tight pressing */
		.calendar-grid .week-number-label {
			font-size: 0.65em !important;
			padding-right: 3px !important;
			box-sizing: border-box !important;
			opacity: 0.8 !important;
		}

		.calendar-grid.stats-columns-active .day-name {
			font-size: 0.7em !important;
		}

		/* Responsive styling for rings, flags, and hours badges on mobile */
		.shortened-container::after {
			width: 6px !important;
			height: 6px !important;
			min-width: 6px !important;
			min-height: 6px !important;
			max-width: 6px !important;
			max-height: 6px !important;
			aspect-ratio: 1 / 1 !important;
			top: 2px !important;
			right: 2px !important;
		}
		.solar-eve-container::after {
			width: 5.5px !important;
			height: 5.5px !important;
			min-width: 5.5px !important;
			min-height: 5.5px !important;
			max-width: 5.5px !important;
			max-height: 5.5px !important;
			top: 2px !important;
			right: 2px !important;
			border-top: 1.3px solid #555 !important;
			border-right: 1.3px solid #555 !important;
		}
		.major-celestial-container::before {
			width: 6px !important;
			height: 6px !important;
			min-width: 6px !important;
			min-height: 6px !important;
			max-width: 6px !important;
			max-height: 6px !important;
			aspect-ratio: 1 / 1 !important;
			top: 2px !important;
			left: 2px !important;
		}
		.stat-badge {
			font-size: 0.58em !important;
			bottom: 1.5px !important;
			right: 3px !important;
		}
		.flag-badge {
			font-size: 9.5px !important;
			bottom: 1px !important;
			left: 2px !important;
		}
		.academic-break-ring {
			width: 6px !important;
			height: 6px !important;
			bottom: 1px !important;
			right: 1px !important;
		}
		.term-triangle-badge {
			width: 8px !important;
			height: 8px !important;
			bottom: 0px !important;
			right: 0px !important;
		}

		/* Even smaller indicators for ultra-tight statistics grid (24px cells) on mobile */
		.calendar-grid.stats-columns-active .shortened-container::after {
			width: 4px !important;
			height: 4px !important;
			min-width: 4px !important;
			min-height: 4px !important;
			max-width: 4px !important;
			max-height: 4px !important;
			aspect-ratio: 1 / 1 !important;
			top: 1px !important;
			right: 1px !important;
		}
		.calendar-grid.stats-columns-active .solar-eve-container::after {
			width: 3.5px !important;
			height: 3.5px !important;
			min-width: 3.5px !important;
			min-height: 3.5px !important;
			max-width: 3.5px !important;
			max-height: 3.5px !important;
			top: 1px !important;
			right: 1px !important;
			border-top: 0.9px solid #555 !important;
			border-right: 0.9px solid #555 !important;
		}
		.calendar-grid.stats-columns-active .major-celestial-container::before {
			width: 4px !important;
			height: 4px !important;
			min-width: 4px !important;
			min-height: 4px !important;
			max-width: 4px !important;
			max-height: 4px !important;
			aspect-ratio: 1 / 1 !important;
			top: 1px !important;
			left: 1px !important;
		}
		.calendar-grid.stats-columns-active .stat-badge {
			font-size: 0.42em !important;
			bottom: 0.5px !important;
			right: 1px !important;
		}
		.calendar-grid.stats-columns-active .flag-badge {
			font-size: 6.5px !important;
			bottom: 0.5px !important;
			left: 0.5px !important;
		}
		.calendar-grid.stats-columns-active .academic-break-ring {
			width: 4.5px !important;
			height: 4.5px !important;
			bottom: 0.5px !important;
			right: 0.5px !important;
		}
		.calendar-grid.stats-columns-active .term-triangle-badge {
			width: 6px !important;
			height: 6px !important;
			bottom: 0px !important;
			right: 0px !important;
		}

		/* Thinned asymmetric event borders specifically for statistics mode on mobile to prevent overlaps in 24px cells */
		.calendar-grid.stats-columns-active .has-event {
			border-bottom: 2px solid #666 !important;
			border-right: 2px solid #666 !important;
		}
		.calendar-grid.stats-columns-active .current-day.has-event {
			border-bottom: 2px solid #333 !important;
			border-right: 2px solid #333 !important;
		}
		.calendar-grid.stats-columns-active .current-day.has-event.period-weekday,
		.calendar-grid.stats-columns-active .current-day.has-event.period-sat,
		.calendar-grid.stats-columns-active .current-day.has-event.period-sun {
			border-bottom: 2px solid #3f2a56 !important;
			border-right: 2px solid #3f2a56 !important;
		}

		/* Proportional styling to scale down and fit tooltips safely on mobile viewports */
		#customTooltip, #yearViewToolTip {
			padding: 8px 10px !important;
			font-size: 0.85em !important;
			max-width: 200px !important;
			border-radius: 6px !important;
		}

		.tooltip-event-link {
			padding: 4px 6px !important;
			margin: 2px 0 !important;
		}

		.tooltip-close-x {
			width: 18px !important;
			height: 18px !important;
			line-height: 16px !important;
			font-size: 0.8em !important;
			top: -8px !important;
			right: -8px !important;
		}

		/* 3. Streamline the sticky top panel to maximize viewable canvas area */
		.sticky-active-body {
			padding-top: 140px;
		}

		.frozen-header-panel {
			padding: 8px 0 6px 0;
		}

		/* 4. Precision Responsive Dual-Row Grid Control Panel layout */
		.nav-container {
			display: grid !important;
			grid-template-columns: repeat(6, 1fr) !important;
			justify-content: center !important;
			gap: 8px 6px !important;
			margin: 10px auto !important;
			width: 92% !important;
			max-width: 270px !important;
			padding: 0 !important;
			box-sizing: border-box !important;
		}

		/* Resize the buttons on mobile to be beautiful responsive touch circles or squares, perfectly sized! */
		.nav-action-btn, .nav-arrow-btn {
			width: 100% !important;
			aspect-ratio: 1 / 1 !important;
			max-width: 36px !important;
			max-height: 36px !important;
			height: auto !important;
			font-size: 0.95em !important;
			margin: 0 auto !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			box-sizing: border-box !important;
		}

		/* Interactive touch feedback for navigation and settings buttons */
		.nav-action-btn:active, .nav-arrow-btn:active {
			transform: scale(0.9) !important;
			background-color: #ededed !important;
		}

		.nav-title-display {
			grid-row: 1 !important;
			grid-column: 2 / span 4 !important;
			min-width: 0 !important;
			width: 100% !important;
			text-align: center !important;
			font-size: 1.12em !important;
			align-self: center !important;
			margin: 0 !important;
		}

		/* Precise CSS Grid mapping for buttons */
		.nav-container button[onclick="changeMonth(-1)"] {
			grid-row: 1 !important;
			grid-column: 1 !important;
		}

		.nav-container button[onclick="changeMonth(1)"] {
			grid-row: 1 !important;
			grid-column: 6 !important;
		}

		#btnTogglePeriods {
			grid-row: 2 !important;
			grid-column: 1 !important;
		}

		#btnToggleStatisticsMode {
			grid-row: 2 !important;
			grid-column: 2 !important;
		}

		#btnNavOpenTracker {
			grid-row: 2 !important;
			grid-column: 3 !important;
		}

		.nav-container button[onclick="snapPortalToPresentDay()"] {
			grid-row: 2 !important;
			grid-column: 4 !important;
		}

		#btnToggleYearMode {
			grid-row: 2 !important;
			grid-column: 5 !important;
		}

		#btnToggleScrollView {
			grid-row: 2 !important;
			grid-column: 6 !important;
		}

		/* 5. Clean up content blocks padding and headers on narrow screens */
		.content-container {
			padding: 15px;
			font-size: 1em;
		}

		.portal-title {
			font-size: 2.2em !important;
			margin-bottom: 8px !important;
		}

		#calendarStatisticsPanel.stats-panel-minimized-mode {
			position: fixed !important;
			bottom: 15px !important;
			left: 15px !important;
			right: auto !important;
			top: auto !important;
			width: 44px !important;
			height: 44px !important;
			min-width: 44px !important;
			min-height: 44px !important;
			max-width: 44px !important;
			max-height: 44px !important;
			border-radius: 50% !important;
			margin: 0 !important;
			padding: 0 !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			box-sizing: border-box !important;
			box-shadow: 0 4px 12px rgba(63, 42, 86, 0.15) !important;
			background: #e2daf0 !important; /* Soft, muted dusty lavender background */
			color: #3f2a56 !important; /* Dark charcoal-violet text */
			border: 1px solid #a394bc !important; /* Subtle lavender-grey perimeter line */
			cursor: pointer !important;
			z-index: 1000005 !important; /* Elevated priority above the calendar cells and events */
			pointer-events: auto !important;
		}

		#calendarStatisticsPanel.stats-panel-minimized-mode:active {
			transform: scale(0.9) !important;
			background-color: #d1c4e9 !important;
		}

		/* Optimize Year Stats modal layout, making it thinner and highly compact on mobile screens */
		#calendarStatisticsPanel.stats-panel-modal-mode {
			width: 85% !important;
			max-width: 310px !important;
			padding: 14px !important;
			border-radius: 8px !important;
		}

		/* Compact inline stats panel in monthly view for mobile */
		#calendarStatisticsPanel:not(.stats-panel-modal-mode):not(.stats-panel-minimized-mode) {
			max-width: 272px !important;
			padding: 12px !important;
			margin: 15px auto 10px auto !important;
			border-radius: 8px !important;
			width: 100% !important;
			box-sizing: border-box !important;
		}

		/* Title scaling on mobile stats modal and inline panel */
		#calendarStatisticsHeaderTitle {
			font-size: 0.9em !important;
		}

		#calendarStatisticsHeaderContainer {
			margin-bottom: 10px !important;
			padding-bottom: 4px !important;
		}

		/* Compact metrics grids with tighter cells and smaller gap */
		#calendarStatisticsMetricsGrid {
			grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
			gap: 8px !important;
		}

		#calendarStatisticsMetricsGrid > div {
			padding: 8px 10px !important;
			border-left-width: 3px !important;
		}

		#calendarStatisticsMetricsGrid > div > div:first-child {
			font-size: 0.72em !important;
		}

		#calendarStatisticsMetricsGrid > div > div:last-child {
			font-size: 1.35em !important;
			margin-top: 2px !important;
		}

		/* Thinner and narrower sub breakdown details */
		#calendarStatisticsSubBreakdown {
			margin-top: 10px !important;
			padding-top: 10px !important;
			gap: 8px !important;
		}

		#calendarStatisticsSubBreakdown > div:first-child {
			font-size: 0.72em !important;
			width: 100% !important;
			text-align: center !important;
			margin-bottom: 2px !important;
		}

		#calendarStatisticsSubBreakdown > div:last-child {
			gap: 6px !important;
			justify-content: center !important;
			width: 100% !important;
		}

		#calendarStatisticsSubBreakdown > div:last-child > div {
			padding: 3px 8px !important;
			font-size: 0.75em !important;
			border-radius: 12px !important;
		}

		/* 7. Re-position and level out floating sidebar buttons to a clean bottom-dock row */
		#floatingButtonsDock {
			position: fixed !important;
			bottom: 15px !important;
			right: 15px !important;
			top: auto !important;
			left: auto !important;
			display: flex !important;
			flex-direction: row-reverse !important; /* Stack items horizontally from right to left */
			gap: 10px !important;
			align-items: center !important;
			justify-content: flex-start !important;
			z-index: 99998 !important;
			pointer-events: none !important; /* Let clicks pass through empty spacing */
		}

		#floatingButtonsDock button {
			position: static !important; /* Discard absolute/fixed coordinates (ignore top/bottom/right settings) */
			width: 44px !important;
			height: 44px !important;
			border-radius: 50% !important;
			margin: 0 !important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			align-self: center !important;
			vertical-align: middle !important;
			pointer-events: auto !important; /* Restore touch target cursor events */
			box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
		}

		/* Mobile touch/active downscale animations for buttons */
		#floatingButtonsDock button:active {
			transform: scale(0.9) !important;
			background-color: #ededed !important;
		}

		/* Tactile Micro-interaction: Scale down calendar days when touched/pressed down */
		.day-cell {
			transition: background-color 0.1s ease, transform 0.1s ease !important;
		}
		.day-cell:active {
			transform: scale(0.92) !important;
			background-color: rgba(185, 207, 227, 0.4) !important;
		}

		/* Touch friendly modal close triggers */
		.modal-close-x {
			padding: 10px !important;
			top: 8px !important;
			right: 12px !important;
		}
	}

	/* Smooth Screen View Fade-In Transitions */
	.fade-in-portal-view {
		animation: portalViewFade 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	@keyframes portalViewFade {
		from { opacity: 0; transform: translateY(2px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Smooth interactive background tint overlays for the Milestone Tracking Panel list buttons */
	#trackerModalDynamicListContainer button {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
	}

	#trackerModalDynamicListContainer button:hover {
		background-color: rgba(185, 207, 227, 0.25) !important;
		border-color: #a394bc !important; /* Subtle lavender-grey perimeter perimeter highlights */
		color: #3f2a56 !important; /* Dark charcoal-violet text focus selection */
	}

	/* Ensure the tracker milestone list modal also locks onto the visible viewport glass */
	#trackerSelectorModal {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		z-index: 99999 !important;
	}



	/* Frameworkless week numbers styling mapping */
	.calendar-grid .week-number-label {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8em;
		color: #bcbcbc; /* Faint grey text */
		font-weight: normal;
		user-select: none;
		cursor: default;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* Real-Time Floating Statistics Panel Modes (Year View Only) & Specific High-Priority Rules */
	#calendarStatisticsPanel.stats-panel-modal-mode {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		z-index: 1000005 !important; /* Kept safely above the backdrop and standard modals */
		width: 90% !important;
		max-width: 520px !important;
		margin: 0 !important;
		background: #ffffff !important;
		border: none !important;
		border-top: 5px solid #7463aa !important;
		border-radius: 12px !important;
		padding: 24px !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
		animation: statsModalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
		box-sizing: border-box !important;
		display: block !important;
	}

	@keyframes statsModalSlideUp {
		from { transform: translate(-50%, -45%) !important; opacity: 0; }
		to { transform: translate(-50%, -50%) !important; opacity: 1; }
	}

	@media screen and (min-width: 1025px) {
		#calendarStatisticsPanel.stats-panel-minimized-mode {
			position: fixed !important;
			bottom: 30px !important;
			left: 30px !important;
			top: auto !important;
			right: auto !important;
			transform: none !important;
			z-index: 1000005 !important;
			width: 44px !important;
			height: 44px !important;
			min-width: 44px !important;
			min-height: 44px !important;
			max-width: 44px !important;
			max-height: 44px !important;
			margin: 0 !important;
			background: #e2daf0 !important; /* Soft, muted dusty lavender background */
			color: #3f2a56 !important; /* Dark charcoal-violet text */
			border: 1px solid #a394bc !important; /* Subtle lavender-grey perimeter line */
			border-radius: 50% !important; /* Rounded circle FAB */
			padding: 0 !important;
			box-shadow: 0 4px 12px rgba(63, 42, 86, 0.15) !important;
			cursor: pointer !important;
			transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
			overflow: hidden !important;
			animation: statsFadIn 0.3s ease-out !important;
			box-sizing: border-box !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}

		@keyframes statsFadIn {
			from { opacity: 0; transform: translateY(10px) !important; }
			to { opacity: 1; transform: translateY(0) !important; }
		}

		#calendarStatisticsPanel.stats-panel-minimized-mode:hover {
			background: #d4c8e8 !important; /* Slightly darker dusty lavender on hover */
			border-color: #9281b0 !important;
			transform: translateY(-3px) !important;
			box-shadow: 0 6px 16px rgba(63, 42, 86, 0.22) !important;
		}
	}

	/* Sub-elements hidden state when minimized */
	#calendarStatisticsPanel.stats-panel-minimized-mode #calendarStatisticsHeaderContainer,
	#calendarStatisticsPanel.stats-panel-minimized-mode #calendarStatisticsMetricsGrid,
	#calendarStatisticsPanel.stats-panel-minimized-mode #calendarStatisticsSubBreakdown {
		display: none !important;
	}

	/* Pill trigger visible only when minimized */
	#calendarStatisticsPanel .stats-minimized-pill-trigger {
		display: none !important;
	}

	#calendarStatisticsPanel.stats-panel-minimized-mode .stats-minimized-pill-trigger {
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 1.25em;
		text-align: center;
		width: 100%;
		height: 100%;
	}

	/* --- iOS-Style Sliding Toggle Switch Layout Mechanics --- */
	.ios-switch-anchor {
		position: relative;
		display: inline-block;
		width: 46px;
		height: 26px;
		flex-shrink: 0;
	}
	.ios-switch-anchor input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	.ios-switch-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #e2e2e2;
		transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 30px;
	}
	.ios-switch-slider::before {
		position: absolute;
		content: "";
		height: 22px;
		width: 22px;
		left: 2px;
		bottom: 2px;
		background-color: #ffffff;
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 50%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}
	.ios-switch-anchor input:checked + .ios-switch-slider {
		background-color: #2ecc71; /* High-visibility active green accent tone */
	}
	.ios-switch-anchor input#toggleCleanView:checked + .ios-switch-slider {
		background-color: #7463aa !important; /* Elegant lavender active color for Clean View */
	}
	.ios-switch-anchor input:checked + .ios-switch-slider::before {
		transform: translateX(20px);
	}

	/* Force perfect alignment and kill inherited center text rules */
	#nationalBridgeRow {
		display: none;
		box-sizing: border-box !important;
		width: 100% !important;
		padding: 10px 14px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important; /* Forces the text to snap perfectly flush left */
	}
	
	/* Layout position anchor patch to lock the shift-reduction badge into the cell corners */
	.day-cell {
		position: relative !important;
	}

	/* Stats Clock Icon Visual Styling */
	.stats-clock-icon {
		display: inline-block !important;
		width: 12px !important;
		height: 12px !important;
		vertical-align: middle !important;
		margin: 0 auto !important;
	}

	/* Other Month Days in Statistics-View Mode */
	.day-cell.other-month-day {
		color: #bbb !important;
		border-color: #ededed !important;
		background-color: #fafafa !important;
		cursor: default !important;
		pointer-events: none !important;
		opacity: 0.5;
	}

	/* Settings Info/Help interactive action buttons */
	.settings-help-trigger {
		cursor: pointer;
		color: #7463aa;
		font-weight: normal;
		margin-left: 5px;
		font-size: 0.95em;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: rgba(116, 99, 170, 0.08);
		vertical-align: middle;
		transition: all 0.15s ease-in-out;
		user-select: none;
	}

	.settings-help-trigger:hover {
		background: #7463aa;
		color: #ffffff;
		transform: scale(1.15);
	}

	/* Responsive Calendar Settings Modal Styles for Narrow Viewports */
	.settings-row {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		gap: 10px !important;
		flex-wrap: nowrap !important;
		box-sizing: border-box !important;
	}

	.settings-color-selectors {
		display: flex !important;
		gap: 10px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.settings-color-previews {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	@media screen and (max-width: 480px) {
		/* Wrap/stack rows on mobile */
		.settings-row {
			flex-wrap: wrap !important;
		}

		/* Expand portal modal box on narrow viewports and reduce paddings */
		.portal-modal-box {
			width: calc(100% - 24px) !important;
			max-width: calc(100% - 24px) !important;
			padding: 20px 16px !important;
			margin: 12px auto !important;
		}

		/* Wrap/stack dropdown controls inside settings rows */
		.settings-row select {
			width: 100% !important;
			min-width: 100% !important;
			box-sizing: border-box !important;
			margin-top: 5px !important;
		}

		/* Stack the 3 color selectors vertically */
		.settings-color-selectors {
			flex-direction: column !important;
			gap: 12px !important;
		}

		.settings-color-selectors > div {
			width: 100% !important;
			flex: none !important;
		}

		/* Make color preview items space out nicely when wrapping */
		.settings-color-previews {
			gap: 10px 14px !important;
		}
	}

	/* Circular checkbox style (looks like a radio button with a solid ring and dot) */
	input[type="checkbox"].circular-checkbox {
		appearance: none;
		-webkit-appearance: none;
		width: 13px;
		height: 13px;
		border: 1.5px solid #3f72af;
		border-radius: 50%;
		outline: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background-color: #fff;
		transition: background-color 0.15s, border-color 0.15s;
		vertical-align: middle;
		margin: 0;
		flex-shrink: 0;
	}

	input[type="checkbox"].circular-checkbox:checked {
		background-color: #fff;
		border-color: #3f72af;
	}

	input[type="checkbox"].circular-checkbox:checked::after {
		content: '';
		width: 5px;
		height: 5px;
		background-color: #3f72af;
		border-radius: 50%;
		display: block;
	}