/* ============================================
   SEEDTRIP - Modern Travel Guide Platform
   Tech-inspired UI with Klook-like aesthetics
   ============================================ */

/* 全局样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* Primary Colors - Vibrant Orange/Coral (Klook-inspired) */
	--primary-color: #FF5722;
	--primary-light: #FF8A65;
	--primary-dark: #E64A19;
	--primary-gradient: linear-gradient(135deg, #FF5722 0%, #FF8A65 100%);

	/* Secondary Colors - Deep Blue */
	--secondary-color: #1A73E8;
	--secondary-light: #4285F4;
	--secondary-dark: #0D47A1;
	--secondary-gradient: linear-gradient(135deg, #1A73E8 0%, #4285F4 100%);

	/* Accent Colors */
	--accent-purple: #7C4DFF;
	--accent-teal: #00BCD4;
	--accent-green: #00C853;

	/* Neutral Colors */
	--text-primary: #202124;
	--text-secondary: #5F6368;
	--text-tertiary: #9AA0A6;
	--text-white: #FFFFFF;

	/* Background Colors */
	--bg-primary: #FFFFFF;
	--bg-secondary: #F8F9FA;
	--bg-tertiary: #F1F3F4;
	--bg-dark: #202124;
	--bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);

	/* Border & Shadow */
	--border-light: rgba(0, 0, 0, 0.08);
	--border-medium: rgba(0, 0, 0, 0.12);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.1);
	--shadow-glow: 0 0 30px rgba(255, 87, 34, 0.3);

	/* Glass Effect */
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: rgba(255, 255, 255, 0.5);
	--glass-blur: blur(20px);

	/* Spacing & Sizing */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
	color: var(--text-primary);
	line-height: 1.6;
	background: var(--bg-secondary);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

a {
	text-decoration: none;
	color: inherit;
}

/* ============================================
   顶部导航栏 - Modern Glass Effect
   ============================================ */
.header {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--border-light);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: var(--transition-base);
}

.header.scrolled {
	box-shadow: var(--shadow-md);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
}

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

.logo .logo-text {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.5px;
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.logo .logo-text:hover {
	opacity: 0.9;
}

.main-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.main-nav ul {
	display: flex;
	list-style: none;
	gap: 8px;
}

.main-nav a {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--radius-full);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.main-nav a:hover {
	background: var(--bg-tertiary);
	color: var(--text-primary);
}

.main-nav a.active {
	background: var(--primary-color);
	color: var(--text-white);
}

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

/* 语言切换器 - Modern Dropdown */
.lang-switcher {
	position: relative;
}

.lang-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--bg-tertiary);
	border: none;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
}

.lang-btn:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.lang-btn i:first-child {
	color: var(--primary-color);
}

.lang-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	border: 1px solid var(--border-light);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px) scale(0.95);
	transition: var(--transition-base);
	z-index: 100;
}

.lang-dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.lang-dropdown a {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.lang-dropdown a:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.lang-dropdown a.active {
	background: var(--primary-color);
	color: var(--text-white);
}

/* 登录/注册按钮 */
.btn-login,
.btn-register {
	padding: 10px 20px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-fast);
}

.btn-login {
	background: transparent;
	border: 1.5px solid var(--border-medium);
	color: var(--text-secondary);
}

.btn-login:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.btn-register {
	background: var(--primary-gradient);
	border: none;
	color: var(--text-white);
	box-shadow: var(--shadow-sm);
}

.btn-register:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* ============================================
   Hero Section - Tech Gradient
   ============================================ */
.hero-section {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-image: url('https://static.seedtrip.net/img/banner.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.hero-section .container {
	position: relative;
	z-index: 1;
}

.hero-section h1 {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	color: var(--text-white);
	margin-bottom: 16px;
	letter-spacing: -1px;
	line-height: 1.2;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-section .lead {
	font-size: clamp(16px, 2vw, 20px);
	color: rgba(255, 255, 255, 0.9);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

/* ---- Hero Search Box (Klook style) ---- */
.hero-search-form {
	margin-top: 32px;
}
.hero-search-box {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: #fff;
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	max-width: 640px;
	width: 100%;
}
.hero-search-input {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	padding: 0 16px;
}
.hero-search-input i {
	font-size: 20px;
	color: #6366f1;
	flex-shrink: 0;
}
.hero-search-input input.form-control {
	border: none;
	box-shadow: none;
	font-size: 16px;
	padding: 14px 0;
	color: #1e293b;
}
.hero-search-input input.form-control::placeholder {
	color: #94a3b8;
}
.hero-search-input input.form-control:focus {
	outline: none;
	box-shadow: none;
}
.hero-search-btn {
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---- Hero Stats Bar ---- */
.hero-stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 32px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: 16px 32px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.hero-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.hero-stat-num {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}
.hero-stat-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

.hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-background {
	position: absolute;
	inset: 0;
	background: var(--bg-dark);
}

.hero-background::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 50%, rgba(255, 87, 34, 0.3) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 50%, rgba(26, 115, 232, 0.3) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 100%, rgba(124, 77, 255, 0.2) 0%, transparent 50%);
	animation: gradientPulse 8s ease-in-out infinite alternate;
}

@keyframes gradientPulse {
	0% { opacity: 0.8; }
	100% { opacity: 1; }
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--bg-dark) 100%);
	opacity: 0.4;
}

/* Grid Pattern */
.hero-background::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 50px 50px;
}

.hero-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 80px 0;
}

.hero-title {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	color: var(--text-white);
	margin-bottom: 16px;
	letter-spacing: -1px;
	line-height: 1.2;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
	font-size: clamp(16px, 2vw, 20px);
	color: rgba(255, 255, 255, 0.8);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ============================================
   Section Headers
   ============================================ */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	padding-top: 48px;
}

