/* ================================================
			   MODAL STYLES - Live Code v.1 Complete Replication
			   All styling inline to override modal-standard.css
			   ================================================ */

			/* General Modal Overlay - Applies to ALL modals */
			.modal {
				display: none;
				position: fixed;
				z-index: 2000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgba(0, 0, 0, 0.95);
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
			}

			/* Specific Modal Overlay for reviewModal */
			#reviewModal.modal {
				display: none;
				position: fixed;
				z-index: 2000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgba(0, 0, 0, 0.95);
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
			}

			/* Show state for all modals */
			.modal.show {
				display: block !important;
			}

			#reviewModal.modal.show {
				display: block !important;
			}

			/* Modal Content - 600px max-width - EXACT Live Code v.1 Match */
			.modal-content {
				background-color: #000000;
				border: 3px solid #ffee00;
				border-radius: 10px;
				margin: 5% auto;
				padding: 2em;
				width: 90%;
				max-width: 600px;
				position: relative;
				animation: slideDown 0.3s ease;
				box-shadow: 0 10px 40px rgba(255, 238, 0, 0.4);
			}

			@keyframes slideDown {
				from {
					transform: translateY(-50px);
					opacity: 0;
				}
				to {
					transform: translateY(0);
					opacity: 1;
				}
			}

			/* Close Button */
			#reviewModal .close-modal {
				color: #ffee00;
				float: right;
				font-size: 28px;
				font-weight: bold;
				cursor: pointer;
				transition: color 0.3s ease;
			}

			#reviewModal .close-modal:hover,
			#reviewModal .close-modal:focus {
				color: #28a745;
			}

			/* Modal Title */
			#reviewModal .modal-content h2 {
				color: #ffee00 !important;
				margin-top: 0;
				margin-bottom: 1em;
				text-align: center !important;
			}

			/* Form Container */
			#reviewModal .review-form {
				display: flex;
				flex-direction: column;
				gap: 1.5em;
			}

			/* Form Groups */
			#reviewModal .form-group {
				display: flex;
				flex-direction: column;
				gap: 0.5em;
			}

			/* Form Labels */
			#reviewModal .form-group label {
				color: #ffee00 !important;
				font-weight: bold;
				font-size: 0.95em;
				text-align: left !important;
			}

			/* Form Inputs, Textareas, Selects */
			#reviewModal .form-group input,
			#reviewModal .form-group textarea,
			#reviewModal .form-group select {
				padding: 0.75em;
				border: 2px solid #ffee00;
				background: #1a1a1a !important;
				color: #ffffff !important;
				border-radius: 6px;
				font-size: 0.95em;
				transition: all 0.3s ease;
				-webkit-text-fill-color: #ffffff !important;
			}

			/* Override browser autofill styling */
			#reviewModal .form-group input:-webkit-autofill,
			#reviewModal .form-group input:-webkit-autofill:hover,
			#reviewModal .form-group input:-webkit-autofill:focus,
			#reviewModal .form-group input:-webkit-autofill:active,
			#reviewModal .form-group textarea:-webkit-autofill,
			#reviewModal .form-group select:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
				-webkit-text-fill-color: #ffffff !important;
				caret-color: #ffffff !important;
				border: 2px solid #ffee00 !important;
			}

			/* Focus States */
			#reviewModal .form-group input:focus,
			#reviewModal .form-group textarea:focus,
			#reviewModal .form-group select:focus {
				outline: none;
				border-color: #28a745;
				background: #2a2a2a !important;
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
			}

			/* Placeholder text visibility */
			#reviewModal .form-group input::placeholder,
			#reviewModal .form-group textarea::placeholder {
				color: #888888 !important;
				opacity: 0.8;
			}

			/* Ensure select dropdown options are visible */
			#reviewModal .form-group select option {
				background: #1a1a1a;
				color: #ffffff;
			}

			/* Textarea */
			#reviewModal .form-group textarea {
				min-height: 100px;
				resize: vertical;
			}

			/* Experience Textarea - Specific dimensions and scrollbar placement */
			/* See docs/review-scrollbar-placement.md */
			#reviewModal #experience {
				width: 100%;
				max-width: 600px;
				height: 180px;
				min-height: 180px;
				font-size: 16px;
				line-height: 1.6;
				text-align: left;
				padding: 12px;
				box-sizing: border-box;
				resize: vertical;
				overflow-y: auto;
			}

			/* Star Rating Styles */
			#reviewModal .star-rating {
				display: flex;
				gap: 0.5em;
				font-size: 2em;
			}

			#reviewModal .star-rating i {
				color: #333333;
				cursor: pointer;
				transition: color 0.2s ease;
			}

			#reviewModal .star-rating i:hover,
			#reviewModal .star-rating i.active {
				color: #ffee00;
			}

			/* Usage Frequency Question Styles - Mandatory Field */
			#reviewModal .usage-frequency-group {
				background: rgba(255, 238, 0, 0.08);
				border-left: 3px solid #ffee00;
				border-radius: 6px;
				padding: 1em;
				margin: 1em 0;
			}

			#reviewModal .usage-frequency-group label {
				display: block;
				margin-bottom: 0.6em;
				font-weight: 600;
				color: #ffee00 !important;
				font-size: 0.95em;
			}

			#reviewModal .usage-frequency-group label::after {
				content: " *";
				color: #ff4d4f;
				font-weight: bold;
			}

			#reviewModal .usage-frequency-group select {
				width: 100%;
				max-width: 300px;
				padding: 0.6em 0.8em;
				font-size: 1em;
				border: 2px solid #ffee00;
				background: #1a1a1a;
				color: #ffffff;
				border-radius: 6px;
				cursor: pointer;
				transition: all 0.2s ease;
			}

			#reviewModal .usage-frequency-group select:focus {
				outline: none;
				border-color: #28a745;
				box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
			}

			#reviewModal .usage-frequency-group select:required:invalid {
				border-color: #ff4d4f;
			}
			/* Map Container Styles */
			.map-container {
				max-width: 1200px;
				margin: 2em auto;
				padding: 2em;
				background: #000000;
				border: 2px solid #ffee00;
				border-radius: 10px;
			}

			.map-container h2 {
				text-align: center;
				color: #ffee00;
				margin-bottom: 1em;
			}

			.map-container p {
				text-align: center;
				color: #ffffff;
				margin-bottom: 2em;
			}

			/* State Button Styles */
			.state-button {
				background: #1a1a1a;
				border: 2px solid #ffee00;
				color: #ffee00;
				padding: 1em;
				text-align: center;
				border-radius: 6px;
				cursor: pointer;
				transition: all 0.3s ease;
				font-weight: bold;
				font-size: 0.9em;
			}

			.state-button:hover {
				background: #ffee00;
				color: #000000;
				transform: translateY(-3px);
				box-shadow: 0 4px 8px rgba(255, 238, 0, 0.3);
			}

			.state-button.selected {
				background: #28a745;
				border-color: #28a745;
				color: #ffffff;
			}

			/* Tooltip Styles */
			.state-tooltip {
				position: absolute;
				background: #000000;
				border: 2px solid #ffee00;
				padding: 8px 12px;
				border-radius: 6px;
				color: #ffee00;
				font-size: 14px;
				font-weight: bold;
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.3s ease;
				z-index: 1000;
			}

			.state-tooltip.show {
				opacity: 1;
			}

			/* Modal Styles - Enhanced for better popup appearance */
			/* Modal styles now handled by modal-standard.css - See CLAUDE.md */
				margin-top: 0;
				margin-bottom: 1em;
			}

			/* Form Styles - UPDATED TO 620px */
			/* See docs/share-experience-review.md */
			#experienceForm.review-form {
				display: flex;
				flex-direction: column;
				gap: 1.5em;
				max-width: 620px !important;
				width: 100%;
				margin: 0 auto !important;
				padding: 0;
				box-sizing: border-box;
			}

			.form-group {
				display: flex;
				flex-direction: column;
				gap: 0.5em;
			}

			.form-group label {
				color: #ffee00;
				font-weight: bold;
				font-size: 0.95em;
			}

			.form-group input,
			.form-group textarea,
			.form-group select {
				padding: 0.75em;
				border: 2px solid #ffee00;
				background: #1a1a1a !important;
				color: #ffffff !important;
				border-radius: 6px;
				font-size: 0.95em;
				transition: all 0.3s ease;
				-webkit-text-fill-color: #ffffff !important; /* For Safari/Chrome */
			}

			/* Override browser autofill styling */
			.form-group input:-webkit-autofill,
			.form-group input:-webkit-autofill:hover,
			.form-group input:-webkit-autofill:focus,
			.form-group input:-webkit-autofill:active,
			.form-group textarea:-webkit-autofill,
			.form-group select:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
				-webkit-text-fill-color: #ffffff !important;
				caret-color: #ffffff !important;
				border: 2px solid #ffee00 !important;
			}

			.form-group input:focus,
			.form-group textarea:focus,
			.form-group select:focus {
				outline: none;
				border-color: #28a745;
				background: #2a2a2a !important;
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
			}

			/* Placeholder text visibility */
			.form-group input::placeholder,
			.form-group textarea::placeholder {
				color: #888888 !important;
				opacity: 0.8;
			}

			/* Ensure select dropdown options are visible */
			.form-group select option {
				background: #1a1a1a;
				color: #ffffff;
			}

			/* Experience textarea - See docs/share-experience-review.md */
			.form-group textarea {
				min-height: 100px;
				resize: vertical;
				text-align: left;
				line-height: 1.6;
				width: 100%;
				max-width: 660px;
				font-size: 16px;
			}

			/* ===== TEXT OVERFLOW FIX - Domain Zero Standard ===== */
			.profile-info,
			.experience-text {
				overflow: hidden;
				word-wrap: break-word;
				overflow-wrap: break-word;
				word-break: break-word;
			}

			/* REMOVED: Duplicate modal-content rule - now using simple .modal-content above to match Live Code v.1 */

			/* Ensure all form elements are left-aligned */
			#reviewModal .modal-content label,
			#reviewModal .modal-content input,
			#reviewModal .modal-content select,
			#reviewModal .modal-content textarea,
			#reviewModal .modal-content p,
			#reviewModal .modal-content .form-group {
				text-align: left !important;
			}

			/* Keep modal title centered */
			#reviewModal .modal-content h2#modalTitle {
				text-align: center !important;
			}

			/* Form disabled state when user not logged in */
			.review-form.disabled {
				opacity: 0.6;
				pointer-events: none;
			}

			.review-form.disabled::after {
				content: "Please log in to submit a review";
				display: block;
				text-align: center;
				color: #ffee00;
				font-size: 1.1em;
				margin-top: 1em;
				padding: 1em;
				background: rgba(255, 238, 0, 0.1);
				border-radius: 6px;
			}

			/* Star Rating Styles */
			.star-rating {
				display: flex;
				gap: 0.5em;
				font-size: 2em;
			}

			.star-rating i {
				color: #333333;
				cursor: pointer;
				transition: color 0.2s ease;
			}

			.star-rating i:hover,
			.star-rating i.active {
				color: #ffee00;
			}

			/* Usage Frequency Question Styles - Mandatory Field */
			.usage-frequency-group {
				background: rgba(255, 238, 0, 0.08);
				border-left: 3px solid #ffee00;
				border-radius: 6px;
				padding: 1em;
				margin: 1em 0;
			}

			.usage-frequency-group label {
				display: block;
				margin-bottom: 0.6em;
				font-weight: 600;
				color: #ffee00 !important; /* Override form-group label color */
				font-size: 0.95em;
			}

			.usage-frequency-group label::after {
				content: " *";
				color: #ff4d4f;
				font-weight: bold;
			}

			.usage-frequency-group select {
				width: 100%;
				max-width: 300px;
				padding: 0.6em 0.8em;
				font-size: 1em;
				border: 2px solid #ffee00;
				background: #1a1a1a;
				color: #ffffff;
				border-radius: 6px;
				cursor: pointer;
				transition: all 0.2s ease;
			}

			.usage-frequency-group select:focus {
				outline: none;
				border-color: #28a745;
				box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
			}

			.usage-frequency-group select:required:invalid {
				border-color: #ff4d4f;
			}

			/* Ensure dropdown options are visible with proper contrast */
			.usage-frequency-group select option {
				background-color: #1a1a1a !important;
				color: #ffffff !important;
				padding: 8px;
			}

			/* Style for the selected/highlighted option in dropdown */
			.usage-frequency-group select option:checked,
			.usage-frequency-group select option:hover {
				background-color: #ffee00 !important;
				color: #000000 !important;
			}

			/* Additional browser-specific fixes for option visibility */
			#usageFrequency option {
				background-color: #1a1a1a !important;
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
				font-weight: 500;
			}

			#usageFrequency option:checked {
				background-color: #ffee00 !important;
				color: #000000 !important;
				-webkit-text-fill-color: #000000 !important;
			}

			/* Responsive adjustments for usage frequency field */
			@media screen and (max-width: 768px) {
				.usage-frequency-group select {
					max-width: 100%;
				}
			}

			/* Responsive adjustments for review form - See docs/share-experience-review.md */
			@media screen and (max-width: 768px) {
				.review-form {
					padding: 0 0.5em;
					max-width: 100%;
				}

				.form-group textarea {
					max-width: 100%;
				}
			}

			@media screen and (max-width: 480px) {
				.review-form {
					padding: 0;
				}

				.form-group textarea {
					font-size: 14px;
				}
			}

			/* Profile Hub and Support Container styles now in external CSS files */
			/* See: styles/profile-hub.css, styles/support-container.css, styles/floating-icons-extended.css */

			/* Scoreboard Styles */
			.scoreboard-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5em;
				margin-top: 1em;
			}

			.scoreboard-item {
				background: #1a1a1a;
				border: 2px solid #ffee00;
				border-radius: 8px;
				padding: 1.5em;
				transition: all 0.3s ease;
				position: relative;
				line-height: 1.8;
			}

			.scoreboard-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 6px 15px rgba(255, 238, 0, 0.3);
				border-color: #28a745;
			}

			.scoreboard-rank {
				position: absolute;
				top: -12px;
				left: 10px;
				background: #ffee00;
				color: #000000;
				font-weight: bold;
				font-size: 1.2em;
				padding: 5px 15px;
				border-radius: 20px;
				box-shadow: 0 3px 10px rgba(255, 238, 0, 0.5);
			}

			.scoreboard-rank.top3 {
				background: linear-gradient(135deg, #ffd700, #ffee00);
			}

			.scoreboard-state {
				color: #ffee00;
				font-size: 1.3em;
				font-weight: bold;
				margin: 0.5em 0 0.5em 0;
			}

			.scoreboard-stats {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 1em;
			}

			.scoreboard-rating {
				display: flex;
				align-items: center;
				gap: 0.5em;
				color: #ffee00;
				font-size: 1.1em;
			}

			.scoreboard-reviews {
				color: #ffffff;
				font-size: 0.9em;
			}

			.scoreboard-stars {
				color: #ffee00;
			}

			.scoreboard-avg-wage {
				color: #28a745;
				font-weight: bold;
				margin-top: 0.5em;
				font-size: 0.95em;
			}

			/* Responsive Design */
			@media screen and (max-width: 1200px) {
				.scoreboard-list {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			@media screen and (max-width: 768px) {
				.modal-content {
					width: 95%;
					padding: 1.5em;
					margin: 10% auto;
				}

				.map-container {
					padding: 1em;
				}

				.scoreboard-list {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media screen and (max-width: 480px) {
				.scoreboard-list {
					grid-template-columns: 1fr;
				}

				/* TOS modal styles now handled by styles/tos-modal.css - See CLAUDE.md */

				.tos-text-box {
					padding: 1em;
					font-size: 0.95em;
				}

				.tos-text-box ul {
					padding-left: 1.2em;
				}
			}

			/* OAuth Modal Styles */
			.auth-modal-content {
				text-align: center;
			}

			/* Login Button Styles - Ensure proper layout with reduced text size */
			.auth-modal-content button {
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				gap: 0.5em !important;
				white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				box-sizing: border-box !important;
				font-size: 0.9em !important; /* Reduced by 10% from base 1em */
				padding: 0.85em 2em !important;
				width: 300px !important;
				max-width: 100% !important;
			}

			.auth-modal-content button i {
				flex-shrink: 0 !important;
				font-size: 1.05em !important; /* Proportional icon size */
			}

			/* Responsive login buttons */
			@media screen and (max-width: 480px) {
				.auth-modal-content button {
					width: 100% !important;
					max-width: 300px !important;
					padding: 0.8em 1.5em !important;
					font-size: 0.85em !important; /* 10% smaller on mobile */
				}
			}

			/* Desktop specific - ensure proper sizing */
			@media screen and (min-width: 481px) {
				.auth-modal-content button {
					width: 300px !important;
					padding: 0.85em 2em !important;
				}
			}

			/* TOS modal styles now handled by scripts/tos-modal.js - See CLAUDE.md */
			/* Removed conflicting inline TOS styles (2025-11-02) to ensure consistency across all pages */

			/* US-Specific TOS Notice - Keep this as it's page-specific */
			.us-tos-notice {
				background: #2a2a00;
				border: 2px solid #ffee00;
				border-radius: 8px;
				padding: 1em;
				margin: 1em 0;
				text-align: left;
			}

			.us-tos-notice h4 {
				color: #ffee00;
				margin: 0 0 0.5em 0;
				font-size: 1.1em;
			}

			.us-tos-notice p {
				color: #ffffff;
				line-height: 1.5;
				margin: 0.5em 0;
				font-size: 0.95em;
			}

			.us-tos-notice ul {
				margin: 0.5em 0;
				padding-left: 1.5em;
			}

			.us-tos-notice li {
				color: #ffffff;
				margin-bottom: 0.3em;
			}

			/* U.S. Legal Protection Banner */
			.us-legal-banner {
				background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
				border: 3px solid #ffee00;
				border-radius: 12px;
				padding: 1.5em;
				margin: 2em auto;
				max-width: 900px;
				text-align: center;
				box-shadow: 0 6px 20px rgba(255, 238, 0, 0.3);
				position: relative;
				overflow: hidden;
			}

			.us-legal-banner::before {
				content: "🇺🇸";
				position: absolute;
				top: -20px;
				right: -20px;
				font-size: 8em;
				opacity: 0.1;
			}

			.us-legal-banner h3 {
				color: #ffee00;
				font-size: 1.4em;
				margin: 0 0 0.5em 0;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5em;
			}

			.us-legal-banner h3 i {
				color: #ffee00;
			}

			.us-legal-banner p {
				color: #ffffff;
				line-height: 1.7;
				margin: 0.5em 0;
				font-size: 1em;
			}

			.us-legal-banner strong {
				color: #ffee00;
				font-weight: bold;
			}

			.us-legal-banner .learn-more-link {
				margin-top: 1em;
				--btn-standard-padding-y: 0.7em;
				--btn-standard-padding-x: 1.8em;
				--btn-standard-font-size: 1.05em;
			}

			/* U.S. Legal Rights Modal */
			/* See docs/know-your-rights-modal.md for refinement details */
			.us-legal-modal .modal-content {
				max-width: 600px;
				padding: 2em;
			}

			.us-legal-modal h2 {
				color: #4a90e2;
				text-align: left;
				margin-bottom: 1em;
			}

			.us-legal-modal a {
				color: #4a90e2;
				text-decoration: underline;
			}

			.us-legal-modal .modal-footer-text {
				text-align: center;
				margin-top: 2em;
				color: #4a90e2;
				font-weight: bold;
			}

			.us-legal-modal h3 {
				color: #ffee00;
				margin-top: 1.2em;
				margin-bottom: 0.6em;
				font-size: 1.1em;
				text-align: left;
			}

			.us-legal-modal p {
				color: #ffffff;
				line-height: 1.6;
				margin-bottom: 1em;
				text-align: left;
			}

			.us-legal-modal ul {
				color: #ffffff;
				line-height: 1.6;
				margin: 0.5em 0 1em 2em;
				text-align: left;
			}

			.us-legal-modal li {
				margin-bottom: 0.4em;
			}

			.us-legal-modal .close-modal-btn {
				display: block;
				margin: 2em auto 0;
				padding: 0.8em 2.5em;
				background: #28a745;
				color: #ffffff;
				border: none;
				border-radius: 6px;
				font-weight: bold;
				cursor: pointer;
				transition: all 0.3s ease;
				text-align: center;
			}

			.us-legal-modal .close-modal-btn:hover,
			.us-legal-modal .close-modal-btn:focus {
				background: #218838;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
			}

			/* Responsive adjustments for US banner */
			@media screen and (max-width: 768px) {
				.us-legal-banner {
					padding: 1.2em;
					margin: 1.5em 1em;
				}

				.us-legal-banner h3 {
					font-size: 1.2em;
				}

				.us-legal-banner p {
					font-size: 0.95em;
				}

				.us-legal-banner::before {
					font-size: 5em;
				}
			}

			/* Ad Section Styles */
			.ad-section {
				width: 100%;
				padding: 0 1em;
			}

			.ad-container {
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.ad-container:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 20px rgba(255, 238, 0, 0.25) !important;
			}

			/* Responsive Ad Styles */
			@media screen and (max-width: 768px) {
				.ad-section {
					margin: 2em auto !important;
					padding: 0 0.5em;
				}

				#mid-review-scoreboard-ad .ad-container {
					padding: 1.5em !important;
				}

				#mid-review-scoreboard-ad h3 {
					font-size: 1.3em !important;
				}

				#mid-review-scoreboard-ad p {
					font-size: 0.95em !important;
				}

				#mid-review-scoreboard-ad a {
					width: 100%;
					text-align: center;
					padding: 0.8em 1.5em !important;
				}

				#mid-review-scoreboard-ad .fas.fa-map-marked-alt {
					font-size: 3em !important;
				}
			}

			@media screen and (max-width: 480px) {
				.ad-section {
					margin: 1.5em auto !important;
				}

				#mid-review-scoreboard-ad .ad-container {
					padding: 1.2em !important;
				}

				#mid-review-scoreboard-ad h3 {
					font-size: 1.2em !important;
				}

				#mid-review-scoreboard-ad p {
					font-size: 0.9em !important;
					line-height: 1.5 !important;
				}

				#mid-review-scoreboard-ad a {
					font-size: 0.95em !important;
					padding: 0.8em 1.2em !important;
				}

				#mid-review-scoreboard-ad > div > div:last-child {
					display: none;
				}
			}

			/* Review Popup Modal Styles */
			.reviews-popup-modal {
				display: none;
				position: fixed;
				z-index: 2001;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgba(0, 0, 0, 0.85);
			}

			.reviews-popup-modal.show {
				display: block;
			}

			.reviews-popup-content {
				background-color: #000000;
				border: 3px solid #ffee00;
				border-radius: 10px;
				margin: 3% auto;
				padding: 2em;
				width: 90%;
				max-width: 900px;
				position: relative;
				animation: slideDown 0.3s ease;
				max-height: 85vh;
				overflow-y: auto;
			}

			.reviews-popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 1.5em;
				border-bottom: 2px solid #ffee00;
				padding-bottom: 1em;
			}

			.reviews-popup-header h2 {
				color: #ffee00;
				margin: 0;
				font-size: 1.8em;
			}

			.reviews-popup-header .close-modal {
				font-size: 32px;
			}

			.review-item {
				background: #1a1a1a;
				border: 2px solid #333333;
				border-radius: 8px;
				padding: 1.5em;
				margin-bottom: 1.5em;
				transition: all 0.3s ease;
			}

			.review-item:hover {
				border-color: #ffee00;
				transform: translateX(5px);
			}

			.review-header {
				display: flex;
				align-items: center;
				gap: 1em;
				margin-bottom: 1em;
				padding-bottom: 0.8em;
				border-bottom: 1px solid #333333;
			}

			.review-user-icon {
				font-size: 2em;
				color: #ffee00;
				min-width: 40px;
				text-align: center;
			}

			.review-user-info {
				flex: 1;
			}

			.review-user-name {
				color: #ffee00;
				font-weight: bold;
				font-size: 1.1em;
				margin-bottom: 0.3em;
			}

			.review-metadata {
				color: #888888;
				font-size: 0.85em;
			}

			.review-rating {
				color: #ffee00;
				font-size: 1.2em;
			}

			.review-details {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1em;
				margin-bottom: 1em;
				padding: 1em;
				background: rgba(255, 238, 0, 0.05);
				border-radius: 6px;
			}

			.review-detail-item {
				display: flex;
				flex-direction: row;
				gap: 0.3em;
			}

			.review-detail-label {
				color: #888888;
				font-size: 0.85em;
				font-weight: bold;
			}

			.review-detail-value {
				color: #ffffff;
				font-size: 1em;
			}

			.review-experience-text {
				color: #ffffff;
				line-height: 1.6;
				padding: 1em;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 6px;
				border-left: 3px solid #28a745;
			}

			.review-experience-label {
				color: #28a745;
				font-weight: bold;
				margin-bottom: 0.5em;
				display: block;
			}

			.pagination-controls {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 1em;
				margin-top: 2em;
				padding-top: 1.5em;
				border-top: 2px solid #333333;
			}

			.pagination-btn {
				--btn-standard-padding-y: 0.6em;
				--btn-standard-padding-x: 1.6em;
				--btn-standard-font-size: 0.95rem;
				--btn-standard-font-weight: 600;
			}

			.pagination-btn:disabled,
			.pagination-btn[disabled] {
				background: #333333;
				color: #aaaaaa;
				box-shadow: none;
				cursor: not-allowed;
				transform: none;
			}

			.pagination-info {
				color: #ffffff;
				font-size: 1em;
			}

			.no-reviews-message {
				text-align: center;
				padding: 3em;
				color: #888888;
				font-size: 1.1em;
			}

			.no-reviews-message i {
				font-size: 3em;
				margin-bottom: 0.5em;
				color: #333333;
			}

			/* Responsive adjustments */
			@media screen and (max-width: 768px) {
				.reviews-popup-content {
					width: 95%;
					padding: 1.5em;
					margin: 5% auto;
				}

				.reviews-popup-header h2 {
					font-size: 1.4em;
				}

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

				.pagination-controls {
					flex-direction: row;
					gap: 0.8em;
				}
			}
			/* User HUD (Heads-Up Display) Styles */
			.user-hud {
				position: fixed;
				top: 20px;
				right: 20px;
				z-index: 9999;
				animation: slideInFromRight 0.4s ease-out;
			}

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

			.hud-content {
				background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
				border: 2px solid #ffee00;
				border-radius: 8px;
				padding: 0.8em 1.5em;
				display: flex;
				align-items: center;
				gap: 1.2em;
				box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 238, 0, 0.2);
				backdrop-filter: blur(10px);
			}

			.hud-greeting {
				color: #ffffff;
				font-size: 0.95em;
				font-weight: 500;
				white-space: nowrap;
			}

			.hud-greeting strong {
				color: #ffee00;
				font-weight: 700;
			}

			.hud-logout-btn {
				--btn-standard-font-size: 0.9rem;
				--btn-standard-padding-y: 0.55em;
				--btn-standard-padding-x: 1.4em;
				display: inline-flex;
				align-items: center;
				gap: 0.45em;
				white-space: nowrap;
				box-shadow: 0 2px 8px rgba(255, 238, 0, 0.3);
			}

			.hud-logout-btn:hover,
			.hud-logout-btn:focus {
				box-shadow: 0 4px 12px rgba(255, 238, 0, 0.5);
			}

			.hud-logout-btn i {
				font-size: 1.05em;
			}

			/* Responsive HUD Styles */
			@media screen and (max-width: 768px) {
				.user-hud {
					top: 15px;
					right: 15px;
				}

				.hud-content {
					padding: 0.7em 1.2em;
					gap: 1em;
				}

				.hud-greeting {
					font-size: 0.85em;
				}

				.hud-logout-btn {
					--btn-standard-padding-y: 0.5em;
					--btn-standard-padding-x: 1.2em;
					--btn-standard-font-size: 0.85rem;
				}
			}

			@media screen and (max-width: 480px) {
				.user-hud {
					top: 10px;
					right: 10px;
					left: 10px;
				}

				.hud-content {
					flex-direction: row;
					align-items: stretch;
					gap: 0.8em;
					padding: 0.8em 1em;
				}

				.hud-greeting {
					text-align: center;
					font-size: 0.85em;
				}

				.hud-logout-btn {
					width: 100%;
					justify-content: center;
					--btn-standard-padding-y: 0.7em;
					--btn-standard-padding-x: 1em;
				}
			}

			/* ================================================
			   REMOVED: Duplicate high-specificity override
			   Now using simple .modal-content at top of style section
			   to exactly match Live Code v.1 structure
			   ================================================ */

