/* ------------------ Global Reset ------------------ */
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
			font-family: sans-serif;
			line-height: 1.6;
			color: black;
			font-size: 25px;
		}

		/* ------------------ Background ------------------ */
		body {
			min-height: 100vh;
			background-image: url("https://sailteck.com/webapp/images/background_landscape_pale_cropped.jpg");
			background-size: cover;
			/* fills screen while keeping aspect ratio */
			background-position: center;
			/* centered crop */
			background-repeat: no-repeat;
			background-attachment: fixed;
			/* optional parallax effect */
			display: flex;
			justify-content: flex-start;
			font-size: 25px;
		}

		/* ------------------ Page Content Panel ------------------ */
		.page-content {
			margin: 10px;
			padding: 10px;
			border-radius: 8px;
			box-sizing: border-box;
		}

		/* ------------------ Bottom-right text ------------------ */
		.bottom-right-text {
			position: fixed;
			bottom: 20px;
			right: 20px;
			background-color: #333;
			color: #fff;
			padding: 10px 15px;
			border-radius: 8px;
			font-family: sans-serif;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			z-index: 1000;
		}

		.btn {
			-webkit-text-size-adjust: 100%;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			direction: ltr;
			-webkit-font-smoothing: antialiased;
			hyphens: manual;
			word-wrap: break-word;
			outline: none !important;
			margin: 0;
			-webkit-appearance: button;
			text-align: center;
			vertical-align: middle;
			user-select: none;
			border: 1px solid transparent;
			transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
			font-size: .8888888889rem;
			font-weight: 500;
			align-items: center;
			justify-content: center;
			min-height: 2.7777777778rem;
			padding: .2777777778rem 1.9444444444rem;
			width: fit-content;
			font-family: Montserrat, sans-serif;
			letter-spacing: .0555555556rem;
			line-height: 1.2;
			color: #fff;
			background: #060f36;
			border-color: #060f36;
			border-radius: 0;
			box-sizing: border-box;
			cursor: pointer;
			display: inline;
		}

		.btn:hover {
			-webkit-text-size-adjust: 100%;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			direction: ltr;
			-webkit-font-smoothing: antialiased;
			hyphens: manual;
			word-wrap: break-word;
			outline: none !important;
			margin: 0;
			-webkit-appearance: button;
			text-align: center;
			vertical-align: middle;
			user-select: none;
			border: 1px solid transparent;
			transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
			font-size: .8888888889rem;
			font-weight: 500;
			align-items: center;
			justify-content: center;
			min-height: 2.7777777778rem;
			padding: .2777777778rem 1.9444444444rem;
			width: fit-content;
			font-family: Montserrat, sans-serif;
			letter-spacing: .0555555556rem;
			line-height: 1.2;
			border-radius: 0;
			box-sizing: border-box;
			text-decoration: none;
			cursor: pointer;
			border-color: red;
			background: red;
			color: #fff !important;
			display: inline;
		}

		.btn:disabled {
			background-color: #cccccc;
			/* Grey out the background */
			color: #666666;
			/* Dim the text color */
			cursor: not-allowed;
			/* Show a 'blocked' cursor icon */
			opacity: 0.6;
			/* Make it look faded */
			border-color: #999999;

			/* If you have hover effects, you might want to disable them too */
			pointer-events: none;
			/* Prevents any hover/click interactions */
		}

		#btnConnect {
			display: block;
			/* Override 'inline' */
			margin-left: auto;
			/* Push from left */
			margin-right: auto;
			/* Push from right */
		}

		#btnStartStreaming {
			display: block;
			/* Override 'inline' */
			margin-left: auto;
			/* Push from left */
			margin-right: auto;
			/* Push from right */
		}

		#btnBroadcastStartSignal {
			display: block;
			/* Override 'inline' */
			margin-left: auto;
			/* Push from left */
			margin-right: auto;
			/* Push from right */
		}

		#outputButtonGroup {
			display: flex;
			/* Turns on the flexbox layout */
			justify-content: center;
			/* Centers the buttons horizontally as a group */
			align-items: center;
			/* Ensures they are aligned vertically (if one is taller) */
			gap: 15px;
			/* Puts a 15px space between the buttons */
			margin-top: 20px;
			/* Optional: adds some breathing room above the group */
			width: 100%;
			/* Ensures the group has the full width to center within */
		}

		.controls {
			margin-bottom: 20px;
		}

		/* ------------------ Status ------------------ */
		#status {
			font-weight: bold;
			color: #000;
		}

		#statusDiv {
			display: flex;
			/* Activates Flexbox layout */
			align-items: center;
			/* Vertically centers all children */
			gap: 20px;
			/* Adds space between the text and image */
		}


		/* ------------------ Heading ------------------------ */
		.side-by-side-container {
			display: flex;
			/* Activates Flexbox */
			align-items: center;
			/* Vertically centers the text relative to the image */
			gap: 15px;
			/* Creates a consistent space between the image and text */
			padding: 0px;
		}

		h1 {
			font-size: 50px;
			/* Adjust this number to your preference */
		}

		/* ------------------ Please wait gif ------------------ */
		#pleaseWait-image {
			height: 100%;
			background: #060f36;
			width: 25px;
			transition: width 0.3s ease;
			visibility: hidden;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
		}

		th,
		td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: left;
		}

		th {
			background-color: #f4f4f4;
		}

		#startDate {
			font-size: 1.4em;
			/* text size */
			padding: 0.1em;
			/* inner spacing */
			height: 1.8em;
			/* overall height */
		}

		/* ------------------ Log Box ------------------ */
		#logBox {
			height: 350px;
			overflow-y: auto;
			background: #111;
			color: #0f0;
			padding: 10px;
			border-radius: 6px;
			font-family: monospace;
			text-align: left;
		}


		/* ------------------ Progress Bar ------------------ */
		.progress-container {
			/*	width: max(100%, 320px); */
			height: 20px;
			background: #eee;
			border-radius: 10px;
			overflow: hidden;
			margin: 20px 0;
			display: flex;
			justify-content: flex-start;
		}

		#progress-bar {
			height: 100%;
			width: 0%;
			background: #4caf50;
			transition: width 0.3s ease;
		}


		/* Target both date and time inputs */
		input[type="date"],
		input[type="text"],
		input[type="time"] {
			/* 1. Increase the overall box size */
			padding: 12px 20px;
			width: 100%;
			/* Optional: makes it responsive */
			max-width: 300px;

			/* 2. Increase the text size */
			font-size: 1.2rem;
			font-family: Arial, sans-serif;

			/* 3. Style the border and corners */
			border: 2px solid #ccc;
			border-radius: 8px;

			/* 4. Improve focus state for accessibility */
			outline: none;
			transition: border-color 0.3s ease;
		}



		/* ------------------ Step progress styles -------------------------------- */
		#progress-container {
			display: flex;
			/* position: fixed; */
			top: 0;
			left: 0;
			width: 100%;
			height: 16px;
			background-color: #e0e0e0;
			gap: 4px;
			/* Small gap between segments */
			z-index: 1000;
		}

		.progress-step {
			flex: 1;
			background-color: transparent;
			transition: background-color 0.4s ease;
		}

		/* Color for completed/current steps */
		.progress-step.active {
			background-color: #4CAF50;
			/* Green */
		}

		/* ------------------ Step styles -------------------------------- */
		/* Hide all steps by default */
		.step {
			display: none;
			height: auto;          /* Changed from 100% to auto to let it shrink to its content */
			max-height: 100%;      /* Ensures it never grows taller than the parent container */
			box-sizing: border-box;
		}

		.step.active {
			display: flex;
			flex-direction: column;
			justify-content: flex-start; /* Aligns content to the top instead of pushing it out from the center */
			align-items: center;    /* Keeps elements centered horizontally */
			gap: 12px;              /* Replaces heavy paragraph margins with a tight, controlled gap */
		}

		/* Tweak the internal paragraph margins to prevent them from forcing extra height */
		.step p {
			margin-top: 0;
			margin-bottom: 0;
			width: 100%;            /* Keeps text aligned properly if you have text-align: left */
		}

		/* High contrast button layout tweak */
		.step .btn {
			margin-top: 8px;        /* Small breathing room above the button */
			flex-shrink: 0;         /* Prevents the button from squishing on tiny screens */
		}


		/* --------------------------- Sophisticated step progress indicator ------------- */
		#stepper-wrapper {
			position: relative;
			top: 0px;
			/* Give it some space from the very top */
			width: 80%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20px auto;
			/* Centered in page flow */
			/* Padding equals half the dot width (12px / 2 = 6px) */
			padding: 0 6px;
		}

		/* The Horizontal Line created via CSS Pseudo-element */
		#stepper-wrapper::before {
			content: "";
			position: absolute;
			/* Pull it back so it aligns with the padding */
			left: 6px;
			right: 6px;
			top: 50%;
			transform: translateY(-50%);
			height: 2px;
			background-color: rgba(255, 255, 255, 0.3);
			z-index: 1;
		}

		/* The horizontal white line */
		.stepper-line {
			position: absolute;
			top: 48px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: rgba(255, 255, 255, 0.3);
			z-index: 1;
		}

		/* The dots */
		.dot {
			width: 12px;
			height: 12px;
			background-color: transparent;
			border: 2px solid white;
			border-radius: 50%;
			z-index: 2;
			cursor: pointer;
			position: relative;
			transition: background-color 0.3s ease;
		}

		/* Solid white when active/completed */
		.dot.active {
			background-color: white;
		}

		/* The specific current step grows larger */
		.dot.current {
			transform: scale(1.6);
			/* Makes it 60% larger */
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
			border: 2px solid #fff;
		}

		/* The description text (hidden by default) */
		.dot-desc {
			display: none;
			position: absolute;
			top: 25px;
			left: 50%;
			transform: translateX(-50%);
			color: white;
			width: 120px;
			/* Set a fixed width */
			white-space: normal;
			/* Allow text to wrap to the next line */
			text-align: center;
			/* Keep the text centered within the box */
			line-height: 1.2;
			/* Improve readability for wrapped lines */
			font-size: 14px;
			font-family: sans-serif;
			background: rgba(0, 0, 0, 0.7);
			padding: 4px 8px;
			border-radius: 4px;
		}

		/* Show text when dot is tapped/clicked */
		.dot.show-text .dot-desc {
			display: block;
		}

		/* ------------------ Responsive Media Queries ------------------ */

		/* 1. DEFAULT STYLES (Desktop / Landscape / Wide) 
		   Write these first so they act as the baseline. */

		.container {
			display: flex;
			width: 100%;
			height: 100vh;
			margin: 0;
			overflow: hidden;
		}

		.LiveLinkApp {
			flex: 0 0 auto;
			width: 50%;
			padding: 20px;
			overflow-y: auto;
			box-sizing: border-box;
			position: relative;
			/* Required so the overlay can use position:absolute */
		}

		/* ------------------ Log Overlay ------------------ */
		.log-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50%;
			z-index: 500;
			background: rgba(10, 12, 20, 0.97);
			border-top: 2px solid #1e3a5f;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 0;
			animation: slideUpLog 0.2s ease;
		}

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

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

		.log-overlay.log-hidden {
			display: none;
		}

		.log-overlay-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 6px 16px;
			background: #0d1b2a;
			border-bottom: 1px solid #1e3a5f;
			flex-shrink: 0;
		}

		.log-overlay-title {
			font-family: monospace;
			font-size: 11px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: #5b8db8;
			font-weight: bold;
		}

		.log-close-btn {
			background: none;
			border: none;
			color: #5b8db8;
			font-size: 16px;
			cursor: pointer;
			padding: 2px 6px;
			line-height: 1;
			border-radius: 4px;
			transition: background 0.15s;
		}

		.log-close-btn:hover {
			background: rgba(91, 141, 184, 0.2);
		}

		#logBox {
			flex: 1;
			overflow-y: auto;
			margin: 0;
			padding: 12px 16px;
			background: transparent;
			color: #39ff8f;
			font-family: 'Courier New', Courier, monospace;
			font-size: 12px;
			line-height: 1.55;
			border-radius: 0;
			white-space: pre-wrap;
			word-break: break-all;
		}

		/* Toggle button — pinned to bottom-left of left panel */
		.log-toggle-btn {
			position: fixed; /* Changed from absolute to fixed */
			bottom: 16px;
			left: 16px;
			z-index: 501; /* Keeps it on top of other content */
			background: #0d1b2a;
			color: #ffffff;
			border: 1px solid #ffffff;
			border-radius: 6px;
			padding: 5px 14px;
			font-family: monospace;
			font-size: 11px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.15s, color 0.15s;
		}

		.log-toggle-btn:hover {
			background: #1e3a5f;
			color: #a8d4ff;
		}

		.resizer {
			width: 10px;
			background: #ccc;
			cursor: col-resize;
			flex: 0 0 auto;
			position: relative;
			z-index: 1000;
		}

		.resizer::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 2px;
			height: 40px;
			background: #888;
			border-radius: 1px;
		}

		.resizer:hover,
		.resizer:active {
			background: #bbb;
		}

		.TractracFrame {
			flex: 1 1 auto;
			display: block;
			/* Ensure it shows on desktop */
			border: none;
			width: 0;
			/* Let flex-grow handle it */
			height: 100%;
		}

		@media (max-width: 1000px),
		(orientation: portrait) {

			.TractracFrame,
			.resizer {
				display: none !important;
			}

			.LiveLinkApp {
				position: relative;
				flex: 0 0 100% !important;
				width: 100% !important;
				max-width: 100% !important;
				border-right: none;
				/* Optional: removes the divider line */
			}

			/* Your other mobile-specific tweaks */
			.page-content {
				width: 90%;
				margin: 10px;
				padding: 5px;
			}

			.progress-container {
				width: 100%;
			}

			button,
			input {
				width: 100%;
				margin: 5px 0;
			}

			#logBox {
				height: 350px;
			}

			h1 {
				font-size: 1.0em;
				color: red !important;
			}

			.side-by-side-container {
				display: flex;
				align-items: center;
				gap: 15px;
				padding: 10px;
			}

			#imageLogo {
				width: 150px;
			}

			body {
				background-image: url("https://sailteck.com/webapp/images/background_portrait_pale_cropped.jpg");
				font-size: 12px;
			}
		}

		/* Tablets / small screens landscape specifically */
		@media (max-width: 1024px) and (orientation: landscape) {
			.page-content {
				width: 100%;
				margin: 15px;
			}
		}

		/* --------------------------- Logo Style ---------------------------------------- */
		.logo-container {
			font-family: 'Michroma', sans-serif;
			font-size: 40px;
			font-weight: 400;
			color: #000000;
			display: flex;
			/* NEW: Allows items to move to the next line */
			flex-wrap: wrap;
			/* Changed to baseline so the text sits on the same "floor" */
			align-items: baseline;
			letter-spacing: -1px;
		}

		.logo-group {
			/* NEW: Prevents "SAILTECK" and "LIVE" from ever separating */
			white-space: nowrap;
			display: flex;
			align-items: flex-start;
			margin-right: 15px;
			/* Adjusts the space before "Flag Boat App" */
		}

		.live-tag {
			color: #FF0000;
			font-family: Arial, sans-serif;
			font-weight: 900;
			font-size: 0.45em;
			margin-left: 4px;
			line-height: 1;
			padding-top: 2px;
		}

		.tagline-group {
			/* Optional: If you want the tagline to be a different font/size */
			white-space: nowrap;
		}



















		/* Ruggedized Time Picker Box — Flattened & Reduced Vertical Footprint */
		.picker-container {
			background: transparent;     /* Removed var(--panel-bg) */
			border: none;                /* Removed structural borders */
			border-radius: 0;            /* Reset border radius */
			padding: 0;                  /* Removed heavy internal margins to collapse vertical space */
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			box-shadow: none;            /* Removed the 3D heavy drop shadow */
		}

		.picker-header {
			font-family: monospace;
			font-size: 0.75rem;
			letter-spacing: 0.15em;
			color: var(--text-muted);
			margin-bottom: 0.25rem;   /* Halved spacing below header text */
			width: 100%;
			text-align: center;
			font-weight: bold;
		}

		/* Changed from horizontal row to a vertical column stack */
		.picker-body {
			display: flex;
			flex-direction: column;   /* Stacks Up-Btn, Time-Row, and Down-Btn vertically */
			align-items: center;      /* Centers the nudge buttons horizontally over the digits */
			gap: 0.25rem;             /* CRUCIAL: Dropped from 0.75rem to pull buttons tightly against text */
		}

		/* Structural grouping wrapper for an individual clock block */
		.picker-clock-block {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		/* Horizontal alignment for an internal digit stack */
		.picker-digits-group {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 0.5rem;
		}
		
		/* Subtle architectural divider line between the two time zones */
		/* Bolder architectural center divider line */
		.picker-clock-divider {
			width: 3px;              /* Increased from 1px to 3px for a bolder presence */
			height: 42px;            /* Slightly shortened to match the visual height of the digits */
			background: #475569;     /* A slightly brighter, higher-contrast structural slate color */
			align-self: center;
			margin-bottom: 0.65rem;  /* Keeps it balanced in the layout row */
			border-radius: 2px;      /* Softens the edges of the bolder line slightly */
		}

		/* Small, high-contrast title indicator for UTC vs LOCAL zone labels */
		/* Tighten the gap below the UTC / LOCAL zone titles */
		.picker-clock-title {
			font-family: monospace;
			font-size: 0.65rem;
			font-weight: bold;
			letter-spacing: 0.1em;
			color: var(--text-muted);
			margin-bottom: -0.4rem;  /* Changed to a negative margin to pull digits upward */
			text-transform: uppercase;
			z-index: 2;
		}
		
		/* New helper row to hold the horizontal digits and separator */
		.picker-time-row {
			display: flex;
			flex-direction: row;
			align-items: flex-end; /* Aligns the clocks evenly along their base baselines */
			gap: 1.5rem;              /* Retains your wide spacing safety buffer for touch accuracy */
		}

		.picker-column {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0;                   /* Collapsed gaps inside the column stack */
		}

		/* Clear visual anchor between columns */
		/* Precision vertical alignment for the colon separator */
		.picker-separator {
			font-family: 'Courier New', Courier, monospace;
			font-size: 2.5rem;
			color: var(--text-muted);
			line-height: 1;          /* Hard reset to prevent font box padding from altering placement */
			padding-bottom: 0;       /* Eliminated old offset padding entirely */
			margin: 0;
			transform: translateY(-16px); /* Precision micro-shift to perfectly center with digits */
			user-select: none;
		}

		/* --- Rest of your original styling remains unchanged --- */
		.picker-container {
			background: transparent;
			border: none;
			border-radius: 0;
			padding: 0;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			box-shadow: none;
		}

		.picker-header {
			font-family: monospace;
			font-size: 0.75rem;
			letter-spacing: 0.15em;
			color: var(--text-muted);
			margin-bottom: 0.5rem;
			width: 100%;
			text-align: center;
			font-weight: bold;
		}

		.nudge-btn {
			background: #ffffff;
			border: 1px solid #334155;
			border-radius: 8px;
			color: var(--action-white);
			font-size: 1.5rem;
			font-weight: bold;
			cursor: pointer;
			width: 64px;
			height: 48px;
			display: flex;
			justify-content: center;
			align-items: center;
			user-select: none;
			transition: background 0.1s, transform 0.05s;
		}

		.nudge-btn:hover {
			background: #334155;
			color: var(--action-white);
		}

		.nudge-btn:active {
			background: var(--accent-cyan);
			color: #000000;
			transform: scale(0.95);
		}

		.picker-digits {
			font-family: 'Courier New', Courier, monospace;
			font-size: 2.25rem;
			font-weight: 700;
			color: var(--accent-cyan);
			text-shadow: 0 0 10px var(--accent-glow);
			line-height: 1.1;         /* Tighter line height to save vertical pixels */
			margin: 0;                /* CRUCIAL: Eliminated the 0.25rem vertical margins completely */
		}

		.picker-label {
			font-family: monospace;
			font-size: 0.7rem;
			letter-spacing: 0.05em;
			color: var(--text-muted);
			font-weight: bold;
			margin-top: -0.1rem;      /* Micro-pull up toward digits */
		}
		
		
		/* Style the input to look like your original picker-digits div */
		input.picker-digits {
			background: transparent;
			border: none;
			text-align: center;
			font-family: inherit;
			font-size: inherit;
			font-weight: inherit;
			color: inherit;
			width: 100%;
			/* Ensures it fills the column nicely */
			outline: none;
		}

		/* Strip away native browser spin buttons entirely */
		input.picker-digits::-webkit-outer-spin-button,
		input.picker-digits::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		input.picker-digits[type=number] {
			-moz-appearance: textfield;
		}








		/* Streamlined Instrument Box */
		.timer-container {
			background: var(--panel-bg);
			border: 1px solid var(--border-color);
			border-radius: 6px;
			padding: 0.75rem 1.25rem;
			/* Tight vertical padding, slightly wider horizontal footprint */
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
			position: relative;
		}

		/* Subtle technical grid lines background effect */
		.timer-container::before {
			content: '';
			position: absolute;
			inset: 0;
			background-image: linear-gradient(var(--border-color) 1px, transparent 1px),
				linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
			background-size: 12px 12px;
			opacity: 0.12;
			pointer-events: none;
			border-radius: 6px;
		}

		/* System Status Header Bar */
		.timer-header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-family: monospace;
			font-size: 0.65rem;
			letter-spacing: 0.1em;
			color: var(--text-muted);
			margin-bottom: 0.5rem;
			border-bottom: 1px solid var(--border-color);
			padding-bottom: 0.3rem;
			z-index: 1;
		}

		/* Large Monospace Numeric Readout */
		.time-digits {
			font-family: 'Courier New', Courier, monospace;
			font-size: 4rem;
			/* Prominent, clean display size */
			font-weight: 700;
			color: var(--accent-cyan);
			text-shadow: 0 0 15px var(--accent-glow);
			letter-spacing: -0.05em;
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 0.25rem 0;
			/* Minimal spacing above and below */
			padding: 0;
			z-index: 1;
		}

		.time-separator {
			animation: blink 1s steps(2, start) infinite;
			padding: 0 0.05rem;
		}

		/* Structural Data Labels */
		.timer-labels {
			display: flex;
			justify-content: space-between;
			width: 100%;
			/* Spans the full width of the text block above it */
			box-sizing: border-box;
			padding: 0 0.5rem;
			margin-top: 0.25rem;
			font-family: monospace;
			font-size: 0.65rem;
			letter-spacing: 0.05em;
			color: var(--text-muted);
			text-transform: uppercase;
			z-index: 1;
		}

		@keyframes blink {
			to {
				opacity: 0;
			}
		}


		.countdown-row {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;             /* Matches your inner clock layout spacing */
			margin-top: 1rem;        /* Breathing room below the nudge-down button */
			margin-bottom: 1rem;     /* Breathing room above the broadcast button */
			width: 100%;             /* Centers across the full available parent block width */
		}







		/* The main structural row spanning the screen */
		/* The main structural row spanning the screen */
		.countdown-container-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			margin-top: 0.25rem;    /* Reduced from 0.75rem to pull it tight to the nudge down button */
			margin-bottom: 0.25rem; /* Reduced from 0.75rem to pull the broadcast button upward */
		}

		/* Tighten the wrapper containing the Broadcast button */
		p.broadcast-wrapper {
			margin-top: 0.25rem;    /* Crushes the empty paragraph spacing above the button */
			margin-bottom: 0px;     /* Eliminates any bottom margin pushing against the edge of the tablet screen */
			text-align: center;
		}

		/* The core engine: Forces left and right boxes to be identically wide (flexible sharing) */
		.countdown-side-block {
			flex: 1;                /* Both side blocks dynamically expand to fill equal space */
			display: flex;
			align-items: center;
		}

		/* Align the text to the absolute far left boundary */
		.countdown-side-block.left-align {
			justify-content: flex-start;
		}

		/* Keeps the right side container empty but mathematically active */
		.countdown-side-block.right-align {
			justify-content: flex-end;
		}

		/* Center column keeps a fixed visual layout for your numbers */
		.countdown-center-block {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;            /* Keeps structural number gaps tight */
			flex-shrink: 0;         /* Prevents numbers from squishing on small mobile screens */
		}

		/* Sleek, industrial label styling for "Time to go" */
		.countdown-announcer-text {
			font-family: monospace;
			font-size: 0.8rem;
			font-weight: bold;
			letter-spacing: 0.1em;
			color: #000000;          /* Forced to solid black */
			text-transform: uppercase;
			white-space: nowrap;    /* Prevents text from breaking onto two lines */
			
			/* Precision Vertical Centering Engine */
			display: inline-block;
			transform: translateY(-14px); /* Micro-shifts the text upward to line up with the numbers */
		}








		/* ------------------ Error messages ---------------- */

		#ios-special-box {
			display: flex;
			justify-content: center;
			/* Centers horizontally */
			align-items: center;
			/* Centers vertically */

			width: 100vw;
			/* 100% of the Viewport Width */
			height: 100vh;
			/* 100% of the Viewport Height */

			margin: 0;
			/* Removes default browser spacing */
			text-align: center;
		}

		#no-web-bluetooth-special-box {
			display: flex;
			justify-content: center;
			/* Centers horizontally */
			align-items: center;
			/* Centers vertically */

			width: 100vw;
			/* 100% of the Viewport Width */
			height: 100vh;
			/* 100% of the Viewport Height */

			margin: 0;
			/* Removes default browser spacing */
			text-align: center;
		}

		#no-bluetooth-hardware-special-box {
			display: flex;
			justify-content: center;
			/* Centers horizontally */
			align-items: center;
			/* Centers vertically */

			width: 100vw;
			/* 100% of the Viewport Width */
			height: 100vh;
			/* 100% of the Viewport Height */

			margin: 0;
			/* Removes default browser spacing */
			text-align: center;
		}

		#UpgradeRedirect {
			display: flex;
			justify-content: center;
			/* Centers horizontally */
			align-items: center;
			/* Centers vertically */

			width: 100vw;
			/* 100% of the Viewport Width */
			height: 100vh;
			/* 100% of the Viewport Height */

			margin: 0;
			/* Removes default browser spacing */
			text-align: center;
		}

		.extra-large {
			transform: scale(1.5);
			/* Makes the whole element 50% larger */
			margin: 20px;
			/* Add margin so it doesn't overlap other items */
		}






		/* Stats Wrapper — Configured as a flex container */
		.stats-wrapper {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;         
			height: 50%;         
			z-index: 500;        
			background: rgba(255, 255, 255, 0.97); /* If you prefer a dark theme matching the log, change to: rgba(10, 12, 20, 0.97) */
			border-top: 2px solid #1e3a5f;
			box-sizing: border-box; 
			display: flex;             /* Added to arrange header and grid vertically */
			flex-direction: column;    /* Added */
			padding: 0;                /* Changed from 16px to 0 so the header spans flush to edges */
			transition: opacity 0.2s ease;
		}

		/* Hide utility class */
		.stats-wrapper.stats-hidden {
			display: none;
		}

		/* New Stats Header Styling (Matches Log Design) */
		.stats-overlay-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 6px 16px;
			background: #0d1b2a;
			border-bottom: 1px solid #1e3a5f;
			flex-shrink: 0;
		}

		.stats-overlay-title {
			font-family: monospace;
			font-size: 11px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: #5b8db8;
			font-weight: bold;
		}

		.stats-close-btn {
			background: none;
			border: none;
			color: #5b8db8;
			font-size: 16px;
			cursor: pointer;
			padding: 2px 6px;
			line-height: 1;
			border-radius: 4px;
			transition: background 0.15s;
		}

		.stats-close-btn:hover {
			background: rgba(91, 141, 184, 0.2);
		}

		/* Updated Stats Grid Container — Handles inner padding and scrolling */
		.stats-grid {
			flex: 1;             /* Allows the grid wrapper to fill remaining height */
			overflow-y: auto;    /* Puts the scrollbar strictly on the grid area if needed */
			padding: 12px 16px;  /* Moves container padding inside the scrollable grid region */
			display: grid;
			grid-template-columns: max-content max-content;
			row-gap: 4px;
			column-gap: 8px;
			font-family: sans-serif;
			font-size: 14px;
		}

		.stats-grid .label {
			text-align: right;
			font-weight: normal;
			color: #555;
		}

		.stats-grid .value {
			font-weight: bold;
			text-align: left;
			color: #000;
		}

		/* --- Toggle Button CSS (Unchanged, remains anchored perfectly) --- */
		.stats-btn-anchor {
			position: absolute;
			right: 16px;   
			width: 0;
			height: 0;
		}

		.stats-toggle-btn {
			position: fixed;     
			bottom: 16px;        
			transform: translateX(-100%); 
			z-index: 502;        
			background: #0d1b2a;
			color: #ffffff;
			border: 1px solid #ffffff;
			border-radius: 6px;
			padding: 5px 14px;
			font-family: monospace;
			font-size: 11px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.15s, color 0.15s;
		}

		.stats-toggle-btn:hover {
			background: #1e3a5f;
			color: #a8d4ff;
		}		





		/* Styling for the button */
		#toggleStartBoxVisibilityBtn {
			margin-bottom: 10px;
			padding: 6px 12px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 13px;
		}

		/* The utility class to collapse the space entirely */
		.hidden {
			display: none !important;
		}




		/* Boats Overlay Wrapper */
		.boats-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;       /* Takes up the whole extent of the enclosing div */
			z-index: 600;       /* Higher than stats/log to ensure visibility */
			background: #0a0c14; /* Solid dark background for contrast */
			display: flex;
			flex-direction: column;
			padding: 0;
			animation: slideUpLog 0.2s ease;
		}

		.boats-wrapper.boats-hidden {
			display: none;
		}

		/* Header Styling (Matching Log/Stats) */
		.boats-overlay-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 16px;
			background: #0d1b2a;
			border-bottom: 2px solid #ffffff; /* High contrast separator */
			flex-shrink: 0;
		}

		.boats-overlay-title {
			font-family: monospace;
			font-size: 12px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: #ffffff; /* High contrast white */
			font-weight: bold;
		}

		.boats-close-btn {
			background: none;
			border: none;
			color: #ffffff;
			font-size: 20px;
			cursor: pointer;
			line-height: 1;
		}

		/* Table Container (Modified to create space for the scrollbar) */
		.scrollable-table-container {
			flex: 1;
			overflow-y: auto;
			background: #0a0c14;
			padding-right: 12px; /* Adds space specifically between the data and the scrollbar */
			box-sizing: border-box;
		}

		.large-data-table {
			/* Calculates 100% width minus the margin space so it never overflows */
			width: calc(100% - 4px); 
			margin-right: 4px;       /* Explicit right margin */
			border-collapse: collapse;
			font-family: sans-serif;
			font-size: 20px;
			color: #ffffff; 
		}

		.large-data-table thead th {
			position: sticky;
			top: 0;
			background-color: #1e3a5f; 
			color: #ffffff;
			padding: 12px;
			text-align: left;
			border-bottom: 2px solid #ffffff;
		}

		.large-data-table tbody td {
			padding: 12px;
			border-bottom: 1px solid #1e3a5f;
		}
		/* High Contrast Toggle Button - Top Left */
		.boats-toggle-btn {
			position: fixed;
			top: 16px;          /* Anchored to the top */
			left: 16px;         /* Anchored to the left */
			z-index: 601;
			background: #0d1b2a;
			color: #ffffff;      /* High contrast white text */
			border: 1px solid #ffffff;
			border-radius: 6px;
			padding: 5px 14px;
			font-family: monospace;
			font-size: 11px;
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.15s;
		}

		.boats-toggle-btn:hover {
			background: #1e3a5f;
		}
		
		
		
		
		
		
		
		
				
		.button-row {
			display: flex;            /* Turns the container into a horizontal layout */
			flex-direction: row;      /* Ensures items line up side-by-side */
			justify-content: center;  /* Centers the row horizontally; use 'flex-start' if you want them on the left */
			align-items: center;      /* Vertically aligns buttons if they have slightly different heights */
			gap: 12px;                /* Controls the exact horizontal spacing between buttons */
			width: 100%;              /* Allows the row to span across the available space */
		}