.section-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.5px;
}

.section-subtitle {
	font-size: 15px;
	color: var(--text-tertiary);
	margin-top: 4px;
}

.section-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	transition: var(--transition-fast);
}

.section-more:hover {
	gap: 10px;
	color: var(--primary-dark);
}

/* ============================================
   攻略卡片 - Modern Card Design
   ============================================ */
.guides-section {
	background: var(--bg-gradient);
	padding-bottom: 48px;
}

.guides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}

.guide-card-link {
	text-decoration: none;
}

.guide-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	transition: var(--transition-base);
}

.guide-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.guide-image {
	position: relative;
	height: 180px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.guide-placeholder {
	font-size: 48px;
	color: var(--text-tertiary);
	opacity: 0.5;
	transition: var(--transition-base);
}

.guide-card:hover .guide-placeholder {
	transform: scale(1.1);
	opacity: 0.7;
}

.guide-category {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 12px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
}

.guide-content {
	padding: 20px;
}

.guide-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.guide-excerpt {
	font-size: 14px;
	color: var(--text-tertiary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 16px;
}

.guide-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: var(--text-tertiary);
}

.guide-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.guide-meta i {
	font-size: 12px;
}

/* ============================================
   地区/目的地卡片 - 上下分栏样式
   ============================================ */
.destinations-section {
	background: var(--bg-primary);
	padding: 80px 0;
}

.destinations-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

@media (max-width: 1200px) {
	.destinations-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 768px) {
	.destinations-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.destinations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.destination-card-link {
	text-decoration: none;
	display: block;
}

.destination-card {
	background: var(--bg-white);
	border-radius: 16px;
	overflow: hidden;
	border: none;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.destination-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 上半部分 - 图标区域 */
.destination-image {
	position: relative;
	padding-top: 66.67%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.destination-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.destination-card:hover .destination-image img {
	transform: scale(1.05);
}

/* 有图片时的overlay渐变 */
.destination-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
}

.destination-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	transition: all 0.3s ease;
}

/* 圆形图标容器 */
.destination-placeholder i {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px);
}

.destination-card:hover .destination-placeholder {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.destination-card:hover .destination-placeholder i {
	background: rgba(255,255,255,0.25);
	transform: scale(1.1);
}

/* 下半部分 - 文字信息区域（覆盖在图片上） */
.destination-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 20px 20px;
	text-align: center;
	background: transparent;
	z-index: 1;
}

.destination-overlay h3 {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.destination-overlay p {
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	text-transform: capitalize;
	margin-bottom: 8px;
}

.destination-count {
	display: block;
	font-size: 13px;
	color: rgba(255,255,255,0.9);
	margin-top: 8px;
}

.destination-count i {
	font-size: 12px;
	color: rgba(255,255,255,0.9);
	margin-right: 4px;
}

/* ============================================
   城市卡片 - Compact Design
   ============================================ */
.cities-section {
	background: var(--bg-gradient);
	padding-bottom: 48px;
}

.cities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.city-card-link {
	text-decoration: none;
}

.city-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	transition: var(--transition-base);
}

.city-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.city-image {
	position: relative;
	height: 160px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.city-placeholder {
	font-size: 44px;
	color: var(--text-tertiary);
	opacity: 0.4;
	transition: var(--transition-base);
}

.city-card:hover .city-placeholder {
	transform: scale(1.1);
	opacity: 0.6;
}

.city-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
}

.city-overlay h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-white);
	margin-bottom: 2px;
}

.city-overlay p {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-transform: capitalize;
}

.city-count {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
}

.city-info {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.city-country {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
}

/* ============================================
   页脚 - Clean Footer
   ============================================ */
.footer {
	background: var(--bg-dark);
	color: var(--text-white);
	padding: 60px 0 30px;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.footer-section h4 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--text-white);
}

.footer-section ul {
	list-style: none;
}

.footer-section li {
	margin-bottom: 12px;
}

.footer-section a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	transition: var(--transition-fast);
}

.footer-section a:hover {
	color: var(--text-white);
}

.footer-section li:not(:has(a)) {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.footer-bottom {
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.footer-bottom p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   面包屑导航
   ============================================ */
.breadcrumbs {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-light);
	padding: 12px 0;
}

.breadcrumb-list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	font-size: 14px;
}

.breadcrumb-list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb-list li:not(:last-child)::after {
	content: '/';
	color: var(--text-tertiary);
}

.breadcrumb-list a {
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.breadcrumb-list a:hover {
	color: var(--primary-color);
}

.breadcrumb-list .current {
	color: var(--text-primary);
	font-weight: 500;
}

/* ============================================
   列表页面 - Region/City/Guide List
   ============================================ */
.page-header {
	background: var(--bg-dark);
	padding: 60px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.page-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(255, 87, 34, 0.2) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 50%, rgba(26, 115, 232, 0.2) 0%, transparent 50%);
}

.page-header-content {
	position: relative;
	z-index: 1;
}

.page-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	color: var(--text-white);
	margin-bottom: 12px;
	letter-spacing: -0.5px;
}

.page-description {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.7);
	max-width: 600px;
	margin: 0 auto;
}

.list-section {
	padding: 48px 0;
}

/* ============================================
   详情页面
   ============================================ */
.detail-header {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #2C3E50 100%);
	padding: 60px 0;
	color: var(--text-white);
	position: relative;
	overflow: hidden;
}

.detail-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.5;
}

.detail-header-content {
	position: relative;
	z-index: 1;
}

.detail-title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
	margin-bottom: 16px;
	letter-spacing: -1px;
}

.detail-meta {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
}

.detail-meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.detail-content {
	padding: 48px 0;
}

.detail-section {
	margin-bottom: 48px;
}

.detail-section-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.detail-section-title::before {
	content: '';
	width: 4px;
	height: 24px;
	background: var(--primary-gradient);
	border-radius: 2px;
}