/* ================================================
   CSP PHASE 4 - INLINE STYLE EXTRACTION
   Added: 2025-12-23
   ================================================ */

/* States grid - replaces inline style on line 173 */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 2em;
}

/* Ad section spacing - replaces inline style on lines 538, 581 */
.ad-section-spacing {
  margin: 3em auto;
  max-width: 1200px;
}

/* Dark gradient ad card - replaces inline style on lines 539, 582 */
.native-ad-dark-gradient {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

.native-ad-dark-gradient-alt {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

/* ToS list styling - replaces inline style on line 771 */
.tos-list {
  line-height: 1.6;
  margin-bottom: 0.5em;
}

/* Disclaimer text - replaces inline style on line 778 */
.disclaimer-text {
  font-size: 0.9em;
  margin-top: 1em;
}

/* ============================================
   FOOTER WHITESPACE REDUCTION
   Page-specific overrides - share-experience page only
   Mirrors fix from view-reported-issues.css
   Issue: Excessive footer padding reported by user
   ============================================ */

/* Target main section with .wrapper class */
body.share-experience-page #main.wrapper.style1 {
  padding-bottom: 3em !important; /* Override .wrapper default 9em */
}

/* Target footer with .wrapper class - must override both .wrapper and #footer */
body.share-experience-page #footer.wrapper {
  padding: 0 0 2em 0 !important; /* Override .wrapper (9em) + #footer (6em) */
}

/* Target copyright section */
body.share-experience-page #copyright {
  margin-top: 2em !important; /* Override default 6em */
  padding-top: 2em !important; /* Override default 6em */
}

/* CRITICAL: Override #footer base padding/margin (separate from .wrapper class) */
body.share-experience-page #footer {
  padding-bottom: 0 !important; /* Override main.css line 1934 (6em) */
  margin-bottom: 0 !important;  /* Override main.css line 1935 (6em) */
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  body.share-experience-page #main.wrapper.style1 {
    padding-bottom: 2em !important;
  }
  body.share-experience-page #footer.wrapper {
    padding: 0 0 1.5em 0 !important;
  }
  body.share-experience-page #footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.share-experience-page #copyright {
    margin-top: 1.5em !important;
    padding-top: 1.5em !important;
  }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  body.share-experience-page #main.wrapper.style1 {
    padding-bottom: 1.5em !important;
  }
  body.share-experience-page #footer.wrapper {
    padding: 0 0 1em 0 !important;
  }
  body.share-experience-page #footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.share-experience-page #copyright {
    margin-top: 1em !important;
    padding-top: 1em !important;
  }
}