:root {
				--primary-black: #1a1a1a;
				--secondary-black: #2d2d2d;
				--light-gray: #f5f5f5;
				--medium-gray: #e0e0e0;
				--accent-gold: #d4af37;
				--dark-gold: #b8941f;
				--white: #ffffff;
				--text-dark: #333333;
				--text-medium: #666666;
				--text-light: #999999;
				--shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
				--shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.1);
				--border-radius: 8px;
				--transition: all 0.3s ease;
			}

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: 'Open Sans', sans-serif;
				color: var(--text-dark);
				background-color: var(--white);
				line-height: 1.5;
				overflow-x: hidden;
				font-size: 14px;
			}

			h1,
			h2,
			h3,
			h4,
			h5 {
				font-family: 'Montserrat', sans-serif;
				font-weight: 600;
				color: var(--primary-black);
				line-height: 1.3;
			}

			.container {
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 15px;
			}

			/* 头部导航 - 与首页一致 */
			header {
				background-color: var(--primary-black);
				box-shadow: var(--shadow);
				position: sticky;
				top: 0;
				z-index: 1000;
				width: 100%;
			}

			.header-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px 0;
				max-width: 1200px;
				margin: 0 auto;
				width: 100%;
				padding-left: 15px;
				padding-right: 15px;
			}

			.logo {
				display: flex;
				align-items: center;
				gap: 8px;
				text-decoration: none;
			}

			.logo-icon {
				background-color: var(--accent-gold);
				color: var(--primary-black);
				width: 36px;
				height: 36px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				font-size: 16px;
			}

			.logo-text {
				font-family: 'Montserrat', sans-serif;
				font-weight: 700;
				font-size: 20px;
				color: var(--accent-gold);
			}

			.logo-text span {
				color: var(--white);
			}

			.nav-links {
				display: flex;
				gap: 20px;
			}

			.nav-links a {
				text-decoration: none;
				color: var(--white);
				font-weight: 500;
				font-size: 14px;
				transition: var(--transition);
				position: relative;
				padding: 5px 0;
			}

			.nav-links a:hover {
				color: var(--accent-gold);
			}

			.nav-links a.active {
				color: var(--accent-gold);
				font-weight: 600;
			}

			.nav-links a.active::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: var(--accent-gold);
			}

			.header-actions {
				display: flex;
				gap: 12px;
				align-items: center;
			}

			.language-selector {
				padding: 6px 10px;
				border: 1px solid rgba(212, 175, 55, 0.3);
				border-radius: var(--border-radius);
				background-color: transparent;
				font-size: 13px;
				cursor: pointer;
				color: var(--white);
				background-color: #1a1a1a;
			}

			.language-icon {
				display: none;
				background: none;
				border: none;
				font-size: 18px;
				color: var(--accent-gold);
				cursor: pointer;
				padding: 5px;
			}
			
			/* 手机端导航按钮 */
			.mobile-nav-btn {
				display: none;
				background: none;
				border: none;
				font-size: 22px;
				color: var(--accent-gold);
				cursor: pointer;
				padding: 5px;
				z-index: 1001;
			}

			/* 页面标题和搜索栏 - 优化样式 */
			.page-header {
				background: linear-gradient(to right, rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.7)), 
							url('https://images.unsplash.com/photo-1598880940080-ff9a29891b85?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
				background-size: cover;
				background-position: center;
				padding: 40px 0;
				margin-bottom: 30px;
				width: 100%;
			}

			.page-title {
				font-size: 28px;
				margin-bottom: 10px;
				text-align: center;
				color: var(--white);
			}

			.page-subtitle {
				font-size: 15px;
				color: var(--text-light);
				text-align: center;
				margin-bottom: 25px;
				max-width: 700px;
				margin-left: auto;
				margin-right: auto;
			}

			.search-container {
				max-width: 700px;
				margin: 0 auto;
				position: relative;
			}

			.search-box {
				display: flex;
				background-color: var(--white);
				border-radius: var(--border-radius);
				box-shadow: var(--shadow-heavy);
				overflow: hidden;
				border: 1px solid rgba(212, 175, 55, 0.3);
				position: relative;
			}

			.search-input {
				flex: 1;
				padding: 14px 50px 14px 18px;
				border: none;
				font-size: 14px;
				outline: none;
				background-color: var(--white);
			}

			.search-button {
				background-color: var(--accent-gold);
				color: var(--primary-black);
				border: none;
				padding: 0 25px;
				cursor: pointer;
				font-weight: 600;
				font-size: 14px;
				transition: var(--transition);
				display: flex;
				align-items: center;
				gap: 8px;
			}

			/* 移动端搜索按钮样式 */
			.search-button-mobile {
				position: absolute;
				right: 5px;
				top: 50%;
				transform: translateY(-50%);
				background: none;
				border: none;
				color: var(--text-medium);
				font-size: 18px;
				padding: 8px;
				cursor: pointer;
				display: none;
			}

			.search-button:hover {
				background-color: var(--dark-gold);
			}

			.search-examples {
				margin-top: 12px;
				font-size: 13px;
				color: var(--text-light);
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
				justify-content: center;
			}

			.search-examples span {
				color: var(--text-light);
				font-size: 13px;
			}

			.search-examples span[data-search] {
				background-color: rgba(255, 255, 255, 0.1);
				padding: 5px 12px;
				border-radius: 20px;
				cursor: pointer;
				transition: var(--transition);
				border: 1px solid rgba(255, 255, 255, 0.2);
				color: var(--white);
			}

			.search-examples span[data-search]:hover {
				background-color: rgba(212, 175, 55, 0.2);
				border-color: var(--accent-gold);
			}

			/* 模块标题和查看更多 */
			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				width: 100%;
			}

			.section-title {
				font-size: 22px;
				position: relative;
				padding-bottom: 8px;
				flex-shrink: 0;
			}

			.section-title::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 50px;
				height: 2px;
				background-color: var(--accent-gold);
			}

			/* 筛选条件区域 - 优化布局 */
			.filter-section {
				margin-bottom: 30px;
				background-color: var(--white);
				border-radius: var(--border-radius);
				box-shadow: var(--shadow);
				padding: 20px;
				border: 1px solid var(--medium-gray);
			}

			.filter-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
				flex-wrap: wrap;
				gap: 10px;
			}

			.filter-title {
				font-size: 18px;
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.filter-title i {
				color: var(--accent-gold);
			}

			.filter-reset {
				background: none;
				border: none;
				color: var(--text-medium);
				cursor: pointer;
				font-size: 13px;
				display: flex;
				align-items: center;
				gap: 5px;
				transition: var(--transition);
			}

			.filter-reset:hover {
				color: var(--accent-gold);
			}

			.filter-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 15px;
			}

			.filter-group {
				margin-bottom: 10px;
			}

			.filter-label {
				display: block;
				margin-bottom: 8px;
				font-weight: 600;
				color: var(--text-dark);
				font-size: 14px;
			}

			.filter-select {
				width: 100%;
				padding: 10px 15px;
				border: 1px solid var(--medium-gray);
				border-radius: var(--border-radius);
				background-color: var(--white);
				font-size: 14px;
				color: var(--text-dark);
				cursor: pointer;
				transition: var(--transition);
			}

			.filter-select:focus {
				outline: none;
				border-color: var(--accent-gold);
			}

			/* 优化球场特色标签布局 - 横向排列 */
			.feature-filter-group {
				grid-column: 1 / -1;
				margin-bottom: 10px;
			}

			.filter-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
			}

			.filter-tag {
				padding: 8px 15px;
				background-color: var(--light-gray);
				border-radius: 20px;
				cursor: pointer;
				font-size: 13px;
				transition: var(--transition);
				border: 1px solid transparent;
				color: var(--text-medium);
				flex-shrink: 0;
			}

			.filter-tag:hover {
				background-color: var(--medium-gray);
			}

			.filter-tag.active {
				background-color: var(--primary-black);
				color: var(--white);
				border-color: var(--accent-gold);
			}

			/* 球场列表 */
			.courses-section {
				margin-bottom: 40px;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.results-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25px;
				flex-wrap: wrap;
				gap: 15px;
				width: 100%;
			}

			.results-count {
				font-size: 14px;
				color: var(--text-medium);
			}

			.sort-options {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.sort-label {
				font-size: 13px;
				color: var(--text-medium);
			}

			.sort-select {
				padding: 8px 15px;
				border: 1px solid var(--medium-gray);
				border-radius: var(--border-radius);
				background-color: var(--white);
				font-size: 13px;
				color: var(--text-dark);
				cursor: pointer;
			}

			/* 课程网格布局 - 与首页保持一致 */
			.courses-grid-container {
				width: 100%;
				margin-bottom: 20px;
			}

			.courses-grid {
				display: grid;
				grid-template-columns: repeat(5, 1fr); /* PC端一排5个 */
				gap: 15px;
				width: 100%;
			}

			/* 优化后的商品卡片 - 移除特色标签 */
			.course-card {
				background-color: var(--white);
				border-radius: var(--border-radius);
				overflow: hidden;
				box-shadow: var(--shadow);
				transition: var(--transition);
				border: 1px solid var(--medium-gray);
				/* height: 290px; */
				width: 100%;
				display: flex;
				flex-direction: column;
				cursor: pointer;
				position: relative;
			}

			.course-card:hover {
				transform: translateY(-5px);
				box-shadow: var(--shadow-heavy);
			}

			.course-badge {
				position: absolute;
				top: 12px;
				right: 12px;
				background-color: var(--accent-gold);
				color: var(--primary-black);
				padding: 4px 8px;
				border-radius: 4px;
				font-size: 11px;
				font-weight: 600;
				z-index: 2;
			}

			.course-image {
				height: 140px;
				width: 100%;
				object-fit: cover;
				filter: grayscale(20%);
			}

			.course-info {
				padding: 12px;
				text-align: left;
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.course-header {
				margin-bottom: 8px;
			}

			.course-name {
				font-size: 15px;
				margin-bottom: 4px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 40px;
			}

			.course-location {
				color: var(--text-medium);
				font-size: 12px;
				display: flex;
				align-items: center;
				gap: 4px;
			}

			.course-description {
				color: var(--text-medium);
				font-size: 13px;
				margin-bottom: 15px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				flex-grow: 1;
			}

			/* 移除特色标签部分 */
			.course-features {
				display: none;
			}

			.course-pricing {
				margin-top: auto;
				padding-top: 10px;
				border-top: 1px solid var(--light-gray);
			}

			.price-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.price {
				font-size: 18px;
				font-weight: 700;
				color: var(--primary-black);
			}

			.price-unit {
				font-size: 12px;
				color: var(--text-medium);
			}

			/* 分页 */
			.pagination {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				margin-top: 30px;
			}

			.pagination-button {
				padding: 8px 15px;
				border: 1px solid var(--medium-gray);
				border-radius: var(--border-radius);
				background-color: var(--white);
				color: var(--text-dark);
				cursor: pointer;
				transition: var(--transition);
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: 13px;
			}

			.pagination-button:hover:not(:disabled) {
				background-color: var(--light-gray);
				border-color: var(--accent-gold);
				color: var(--accent-gold);
			}

			.pagination-button:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}

			.page-numbers {
				display: flex;
				gap: 5px;
			}

			.page-number {
				width: 36px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid var(--medium-gray);
				border-radius: var(--border-radius);
				background-color: var(--white);
				color: var(--text-dark);
				cursor: pointer;
				transition: var(--transition);
				font-size: 13px;
			}

			.page-number:hover {
				background-color: var(--light-gray);
			}

			.page-number.active {
				background-color: var(--primary-black);
				color: var(--white);
				border-color: var(--primary-black);
			}

			/* 按钮样式 - 与首页一致 */
			.btn {
				padding: 8px 16px;
				border-radius: var(--border-radius);
				font-weight: 600;
				cursor: pointer;
				transition: var(--transition);
				border: none;
				font-size: 13px;
				display: inline-block;
				text-align: center;
			}

			.btn-primary {
				background-color: var(--primary-black);
				color: var(--white);
				border: 1px solid var(--primary-black);
			}

			.btn-primary:hover {
				background-color: var(--secondary-black);
				transform: translateY(-2px);
			}

			.btn-accent {
				background-color: var(--accent-gold);
				color: var(--primary-black);
				border: 1px solid var(--accent-gold);
			}

			.btn-accent:hover {
				background-color: var(--dark-gold);
				transform: translateY(-2px);
				color: var(--primary-black);
			}

			/* 页脚 - 移除快速链接板块，调整为3列 */
			footer {
				background-color: var(--primary-black);
				color: var(--white);
				padding: 30px 0 15px;
				width: 100%;
			}

			.footer-container {
				display: grid;
				grid-template-columns: repeat(4, 1fr); /* 改为3列 */
				gap: 30px;
				margin-bottom: 20px;
			}
			
			.footer-column {
				padding: 0 10px;
			}
			
			.footer-about {
				grid-column: 1;
			}
			
			.footer-links-quick {
				grid-column: 2;
			}
			
			.footer-partners {
				grid-column: 3;
			}
			
			.footer-contact {
				grid-column: 4;
			}
			
			.footer-column h3 {
				color: var(--accent-gold);
				font-size: 16px;
				margin-bottom: 15px;
				position: relative;
				padding-bottom: 8px;
			}

			.footer-column h3::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 35px;
				height: 2px;
				background-color: var(--accent-gold);
			}

			.footer-links {
				list-style: none;
			}

			.footer-links li {
				margin-bottom: 8px;
				text-align: left;
				color: #bdc3c7;
				font-size: 13px;
			}

			.footer-links a {
				color: #bdc3c7;
				text-decoration: none;
				transition: var(--transition);
				font-size: 13px;
			}

			.footer-links a:hover {
				color: var(--accent-gold);
				padding-left: 3px;
			}

			.social-icons {
				display: flex;
				gap: 10px;
				margin-top: 15px;
				justify-content: flex-start;
			}

			.social-icon {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				background-color: rgba(212, 175, 55, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--accent-gold);
				text-decoration: none;
				transition: var(--transition);
				font-size: 16px;
			}

			.social-icon:hover {
				background-color: var(--accent-gold);
				color: var(--primary-black);
				transform: translateY(-3px);
			}

			.copyright {
				text-align: center;
				padding-top: 15px;
				border-top: 1px solid rgba(212, 175, 55, 0.2);
				font-size: 12px;
				color: #bdc3c7;
			}

			/* 悬浮联系按钮 - 与首页一致 */
			.contact-fab {
				position: fixed;
				right: 15px;
				bottom: 15px;
				z-index: 999;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}

			.fab-main {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: var(--primary-black);
				color: var(--accent-gold);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				cursor: pointer;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
				transition: var(--transition);
				margin-bottom: 8px;
				border: 1px solid rgba(212, 175, 55, 0.3);
			}

			.fab-main:hover {
				background-color: var(--accent-gold);
				color: var(--primary-black);
				transform: scale(1.1);
			}

			.fab-items {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: 8px;
				opacity: 0;
				transform: translateY(15px);
				transition: var(--transition);
				pointer-events: none;
			}

			.fab-items.show {
				opacity: 1;
				transform: translateY(0);
				pointer-events: all;
			}

			.fab-item {
				width: 45px;
				height: 45px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--primary-black);
				font-size: 18px;
				cursor: pointer;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
				transition: var(--transition);
				background-color: var(--accent-gold);
				border: 1px solid rgba(212, 175, 55, 0.3);
			}

			.fab-item:hover {
				transform: scale(1.1);
				background-color: var(--dark-gold);
			}

			/* 响应式设计 */
			@media (max-width: 1200px) {
				.courses-grid {
					grid-template-columns: repeat(4, 1fr);
				}
			}

			@media (max-width: 992px) {
				.page-header {
					padding: 30px 0;
				}

				.page-title {
					font-size: 24px;
				}

				.courses-grid {
					grid-template-columns: repeat(3, 1fr);
				}
				
				.footer-container {
					grid-template-columns: repeat(3, 1fr);
					gap: 20px;
				}
			}

			@media (max-width: 768px) {
				.header-container {
					padding: 10px 15px;
				}

				/* 显示手机端导航按钮 */
				.mobile-nav-btn {
					display: block;
				}
				
				.language-icon {
					display: block;
				}

				.language-selector {
					display: none;
					position: absolute;
					top: 60px;
					right: 15px;
					background-color: var(--primary-black);
					box-shadow: var(--shadow-heavy);
					border-radius: var(--border-radius);
					padding: 12px;
					z-index: 1000;
					min-width: 130px;
					opacity: 0;
					transform: translateY(-10px);
					transition: var(--transition);
					visibility: hidden;
				}

				.language-selector.show {
					display: block;
					opacity: 1;
					transform: translateY(0);
					visibility: visible;
				}

				.nav-links {
					position: fixed;
					top: 56px;
					left: 0;
					width: 100%;
					background-color: var(--primary-black);
					flex-direction: column;
					align-items: center;
					padding: 15px 0;
					box-shadow: var(--shadow);
					transform: translateY(-100%);
					opacity: 0;
					visibility: hidden;
					transition: var(--transition);
					z-index: 999;
				}

				.nav-links.active {
					transform: translateY(0);
					opacity: 1;
					visibility: visible;
				}

				.nav-links a {
					padding: 12px 0;
					font-size: 16px;
					width: 100%;
					text-align: center;
				}

				.header-actions {
					gap: 12px;
					position: relative;
				}
				
				/* 移动端底部布局调整 - 改为2列 */
				.footer-container {
					grid-template-columns: 1fr 1fr;
					gap: 25px;
				}
				
				.footer-column:first-child {
					grid-column: 1 / -1;
					grid-row: 1;
				}
				
				.footer-column:nth-child(2) {
					grid-column: 1;
					grid-row: 2;
				}
				
				.footer-column:nth-child(3) {
					grid-column: 2;
					grid-row: 2;
				}

				/* 移动端搜索按钮内置到搜索框内 */
				.search-button {
					display: none; /* 隐藏文字按钮 */
				}
				
				.search-button-mobile {
					display: block; /* 显示图标按钮 */
				}
				
				.search-input {
					padding-right: 45px; /* 为图标留出空间 */
				}

				/* 页面标题移动端优化 */
				.page-title {
					font-size: 20px;
				}

				.page-subtitle {
					font-size: 13px;
					padding: 0 15px;
				}

				.search-box {
					flex-direction: row;
					margin: 0 15px;
					position: relative;
				}

				.search-input {
					padding: 12px 45px 12px 15px;
					width: 100%;
				}

				/* 移动端网格布局改为2列 */
				.courses-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 12px;
				}

				/* 移动端课程卡片优化 */
				.course-card {
					/* height: 240px; */
				}

				.course-image {
					height: 100px;
				}

				.course-name {
					font-size: 14px;
					height: 36px;
				}

				.course-location {
					font-size: 11px;
				}

				.course-description {
					display: none;
				}

				.price {
					font-size: 16px;
				}

				/* 移动端筛选区域优化 */
				.filter-grid {
					grid-template-columns: 1fr;
				}

				.filter-header {
					flex-direction: column;
					align-items: flex-start;
				}

				.filter-reset {
					align-self: flex-start;
				}

				.filter-tags {
					gap: 6px;
					overflow-x: auto;
					scrollbar-width: thin;
					scrollbar-color: var(--accent-gold) var(--light-gray);
					-webkit-overflow-scrolling: touch;
					white-space: nowrap;
					width: 100%;
					padding-bottom: 8px;
				}

				.filter-tags::-webkit-scrollbar {
					height: 3px;
				}

				.filter-tags::-webkit-scrollbar-track {
					background: var(--light-gray);
					border-radius: 8px;
				}

				.filter-tags::-webkit-scrollbar-thumb {
					background: var(--accent-gold);
					border-radius: 8px;
				}

				.filter-tag {
					padding: 6px 12px;
					font-size: 12px;
					flex-shrink: 0;
					border-radius: 15px;
				}

				/* 移动端标题与"查看更多"按钮对齐优化 */
				.section-header {
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					gap: 8px;
					padding: 0 15px;
					margin-bottom: 15px;
				}

				.section-title {
					font-size: 18px;
					padding-bottom: 6px;
				}

				/* 悬浮按钮 */
				.contact-fab {
					right: 12px;
					bottom: 12px;
				}

				.fab-main {
					width: 45px;
					height: 45px;
					font-size: 18px;
				}

				.fab-item {
					width: 40px;
					height: 40px;
					font-size: 16px;
				}
			}

			@media (max-width: 480px) {
				.container {
					padding: 0 12px;
				}

				.logo-text {
					font-size: 18px;
				}

				.logo-icon {
					width: 32px;
					height: 32px;
					font-size: 14px;
				}

				.page-title {
					font-size: 18px;
				}

				.page-subtitle {
					font-size: 12px;
				}

				/* 小屏幕手机端保持2列布局 */
				.results-header {
					flex-direction: column;
					align-items: flex-start;
				}

				.sort-options {
					width: 100%;
					justify-content: space-between;
				}
				
				/* 移动端底部布局微调 */
				.footer-container {
					gap: 20px;
				}

				/* 极小的手机屏幕可以考虑改为1列 */
				@media (max-width: 360px) {
					.courses-grid {
						grid-template-columns: 1fr;
					}

					.section-header {
						flex-direction: column;
						align-items: flex-start;
					}
					
					/* 极小屏幕底部改为1列 */
					.footer-container {
						grid-template-columns: 1fr;
					}
					
					.footer-column:nth-child(2) {
						grid-column: 1;
						grid-row: 2;
					}
					
					.footer-column:nth-child(3) {
						grid-column: 1;
						grid-row: 3;
					}
				}
			}