/* ============================================
   搜索框
   ============================================ */
.search-box {
	position: relative;
	max-width: 500px;
	margin: 24px auto 0;
}

.search-input {
	width: 100%;
	padding: 16px 20px 16px 50px;
	border: 2px solid transparent;
	border-radius: var(--radius-full);
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	font-size: 16px;
	color: var(--text-primary);
	transition: var(--transition-base);
}

.search-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255, 87, 34, 0.1);
}

.search-input::placeholder {
	color: var(--text-tertiary);
}

.search-icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-tertiary);
	font-size: 18px;
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 1024px) {
	.container {
		padding: 0 20px;
	}

	.main-nav {
		display: none;
	}

	.header-content {
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.hero {
		min-height: 320px;
	}

	.hero-content {
		padding: 60px 0;
	}

	.hero-title {
		font-size: 32px;
	}

	/* Hero mobile */
	.hero-search-box {
		flex-direction: column;
		border-radius: 10px;
		padding: 8px;
	}
	.hero-search-input {
		width: 100%;
	}
	.hero-search-btn {
		width: 100%;
		border-radius: 8px;
		padding: 12px;
	}
	.hero-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
		margin-top: 24px;
		padding: 16px 20px;
	}
	.hero-stat-num {
		font-size: 20px;
	}
	.hero-stat-label {
		font-size: 12px;
	}

	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-top: 32px;
	}

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

	.guides-grid,
	.destinations-grid,
	.cities-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.header-actions {
		gap: 8px;
	}

	.btn-login,
	.btn-register {
		padding: 8px 14px;
		font-size: 13px;
	}

	.lang-btn span {
		display: none;
	}

	.footer-content {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
}

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

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

	.footer-content {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   动画效果
   ============================================ */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.guide-card,
.destination-card,
.city-card {
	animation: fadeIn 0.5s ease-out;
	animation-fill-mode: both;
}

.guide-card:nth-child(1),
.destination-card:nth-child(1),
.city-card:nth-child(1) { animation-delay: 0.1s; }
.guide-card:nth-child(2),
.destination-card:nth-child(2),
.city-card:nth-child(2) { animation-delay: 0.15s; }
.guide-card:nth-child(3),
.destination-card:nth-child(3),
.city-card:nth-child(3) { animation-delay: 0.2s; }
.guide-card:nth-child(4),
.destination-card:nth-child(4),
.city-card:nth-child(4) { animation-delay: 0.25s; }
.guide-card:nth-child(5),
.destination-card:nth-child(5),
.city-card:nth-child(5) { animation-delay: 0.3s; }
.guide-card:nth-child(6),
.destination-card:nth-child(6),
.city-card:nth-child(6) { animation-delay: 0.35s; }

/* ============================================
   滚动条样式
   ============================================ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--border-medium);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-tertiary);
}

/* ============================================
   选中文本样式
   ============================================ */
::selection {
	background: var(--primary-color);
	color: var(--text-white);
}

/* ============================================
   列表页 - Region/City/Guide List Pages
   ============================================ */
.main-content {
	min-height: calc(100vh - 200px);
}

.page-subtitle {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.7);
	max-width: 600px;
	margin: 0 auto;
}

.page-stats {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-white);
}

.regions-section,
.list-section {
	padding: 48px 0;
	background: var(--bg-gradient);
}

.regions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.region-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	transition: var(--transition-base);
}

.region-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.region-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.region-image {
	position: relative;
	height: 180px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.region-placeholder {
	font-size: 52px;
	color: var(--text-tertiary);
	opacity: 0.4;
	transition: var(--transition-base);
}

.region-card:hover .region-placeholder {
	transform: scale(1.1);
	opacity: 0.6;
}

.region-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.region-info {
	padding: 20px;
}

.region-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.region-slug {
	font-size: 13px;
	color: var(--text-tertiary);
	text-transform: capitalize;
	margin-bottom: 12px;
}

.region-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: var(--text-secondary);
}

.region-meta i {
	color: var(--primary-color);
	margin-right: 6px;
}

/* Guide List Page - Card Variation */
.guide-card-link {
	text-decoration: none;
	display: block;
}

.guide-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	transition: var(--transition-base);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.guide-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.guide-image {
	position: relative;
	height: 180px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.guide-placeholder {
	font-size: 48px;
	color: var(--text-tertiary);
	opacity: 0.4;
	transition: var(--transition-base);
}

.guide-card:hover .guide-placeholder {
	transform: scale(1.1);
	opacity: 0.6;
}

.guide-category {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 14px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
}

.guide-content {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.guide-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.guide-excerpt {
	font-size: 14px;
	color: var(--text-tertiary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 16px;
	flex: 1;
}

.guide-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--text-tertiary);
}

.guide-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.guide-meta i {
	font-size: 12px;
}

.guide-location {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light);
	font-size: 13px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 6px;
}

.guide-location i {
	color: var(--primary-color);
}

/* City List */
.city-list-section {
	padding: 48px 0;
	background: var(--bg-gradient);
}

.cities-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.city-list-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	transition: var(--transition-base);
}

.city-list-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.city-list-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.city-list-image {
	position: relative;
	height: 160px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.city-list-placeholder {
	font-size: 44px;
	color: var(--text-tertiary);
	opacity: 0.4;
	transition: var(--transition-base);
}

.city-list-card:hover .city-list-placeholder {
	transform: scale(1.1);
	opacity: 0.6;
}

.city-list-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
}

.city-list-content {
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.city-list-name {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
}

.city-list-country {
	font-size: 13px;
	color: var(--text-tertiary);
	margin-top: 2px;
}

.city-list-count {
	font-size: 13px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 6px;
}

.city-list-count i {
	color: var(--primary-color);
}

/* 分页样式 */
.pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--border-light);
}

.pagination-info {
	font-size: 14px;
	color: var(--text-tertiary);
}

.pagination-links {
	display: flex;
	gap: 12px;
}

.pagination-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.pagination-links a:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background: rgba(255, 87, 34, 0.05);
}

.pagination-links a.next:hover {
	background: var(--primary-color);
	color: var(--text-white);
	border-color: var(--primary-color);
}

/* ============================================
   详情页 - Region/City/Guide Detail
   ============================================ */
.detail-hero {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 100%);
	padding: 80px 0;
	color: var(--text-white);
	position: relative;
	overflow: hidden;
}

.detail-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 50%, rgba(255, 87, 34, 0.2) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 50%, rgba(26, 115, 232, 0.2) 0%, transparent 50%);
}

.detail-hero-content {
	position: relative;
	z-index: 1;
}

.detail-hero-title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
	margin-bottom: 16px;
	letter-spacing: -1px;
}

.detail-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
}

.detail-hero-meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.detail-body {
	padding: 48px 0;
	background: var(--bg-gradient);
}

.detail-section {
	margin-bottom: 48px;
}

.detail-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.detail-section-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 12px;
}

.detail-section-title::before {
	content: '';
	width: 4px;
	height: 24px;
	background: var(--primary-gradient);
	border-radius: 2px;
}

.detail-section-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	transition: var(--transition-fast);
}

.detail-section-more:hover {
	gap: 10px;
	color: var(--primary-dark);
}

/* Guide Detail Page */
.guide-detail-content {
	max-width: 800px;
	margin: 0 auto;
}

.guide-detail-body {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	padding: 40px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	line-height: 1.8;
	font-size: 16px;
	color: var(--text-secondary);
}

.guide-detail-body h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 32px 0 16px;
}

.guide-detail-body h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 24px 0 12px;
}

.guide-detail-body p {
	margin-bottom: 16px;
}

.guide-detail-body ul,
.guide-detail-body ol {
	margin: 16px 0;
	padding-left: 24px;
}

.guide-detail-body li {
	margin-bottom: 8px;
}

.guide-detail-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin: 24px 0;
}

.guide-author-box {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	margin-top: 32px;
}

.author-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	font-size: 24px;
	font-weight: 700;
}

.author-info {
	flex: 1;
}

.author-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
}

.author-bio {
	font-size: 14px;
	color: var(--text-tertiary);
	margin-top: 2px;
}

/* ============================================
   工具类
   ============================================ */
.text-gradient {
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.shadow-glow {
	box-shadow: var(--shadow-glow);
}

.glass-effect {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

/* ============================================
   城市详情页特殊样式
   ============================================ */
.city-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

/* ============================================
   无数据提示
   ============================================ */
.no-data {
	text-align: center;
	padding: 48px 24px;
	color: var(--text-tertiary);
}

.no-data i {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.no-data p {
	font-size: 16px;
}

/* ============================================
   按国家分组样式
   ============================================ */
.region-group {
	margin-bottom: 48px;
}

.region-group:first-child {
	margin-top: 0;
}

.region-group-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border-light);
	display: flex;
	align-items: center;
}

.region-group-title a {
	display: flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition-fast);
}

.region-group-title a:hover {
	color: var(--primary-color);
}

.region-group-title i {
	font-size: 14px;
	color: var(--text-tertiary);
	transition: var(--transition-fast);
}

.region-group-title a:hover i {
	transform: translateX(4px);
	color: var(--primary-color);
}

/* ============================================
   目的地详情页头部
   ============================================ */
.destination-header {
	background: var(--bg-dark);
	position: relative;
	overflow: hidden;
}

.destination-hero {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.destination-hero .destination-placeholder {
	position: absolute;
	font-size: 120px;
	color: rgba(255, 255, 255, 0.1);
	transition: var(--transition-slow);
}

.destination-hero:hover .destination-placeholder {
	transform: scale(1.05);
	opacity: 0.15;
}

.destination-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
	display: flex;
	align-items: flex-end;
	padding: 48px 0;
}

.destination-title {
	font-size: clamp(36px, 5vw, 52px);
	font-weight: 800;
	color: var(--text-white);
	margin-bottom: 8px;
	letter-spacing: -1px;
}

.destination-subtitle {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Section Footer */
.section-footer {
	text-align: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--border-light);
}

.btn-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--primary-gradient);
	color: var(--text-white);
	border-radius: var(--radius-full);
	font-size: 15px;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	transition: var(--transition-base);
}

.btn-more:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-more i {
	transition: var(--transition-fast);
}

.btn-more:hover i {
	transform: translateX(4px);
}

/* City Slug */
.city-slug {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: capitalize;
}

/* ============================================
   移动端菜单按钮
   ============================================ */
.mobile-menu-btn {
	display: none;
	padding: 8px;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 24px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.region-group-title {
		font-size: 18px;
	}

	.destination-hero {
		min-height: 240px;
	}

	.destination-overlay {
		padding: 32px 0;
	}
}

/* ============================================
   攻略详情页样式
   ============================================ */
.guide-article {
	background: var(--bg-secondary);
}

.article-header {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #2C3E50 100%);
	padding: 60px 0;
	color: var(--text-white);
	position: relative;
	overflow: hidden;
}

.article-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.5;
}

.article-header .container {
	position: relative;
	z-index: 1;
}

.article-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 16px;
	line-height: 1.3;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.article-meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.article-meta i {
	font-size: 14px;
	color: var(--primary-light);
}

/* Cover Image */
.article-cover {
	position: relative;
	background: var(--bg-tertiary);
	overflow: hidden;
}

.article-cover img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
}

.cover-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

.cover-placeholder i {
	font-size: 64px;
	color: var(--text-tertiary);
	opacity: 0.4;
}

/* Article Layout */
.article-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	padding: 48px 0;
}

.article-content {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	padding: 40px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
}

.article-excerpt {
	padding: 20px;
	background: linear-gradient(135deg, rgba(255, 87, 34, 0.05) 0%, rgba(26, 115, 232, 0.05) 100%);
	border-left: 4px solid var(--primary-color);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin-bottom: 32px;
}

.article-excerpt p {
	font-size: 17px;
	color: var(--text-secondary);
	line-height: 1.8;
	margin: 0;
}

.article-body {
	font-size: 16px;
	line-height: 1.9;
	color: var(--text-secondary);
}

.article-body h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 36px 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border-light);
}

.article-body h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 28px 0 16px;
}

.article-body p {
	margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
	margin: 20px 0;
	padding-left: 28px;
}

.article-body li {
	margin-bottom: 10px;
	line-height: 1.8;
}

.article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin: 28px 0;
	box-shadow: var(--shadow-md);
}

.article-body a {
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.article-body a:hover {
	color: var(--primary-dark);
}

.article-body blockquote {
	margin: 24px 0;
	padding: 20px 24px;
	background: var(--bg-secondary);
	border-left: 4px solid var(--primary-color);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--text-secondary);
}

.article-body code {
	background: var(--bg-secondary);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
	font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
	color: #e83e8c;
}

.article-body pre {
	background: var(--bg-secondary);
	padding: 16px 20px;
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: 24px 0;
}

.article-body pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: 0.9em;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 0.95em;
}

.article-body table th,
.article-body table td {
	padding: 10px 14px;
	border: 1px solid var(--border-light);
	text-align: left;
}

.article-body table th {
	background: var(--bg-secondary);
	font-weight: 600;
	color: var(--text-primary);
}

/* ---- Table of Contents ---- */
.toc-nav {
	column-count: 2;
	column-gap: 24px;
}
@media (max-width: 576px) {
	.toc-nav { column-count: 1; }
}
.toc-link {
	color: var(--text-secondary);
	padding: 4px 0 !important;
	transition: color 0.2s, padding-left 0.2s;
}
.toc-link:hover {
	color: var(--primary-color) !important;
	padding-left: 4px;
}
.toc-link.fw-semibold {
	color: var(--text-primary);
}

/* Article Tags */
.article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--border-light);
}

.article-tags i {
	color: var(--text-tertiary);
	font-size: 14px;
}

.article-tags a {
	padding: 8px 16px;
	background: var(--bg-tertiary);
	border-radius: var(--radius-full);
	font-size: 13px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.article-tags a:hover {
	background: var(--primary-color);
	color: var(--text-white);
}

/* Article Share */
.article-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border-light);
}

.article-share > span {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

.share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--bg-tertiary);
	border: none;
	border-radius: 50%;
	font-size: 18px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
}

.share-btn:hover {
	transform: translateY(-2px);
	color: var(--text-white);
}

.share-btn:nth-child(2):hover { background: #E6162D; }
.share-btn:nth-child(3):hover { background: #07C160; }
.share-btn:nth-child(4):hover { background: #1DA1F2; }
.share-btn:nth-child(5):hover { background: var(--primary-color); }

/* Sidebar */
.article-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sidebar-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
}

.sidebar-card h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-light);
}

.sidebar-card h4 i {
	color: var(--primary-color);
}

/* Author Card */
.author-card {
	text-align: center;
}

.author-avatar {
	font-size: 64px;
	color: var(--text-tertiary);
	margin-bottom: 12px;
}

.author-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

/* Location Card */
.location-list {
	list-style: none;
}

.location-list li {
	margin-bottom: 10px;
}

.location-list a {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	font-size: 14px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
}

.location-list a:hover {
	background: rgba(255, 87, 34, 0.1);
	color: var(--primary-color);
}

.location-list a::before {
	content: '\f3c5';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 10px;
	color: var(--text-tertiary);
}

/* Related Card */
.related-list {
	list-style: none;
}

.related-list li {
	margin-bottom: 12px;
}

.related-list a {
	display: block;
	padding: 12px 16px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
	transition: var(--transition-fast);
}

.related-list a:hover {
	background: rgba(255, 87, 34, 0.1);
	color: var(--primary-color);
}

/* Responsive Layout */
@media (max-width: 1024px) {
	.article-layout {
		grid-template-columns: 1fr;
	}

	.article-sidebar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.article-header {
		padding: 40px 0;
	}

	.article-title {
		font-size: 26px;
	}

	.article-meta {
		gap: 12px;
	}

	.article-content {
		padding: 24px;
	}

	.article-body {
		font-size: 15px;
	}

	.article-layout {
		gap: 24px;
		padding: 32px 0;
	}
}

/* ============================================
   城市详情页额外样式
   ============================================ */
.city-header {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 100%);
}

.destination-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.destination-hero .destination-placeholder {
	position: absolute;
	font-size: 120px;
	color: rgba(255, 255, 255, 0.08);
}

.destination-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
	display: flex;
	align-items: flex-end;
	padding: 48px 0;
}

/* Inline Breadcrumb */
.inline-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
}

.inline-breadcrumb a {
	color: rgba(255, 255, 255, 0.7);
	transition: var(--transition-fast);
}

.inline-breadcrumb a:hover {
	color: var(--text-white);
}

.inline-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.4);
}

.inline-breadcrumb .current {
	color: var(--text-white);
	font-weight: 500;
}

/* Guide Card in Detail Pages */
.guide-card .guide-title a {
	color: inherit;
	text-decoration: none;
}

.guide-card .guide-title a:hover {
	color: var(--primary-color);
}

.guide-excerpt {
	font-size: 14px;
	color: var(--text-tertiary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 12px;
}

.guide-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--text-tertiary);
}

.guide-meta span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.guide-meta i {
	font-size: 11px;
}

/* Divider */
.divider {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.3);
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 64px 24px;
	color: var(--text-tertiary);
}

.empty-state i {
	font-size: 56px;
	margin-bottom: 20px;
	opacity: 0.4;
}

.empty-state p {
	font-size: 16px;
}

/* Section Class for Spacing */
.section {
	padding: 48px 0;
}

/* Inline Breadcrumb */
.inline-breadcrumb {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 16px;
}

.inline-breadcrumb a {
	color: rgba(255, 255, 255, 0.8);
	transition: var(--transition-fast);
}

.inline-breadcrumb a:hover {
	color: var(--text-white);
}

.inline-breadcrumb .separator {
	margin: 0 8px;
	opacity: 0.5;
}

.inline-breadcrumb .current {
	color: var(--text-white);
	font-weight: 500;
}

/* City Header */
.city-header .destination-hero {
	min-height: 280px;
}

.city-header .destination-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
	color: rgba(255, 255, 255, 0.08);
}

/* Guide Card Title Link */
.guide-card .guide-title a {
	color: inherit;
	transition: var(--transition-fast);
}

.guide-card:hover .guide-title a {
	color: var(--primary-color);
}


/* ============================================
   行程规划表单页 Itinerary Form Page
   ============================================ */

/* 页面背景 */
.it-form-page{background:#f8f7ff}

/* Hero */
.if-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;position:relative;overflow:hidden;border:none !important}
.if-hero::before{content:'';position:absolute;top:-40%;right:-15%;width:320px;height:320px;background:rgba(255,255,255,0.06);border-radius:50%}
.if-hero::after{content:'';position:absolute;bottom:-25%;left:-8%;width:240px;height:240px;background:rgba(255,255,255,0.04);border-radius:50%}
.if-hero h1{position:relative;z-index:1;font-size:1.75rem;letter-spacing:-0.3px}
@media(min-width:768px){.if-hero h1{font-size:2.4rem}}
.if-hero p{position:relative;z-index:1;font-size:0.95rem;line-height:1.7}

/* 特色卡片 */
.feature-card{background:#fff;border:1px solid #e8e5ff;transition:transform .2s ease,box-shadow .2s ease;border-radius:14px;padding:16px}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(99,102,241,.12)}
.feature-icon{width:48px;height:48px;font-size:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%}
.feature-icon-blue{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.feature-icon-green{background:linear-gradient(135deg,#22c55e,#16a34a)}
.feature-icon-orange{background:linear-gradient(135deg,#f59e0b,#d97706)}

/* 目的地图签 */
.dest-chip{border:1.5px solid #e2e8f0;background:#fff;border-radius:20px;padding:6px 16px;font-size:13px;color:#475569;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dest-chip:hover{border-color:#667eea;color:#667eea;background:#f5f3ff;transform:translateY(-1px)}
.dest-chip small{font-size:10px}

/* 天数按钮 */
.day-chip-btn{cursor:pointer;border:2px solid #e2e8f0;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600;color:#64748b;transition:all .2s;display:inline-block;user-select:none;white-space:nowrap}
.day-chip-btn input{display:none}
.day-chip-btn span{pointer-events:none}
.day-chip-btn:hover{border-color:#c7d2fe;color:#4338ca}
.day-chip-btn.active{border-color:#667eea;background:#f5f3ff;color:#4338ca}

/* 表单控件 */
.it-form-page .form-control,.it-form-page .form-select{border-radius:8px;border-color:#e2e8f0;padding:10px 14px;transition:border-color .2s,box-shadow .2s}
.it-form-page .form-control:focus,.it-form-page .form-select:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.12)}
.it-form-page .input-group-text{border-radius:8px 0 0 8px;background:#f8f7ff;border-color:#e2e8f0}
.it-form-page .input-group .form-control{border-radius:0 8px 8px 0}

/* 表单卡片 */
.it-form-page .card{border:1px solid #e8e5ff !important}

/* 生成按钮 */
.if-btn-generate{background:linear-gradient(135deg,#667eea,#764ba2);border:none;letter-spacing:.5px;transition:transform .2s,box-shadow .2s;border-radius:10px}
.if-btn-generate:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4)}
.if-btn-generate:active{transform:translateY(0)}

@media(max-width:991px){.if-hero{padding:32px 24px}.if-hero h1{font-size:1.6rem}}
@media(max-width:767px){.it-form-page{padding:16px 0}.if-hero{padding:28px 20px;border-radius:16px !important}.if-hero h1{font-size:1.35rem}.dest-chip{padding:5px 12px;font-size:12px}.day-chip-btn{padding:6px 12px;font-size:12px}}


/* ============================================
   行程详情页 Itinerary View Page
   ============================================ */

.fs-7{font-size:0.75rem}

/* Hero */
.itinerary-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;position:relative;overflow:hidden}
.itinerary-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:rgba(255,255,255,0.06);border-radius:50%}
.itinerary-hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:300px;height:300px;background:rgba(255,255,255,0.04);border-radius:50%}
.itinerary-hero h1{font-size:1.65rem;letter-spacing:-0.3px;position:relative;z-index:1}
@media(min-width:768px){.itinerary-hero h1{font-size:2rem}}
.itinerary-hero .badge{border-radius:20px;letter-spacing:0.3px;position:relative;z-index:1}
.itinerary-hero .btn-light{border-radius:20px;font-weight:500;position:relative;z-index:1}

/* 摘要区 */
.itinerary-summary{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border-left:4px solid #3b82f6}
.itinerary-summary .lh-lg{line-height:1.7}

/* Day Tabs */
.it-day-tabs{background:#f1f5f9;border-radius:14px;padding:8px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.it-day-tabs::-webkit-scrollbar{display:none}
.it-day-tabs .nav-link{border-radius:12px;padding:14px 28px;color:#64748b;font-weight:700;font-size:16px;letter-spacing:0.3px;transition:all 0.25s cubic-bezier(.4,0,.2,1);border:none;white-space:nowrap;flex-shrink:0}
.it-day-tabs .nav-link:hover{background:rgba(99,102,241,0.08);color:#4338ca}
.it-day-tabs .nav-link.active{background:#fff;color:#4338ca;box-shadow:0 3px 12px rgba(99,102,241,0.15)}

/* Day Title Card */
.day-badge{width:40px;height:40px;font-size:12px;font-weight:700}
.day-title-card{border:1px solid #e2e8f0}

/* 时间线布局 */
.timeline{position:relative;padding-left:44px}
.timeline::before{content:'';position:absolute;left:21px;top:6px;bottom:6px;width:3px;background:#e2e8f0;border-radius:2px}
.timeline-node{position:relative;margin-bottom:10px}
.timeline-node:last-child{margin-bottom:0}
.timeline-dot{position:absolute;left:-37px;top:14px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease,box-shadow 0.2s ease;border:3px solid #fff}
.timeline-node:hover .timeline-dot{transform:scale(1.1);box-shadow:0 3px 12px rgba(0,0,0,0.15)}
.transit-dot{width:24px;height:24px;left:-34px;top:10px;border-width:2px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.timeline-content{width:100%}

/* 交通卡片 */
.transit-card{background:#fefce8;border:1px solid #fde68a;border-radius:10px;padding:10px 16px;margin-bottom:6px}

/* 活动卡片 */
.activity-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:2px;margin-bottom:4px;transition:all 0.25s cubic-bezier(.4,0,.2,1);cursor:default}
.activity-card:hover{border-color:#c7d2fe;box-shadow:0 4px 20px rgba(99,102,241,0.08);transform:translateY(-1px)}
.activity-card-inner{padding:16px 18px}

/* 类型标签 */
.type-chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}
.type-chip[data-type="restaurant"]{background:#fef3c7;color:#d97706}
.type-chip[data-type="attraction"]{background:#dbeafe;color:#2563eb}
.type-chip i{font-size:10px}

/* 时间段小标签 */
.time-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}

/* 评分徽章 */
.rating-badge{background:#fef3c7;color:#d97706;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}
.rating-badge i{font-size:10px}

/* 简介 */
.activity-desc{line-height:1.65;margin-bottom:12px}

/* 必玩项目/必吃菜品 */
.highlights-section{background:#fafafa;border-radius:10px;padding:12px 14px;border:1px solid #f1f5f9}
.highlights-label i{font-size:11px}
.highlights-list{display:flex;flex-direction:column;gap:6px}
.highlight-item{align-items:flex-start}
.highlight-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff;font-size:10px;font-weight:700;flex-shrink:0;line-height:18px}

/* 活动节点高亮 */
.timeline-node.tl-active .activity-card{border-color:#a5b4fc;box-shadow:0 0 0 2px rgba(99,102,241,0.1)}
.timeline-node.tl-active .timeline-dot{transform:scale(1.15);box-shadow:0 3px 12px rgba(99,102,241,0.25)}

/* 元信息标签 */
.meta-tag{color:#64748b;background:#f1f5f9;padding:4px 10px;border-radius:8px;font-size:12px;white-space:nowrap}
.meta-tag-free{color:#16a34a;background:#f0fdf4}

/* 预算 & 贴士 */
.budget-icon{width:34px;height:34px}
.tip-icon{width:34px;height:34px}
.budget-total{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%)}
.budget-total strong{font-weight:700;letter-spacing:-0.5px}
.tip-num{font-weight:700;line-height:24px}
.tip-item{padding:8px 10px;background:#f8fafc;border-radius:10px;border:1px solid #f1f5f9}

/* 地图 */
.map-header i{font-size:15px}
.map-day-indicator{min-width:48px;text-align:center}

/* 分享菜单 */
.share-menu .dropdown-item i{width:22px;text-align:center}
.share-menu .dropdown-item:hover{background:#f1f5f9}

/* 响应式 */
@media(max-width:991px){
    .itinerary-hero{padding:24px}
    .it-day-tabs .nav-link{padding:12px 20px;font-size:15px}
    .map-card{position:static!important}
    #itinerary-map{height:360px}
}
@media(max-width:767px){
    .timeline{padding-left:36px}
    .timeline::before{left:17px}
    .timeline-dot{left:-30px;width:26px;height:26px;top:12px}
    .transit-dot{left:-27px;width:21px;height:21px;top:8px}
    .activity-card-inner{padding:14px 14px}
    .itinerary-hero h1{font-size:1.35rem}
    .it-day-tabs .nav-link{padding:9px 12px;font-size:13px;flex:1}
    .day-badge{width:34px;height:34px;font-size:11px}
}
@media(max-width:480px){
    .timeline{padding-left:32px;margin-left:2px}
    .timeline::before{left:15px;width:2px}
    .timeline-dot{left:-28px;width:24px;height:24px;top:10px;border-width:2px}
    .transit-dot{left:-25px;width:19px;height:19px;top:7px}
    .activity-card-inner{padding:12px 12px}
    .time-chip{font-size:10px;padding:2px 8px}
    .meta-tag{font-size:11px;padding:3px 8px}
}

/* 打印优化 */
@media print{
    body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
    .itinerary-hero{background:#667eea!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .navbar,.share-menu,#itinerary-map,.map-card,nav[aria-label="breadcrumb"],footer,.btn{display:none!important}
    .container{max-width:100%!important;padding:0!important}
    .col-lg-7{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
    .col-lg-5{display:none!important}
    .it-day-tabs{display:none!important}
    .tab-pane{display:block!important;opacity:1!important}
    .day-title-card{page-break-after:avoid;border:1px solid #ddd;break-inside:avoid}
    .activity-card{break-inside:avoid;box-shadow:none;border:1px solid #e2e8f0;page-break-inside:avoid}
    .timeline-node{page-break-inside:avoid}
    .timeline::before{background:#ccc!important}
    h1{font-size:20pt!important}
    .itinerary-summary,.card{border:1px solid #ddd!important;box-shadow:none!important}
    a[href]::after{content:''!important}
    .budget-total{background:#666!important}
    @page{margin:15mm 10mm;size:A4}
}

/* ---- Export Cards ---- */
.export-card {
    width: 1080px;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #1e293b;
    display: flex;
    flex-direction: column;
}

/* ============================================
   认证页面 Auth Pages (登录/注册/个人中心)
   ============================================ */

.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 16px 40px;background:linear-gradient(180deg,#f0eeff 0%,#fff 40%)}
.auth-card{background:#fff;border:1px solid #e8e5ff !important}
.auth-logo{width:72px;height:72px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:30px}
.auth-card .nav-pills .nav-link{border-radius:8px;color:#666;font-weight:500;padding:8px 16px;margin:0 2px;border:none;outline:none}
.auth-card .nav-pills .nav-link.active{background:linear-gradient(135deg,#667eea,#764ba2) !important;color:#fff !important}
.auth-card .nav-pills .nav-link:focus{outline:none;box-shadow:0 0 0 3px rgba(102,126,234,0.2)}
.auth-card .nav-pills .nav-link:hover:not(.active){background:#f0eeff;color:#4338ca}
.auth-card .form-control{border-radius:8px;padding:10px 14px}
.auth-card .form-control:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.15)}
.auth-card .btn-primary{border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;transition:transform 0.2s,box-shadow 0.2s}
.auth-card .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(102,126,234,0.4)}
.auth-card .btn-primary:active{transform:translateY(0)}
.auth-card .input-group-text{border-radius:8px 0 0 8px;background:#f8f7ff;border-color:#e8e5ff}

@media(max-width:576px){.auth-page{padding:70px 12px 30px;min-height:auto}}

.member-page{min-height:80vh}
.member-avatar{width:72px;height:72px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:32px}

/* ============================================
   行程任务页 Itinerary Task Page
   ============================================ */

.task-page{min-height:80vh;display:flex;align-items:center;padding:40px 0}
.task-card{background:#fff;position:relative;overflow:hidden}
.task-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}

/* 动画旋转器 */
.task-spinner{width:72px;height:72px;position:relative;margin-bottom:16px}
.spinner-ring{width:100%;height:100%;border-radius:50%;border:3px solid #ede9ff;border-top-color:#667eea;animation:spin 1s linear infinite}
.spinner-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#667eea}
@keyframes spin{to{transform:rotate(360deg)}}

/* 阶段步骤 */
.task-steps{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto}
.task-step{display:flex;align-items:center;gap:12px;opacity:.35;transition:all .3s}
.task-step.active{opacity:1}
.task-step.done{opacity:.65}
.step-dot{width:32px;height:32px;border-radius:50%;background:#ede9ff;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888;flex-shrink:0;transition:all .3s}
.task-step.active .step-dot{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px rgba(102,126,234,.35)}
.task-step.done .step-dot{background:#c8f7dc;color:#22c55e}
.step-text{display:flex;flex-direction:column;line-height:1.3}
.step-name{font-size:13px;font-weight:600;color:#333}
.step-desc{font-size:11px;color:#999}

@media(max-width:576px){.task-page{padding:20px 0}.task-info{flex-wrap:justify-content:center}}

/* Navbar z-index (override bootstrap-custom.css sticky-top z-index:100) */
.navbar.sticky-top {
    z-index: 1030;
}
.navbar .dropdown-menu {
    z-index: 1050;
}
/* Navbar hover dropdown */
.navbar .dropdown-menu {
    z-index: 1050;
}
.navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: fadeInDown 0.2s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown .dropdown-item {
    font-size: 14px;
    padding: 8px 16px;
    color: #333;
}
.navbar .dropdown .dropdown-item:hover,
.navbar .dropdown .dropdown-item.active {
    background: #f0eeff;
    color: #667eea;
}
.navbar .dropdown .dropdown-item i {
    width: 20px;
    text-align: center;
}

/* ---- Export Modal ---- */
.export-tpl-card {
    display: block;
    cursor: pointer;
    text-align: center;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.export-tpl-card:hover { border-color: #a5b4fc; }
.export-tpl-card.active,
.export-tpl-card:has(input:checked) {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
}
.export-tpl-card input { display: none; }
.export-tpl-preview {
    height: 80px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.export-tpl-photo { background: linear-gradient(135deg, #667eea, #764ba2); }
.export-tpl-map { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.export-tpl-magazine { background: #111; }
.export-tpl-minimal { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.export-tpl-icon { font-size: 36px; filter: grayscale(0); }
.export-tpl-name { font-size: 13px; font-weight: 600; color: #475569; }

.export-size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    flex: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.export-size-card:hover { border-color: #a5b4fc; }
.export-size-card.active,
.export-size-card:has(input:checked) {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
    background: #f5f3ff;
}
.export-size-card input { display: none; }
.export-size-ratio {
    border: 2px solid #94a3b8;
    border-radius: 4px;
    background: #f8fafc;
    margin-bottom: 8px;
}
.export-size-card.active .export-size-ratio {
    border-color: #6366f1;
    background: #ede9fe;
}
.export-size-label { font-size: 13px; font-weight: 600; color: #1e293b; }
.export-size-dim { font-size: 11px; color: #94a3b8; }

/* ---- Related Guide Link (single line truncate) ---- */
.related-guide-link {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}