/* ===== 全局样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f5f7fa; color: #333; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
/* ===== 头部样式 ===== */
header { background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); color: white; padding: 15px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.header-container { width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; }
.logo-icon { font-size: 28px; margin-right: 10px; background: white; color: #2ecc71; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.logo-text { font-size: 24px; font-weight: bold; }
nav ul { display: flex; list-style: none; }
nav li { margin: 0 15px; }
nav a { color: white; text-decoration: none; font-weight: 500; padding: 5px 10px; border-radius: 20px; transition: background 0.3s; }
nav a:hover,
nav a.active { background: rgba(255, 255, 255, 0.2); }
.auth-buttons { display: flex; align-items: center; }
.auth-button { background: white; color: #3498db; border: none; padding: 8px 15px; border-radius: 20px; margin-left: 10px; cursor: pointer; font-weight: 500; transition: all 0.3s; }
.auth-button:hover { background: #f5f5f5; transform: translateY(-2px); }
.user-info { display: flex; align-items: center; color: white; }
.user-info a{ color: white; text-decoration: none; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; border: 2px solid white; }
/* ===== 主内容区域 ===== */
.container { width:1280px; margin: 30px auto; padding: 0 20px; flex: 1; }
.layout { display: flex; gap: 20px; }
.main-content { flex: 7; display: flex; flex-direction: column; gap: 20px; }
.sidebar { flex: 3; display: flex; flex-direction: column; gap: 20px; }
.card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 20px; transition: transform 0.3s ease; }
.card:hover { transform: translateY(-5px); }
/* ===== 语音直播室样式 ===== */
.broadcaster-info { display: flex; align-items: center; margin-bottom: 20px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-right: 20px; border: 3px solid #3498db; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.broadcaster-details h2 { color: #2c3e50; margin-bottom: 5px; }
.broadcaster-details p { color: #7f8c8d; font-size: 14px; }
.song-info { background: #e8f4fc; padding: 15px; border-radius: 8px; margin: 15px 0; }
.song-title { font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
.song-time { color: #7f8c8d; font-size: 14px; }
.audio-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.play-btn { background: #3498db; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.play-btn:hover { background: #2980b9; }
.volume-control { display: flex; align-items: center; flex: 1; margin-left: 20px; padding-left: 10px; }
.volume-control input { width: 100%; margin-left: 10px; }
.chat-container { display: flex; flex-direction: column; height: 542px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px; background: #f9f9f9; border-radius: 8px; margin-bottom: 15px; }
.message { padding: 10px; margin-bottom: 10px; border-radius: 8px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.message .user { font-weight: bold; color: #3498db; }
.message .time { font-size: 12px; color: #95a5a6; margin-left: 8px; }
.chat-input { display: flex; gap: 10px; }
.chat-input input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 20px; outline: none; }
.chat-input button { background: #3498db; color: white; border: none; border-radius: 20px; padding: 0 20px; cursor: pointer; transition: background 0.3s; }
.chat-input button:hover { background: #2980b9; }
.stats { display: flex; justify-content: space-around; text-align: center; margin-bottom: 20px; }
.stat-item { padding: 10px; }
.stat-value { font-size: 24px; font-weight: bold; color: #3498db; margin-bottom: 5px; }
.stat-label { font-size: 14px; color: #7f8c8d; }
.rules h3 { color: #2c3e50; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.rules ul { padding-left: 20px; margin-bottom: 15px; }
.rules li { margin-bottom: 10px; font-size: 14px; color: #34495e; }
.highlight { background: #e8f4fc; padding: 15px; border-radius: 8px; margin-top: 15px; }
/* ===== 视频列表页样式 ===== */
.page-header { text-align: center; margin-bottom: 40px; }
.page-header h1 { color: #2c3e50; font-size: 2.5rem; margin-bottom: 15px; }
.page-header p { color: #7f8c8d; font-size: 1.1rem; max-width: 700px; margin: 0 auto; }
.categories-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.category-btn { background: white; border: 2px solid #3498db; color: #3498db; padding: 4px 20px; text-decoration: none; border-radius: 30px; font-weight: 500; cursor: pointer; transition: all 0.3s; }
.category-btn:hover,
.category-btn.active { background: #3498db; color: white; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; }
.video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.video-card:hover { transform: translateY(-5px); }
.video-thumb { position: relative; height: 528px; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; }
.video-info { padding: 15px; }
.video-info h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.1rem; }
.video-info p { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 15px; }
.video-meta { display: flex; justify-content: space-between; color: #95a5a6; font-size: 0.85rem; }
.featured-video { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: 40px; display: flex; }
.featured-video-thumb { flex: 1; min-height: 300px; position: relative; }
.featured-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-video-content { flex: 1; padding: 25px; display: flex; flex-direction: column; justify-content: center; }
.featured-video-content h2 a { color: #2c3e50; margin-bottom: 15px; font-size: 1.8rem; text-decoration: none; }
.featured-video-content p { color: #7f8c8d; margin-bottom: 20px; line-height: 1.6; }
.featured-badge { background: #e74c3c; color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; display: inline-block; margin-bottom: 15px; }
.category-section { margin-bottom: 60px; }
.category-header { display: flex; align-items: center; margin-bottom: 25px; }
.category-icon { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); display: flex; align-items: center; justify-content: center; margin-right: 15px; color: white; font-size: 1.5rem; }
.category-title { color: #2c3e50; font-size: 1.8rem; }
/* ===== 视频播放页样式 ===== */
.video-player-container { position: relative; width: 100%; }
.video-player { width: 100%; height:100%; background: #000; border-radius: 12px; }
.video-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.video-progress-bar { flex: 1; height: 6px; background: #e0e0e0; border-radius: 3px; margin: 0 15px; position: relative; cursor: pointer; }
.video-progress { position: absolute; height: 100%; background: #3498db; border-radius: 3px; width: 35%; }
.video-time-display { color: #7f8c8d; font-size: 14px; }
.video-volume-control { display: flex; align-items: center; margin-left: 20px; }
.video-volume-control input { width: 80px; }
.video-info h1 { color: #2c3e50; margin-bottom: 15px; font-size: 1.8rem; }
.video-meta-info { display: flex; justify-content: space-between; color: #95a5a6; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.video-actions { display: flex; gap: 15px; margin-bottom: 20px; }
.action-btn { display: flex; align-items: center; gap: 8px; background: #f8f9fa; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
.action-btn:hover { background: #e9ecef; }
.action-btn i, .action-btn { color: #3498db; text-decoration:none; }
.video-description { color: #34495e; line-height: 1.7; }
.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.comments-header h2 { color: #2c3e50; }
.comments-sort { display: flex; align-items: center; gap: 10px; }
.comments-sort select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.comment { display: flex; gap: 15px; margin-bottom: 25px; }
.comment-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-content { flex: 1; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.comment-author { font-weight: bold; color: #2c3e50; }
.comment-time { color: #95a5a6; font-size: 0.85rem; }
.comment-text { color: #34495e; margin-bottom: 10px; line-height: 1.5; }
.comment-actions { display: flex; gap: 15px; }
.comment-action { color: #7f8c8d; font-size: 0.9rem; cursor: pointer; transition: color 0.3s; }
.comment-action:hover { color: #3498db; }
.comment-action i { margin-right: 5px; }
.replies { margin-left: 40px; margin-top: 15px; padding-left: 20px; border-left: 2px solid #eee; }
.add-comment { display: flex; gap: 15px; margin-top: 20px; }
.add-comment textarea { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; min-height: 80px; outline: none; }
.add-comment button { align-self: flex-start; background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: background 0.3s; }
.add-comment button:hover { background: #2980b9; }
.recommended-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.recommended-header h2 { color: #2c3e50; }
.recommended-videos { display: flex; flex-direction: column; gap: 15px; }
.recommended-video { display: flex; gap: 10px; cursor: pointer; transition: transform 0.3s; }
.recommended-video:hover { transform: translateX(5px); }
.recommended-thumb { width: 160px; height: 120px; border-radius: 8px; overflow: hidden; }
.recommended-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recommended-info { flex: 1; }
.recommended-info h3 { color: #2c3e50; font-size: 0.95rem; margin-bottom: 5px; }
.recommended-info p { color: #7f8c8d; font-size: 0.85rem; }
.video-stats { display: flex; justify-content: space-around; text-align: center; margin-top: 15px; }
.video-stat-item { padding: 10px; }
.video-stat-value { font-size: 20px; font-weight: bold; color: #3498db; margin-bottom: 5px; }
.video-stat-label { font-size: 14px; color: #7f8c8d; }
/* ===== 底部样式 ===== */
footer { background: #2c3e50; color: white; padding: 40px 0 20px; margin-top: auto; }
.footer-container { width: 1280px; margin: 0 auto; padding: 0 20px; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; }
.footer-column { flex: 1; min-width: 200px; margin-bottom: 20px; }
.footer-column h4 { font-size: 18px; margin-bottom: 15px; color: #2ecc71; }
.footer-column ul { list-style: none; }
.footer-column li { margin-bottom: 10px; }
.footer-column a { color: #ecf0f1; text-decoration: none; transition: color 0.3s; }
.footer-column a:hover { color: #2ecc71; }
.copyright { text-align: center; padding-top: 20px; border-top: 1px solid #3a506b; color: #a0aebc; font-size: 14px; }
/* ===== 登录表单样式 ===== */
.login-form { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); z-index: 100; width: 540px; }
.login-form h2 { text-align: center; margin-bottom: 20px; color: #2c3e50; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #34495e; }
.form-group #reg-email { width: 75%; }
.form-buttons { display: flex; justify-content: space-between; margin-top: 20px; }
.form-buttons input { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.submit-btn { background: #2ecc71; color: white; }
.cancel-btn { background: #e74c3c; color: white; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99; }
.error-message { color: red; padding-left: 12px; display: none; }
/* ===== 首页样式 ===== */
.hero-section { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; padding: 40px 0; }
.hero-content { flex: 1; }
.hero-content h1 { font-size: 3rem; color: #2c3e50; margin-bottom: 20px; line-height: 1.2; }
.hero-content p { font-size: 1.2rem; color: #7f8c8d; margin-bottom: 30px; max-width: 500px; }
.hero-buttons { display: flex; gap: 15px; }
.cta-button { display: inline-block; padding: 12px 25px; border-radius: 30px; font-weight: 500; text-decoration: none; transition: all 0.3s; }
.cta-button.primary { background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); color: white; }
.cta-button.secondary { border: 2px solid #3498db; color: #3498db; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.hero-image { flex: 1; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.hero-image img { width: 100%; height: auto; display: block; }
.section { margin-bottom: 60px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.section-header h2 { color: #2c3e50; font-size: 2rem; }
.view-all { color: #3498db; text-decoration: none; font-weight: 500; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 24px; }
.room-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.room-card:hover { transform: translateY(-5px); }
.room-thumb { position: relative; height: 286px; overflow: hidden; }
.room-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-badge { position: absolute; top: 10px; left: 10px; background: #e74c3c; color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; }
.listeners { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; }
.room-info { padding: 15px; }
.room-info h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.1rem; }
.broadcaster { display: flex; align-items: center; margin-bottom: 10px; }
.broadcaster img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; }
.broadcaster span { font-size: 0.9rem; color: #7f8c8d; }
.room-info p { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 15px; }
.room-tags { display: flex; gap: 8px; }
.tag { background: #e8f4fc; color: #3498db; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; }
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.video-card:hover { transform: translateY(-5px); }
.video-card.featured { grid-column: 1 / -1; display: flex; }
.video-card.featured .video-thumb { flex: 1; height: auto; }
.video-card.featured .video-info { flex: 1; padding: 25px; display: flex; flex-direction: column; justify-content: center; }
.video-thumb { position: relative; height: 528px; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; }
.play-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.video-thumb:hover .play-overlay { opacity: 1; }
.play-overlay i { color: white; font-size: 2rem; }
.video-info { padding: 15px; }
.video-info h3 a { color: #2c3e50; margin-bottom: 10px; font-size: 1.1rem; text-decoration: none; }
.video-meta { display: flex; gap: 10px; color: #7f8c8d; font-size: 0.8rem; margin-bottom: 10px; }
.video-card.featured .video-info p { color: #7f8c8d; line-height: 1.6; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; }
.category-card { background: white; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.category-card:hover { transform: translateY(-5px); }
.category-icon { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: white; font-size: 3.2rem; overflow:hidden; }
.category-card h3 { color: #2c3e50; margin-bottom: 10px; }
.category-card p { color: #7f8c8d; margin-bottom: 20px; font-size: 0.9rem; }
.category-link { color: #3498db; text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
.testimonial-card { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.testimonial-content { margin-bottom: 20px; }
.testimonial-content p { color: #2c3e50; font-style: italic; line-height: 1.6; }
.testimonial-author { display: flex; align-items: center; }
.testimonial-author img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; }
.testimonial-author h4 { color: #2c3e50; margin-bottom: 5px; }
.testimonial-author span { color: #7f8c8d; font-size: 0.8rem; }
.newsletter { background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); padding: 60px 0; color: white; text-align: center; border-radius: 12px; margin-bottom: 60px; }
.newsletter-content { max-width: 600px; margin: 0 auto; }
.newsletter h2 { margin-bottom: 15px; font-size: 2rem; }
.newsletter p { margin-bottom: 30px; opacity: 0.9; }
.newsletter-form { display: flex; max-width: 500px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.newsletter-form button { background: #2c3e50; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.newsletter-form button:hover { background: #1a252f; }
/* ===== 书籍页面样式 ===== */
.featured-book { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: 40px; display: flex; }
.featured-book-cover { flex: 1; min-height: 300px; position: relative; overflow: hidden; }
.featured-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.featured-book-content { flex: 2; padding: 25px; display: flex; flex-direction: column; justify-content: center; }
.featured-book-content h2 { color: #2c3e50; margin-bottom: 15px; font-size: 1.8rem; }
.book-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #7f8c8d; font-size: 0.9rem; }
.book-meta .rating { color: #f39c12; }
.book-description { color: #7f8c8d; margin-bottom: 20px; line-height: 1.6; }
.book-actions { display: flex; gap: 15px; }
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; }
.book-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.book-card:hover { transform: translateY(-5px); }
.book-cover { position: relative; height: 200px; overflow: hidden; margin-bottom: 15px; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.book-badge { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 500; }
.book-info { padding: 15px; }
.book-info h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.1rem; }
.book-info .book-description { font-size: 0.9rem; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.book-info .book-actions { display: flex; justify-content: space-between; }
.pagination { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; }
.pagination-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ddd; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; }
.pagination-btn:hover { border-color: #3498db; color: #3498db; }
.pagination-btn.active { background: #3498db; color: white; border-color: #3498db; }
/* ===== 文章详情页样式 ===== */
.article-content { padding: 30px; }
.article-header { margin-bottom: 25px; }
.article-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #7f8c8d; font-size: 0.9rem; }
.article-meta .category { color: #3498db; font-weight: 500; }
.article-header h1 { color: #2c3e50; font-size: 2.2rem; line-height: 1.3; margin-bottom: 20px; }
.article-author { display: flex; align-items: center; gap: 15px; }
.article-author img { width: 50px; height: 50px; border-radius: 50%; }
.author-name { font-weight: 500; color: #2c3e50; display: block; }
.author-title { color: #7f8c8d; font-size: 0.9rem; display: block; }
.article-image { margin: 30px 0; border-radius: 12px; overflow: hidden; }
.article-image img { width: 100%; height: auto; display: block; }
.image-caption { text-align: center; color: #7f8c8d; font-size: 0.9rem; margin-top: 10px; font-style: italic; }
.article-body { line-height: 1.8; color: #34495e; }
.article-body p { margin-bottom: 20px; }
.article-body .intro { font-size: 1.1rem; font-weight: 500; color: #2c3e50; }
.article-body h2 { color: #2c3e50; margin: 30px 0 15px; font-size: 1.6rem; }
.article-body h3 { color: #2c3e50; margin: 25px 0 12px; font-size: 1.3rem; }
.article-body ul, .article-body ol { margin-bottom: 20px; padding-left: 20px; }
.article-body li { margin-bottom: 8px; }
blockquote { border-left: 4px solid #3498db; padding-left: 20px; margin: 25px 0; font-style: italic; color: #2c3e50; }
cite { display: block; margin-top: 10px; color: #7f8c8d; font-size: 0.9rem; }
.article-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 30px 0; padding-top: 20px; border-top: 1px solid #eee; }
.article-tags span { font-weight: 500; color: #2c3e50; }
.tag { background: #e8f4fc; color: #3498db; padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; text-decoration: none; transition: background 0.3s; }
.tag:hover { background: #d4e9f9; }
.article-actions { display: flex; gap: 15px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.comments-header h2 { color: #2c3e50; }
.comments-sort { display: flex; align-items: center; gap: 10px; }
.comments-sort select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.add-comment { display: flex; gap: 15px; margin-bottom: 30px; }
.comment-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-form { flex: 1; }
.comment-form textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; min-height: 100px; outline: none; margin-bottom: 10px; font-family: inherit; }
.comment-actions { display: flex; justify-content: flex-end; }
.comments-list { margin-top: 30px; }
.comment { display: flex; gap: 15px; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }
.comment:last-child { border-bottom: none; margin-bottom: 0; }
.comment-content { flex: 1; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.comment-author { font-weight: bold; color: #2c3e50; }
.comment-time { color: #95a5a6; font-size: 0.85rem; }
.comment-text { color: #34495e; margin-bottom: 15px; line-height: 1.6; }
.comment-text p { margin-bottom: 10px; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-actions { display: flex; gap: 15px; }
.comment-action { background: none; border: none; color: #7f8c8d; font-size: 0.9rem; cursor: pointer; transition: color 0.3s; display: flex; align-items: center; gap: 5px; }
.comment-action:hover { color: #3498db; }
.reply-form { display: flex; gap: 15px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.replies { margin-left: 40px; margin-top: 15px; padding-left: 20px; border-left: 2px solid #eee; }
.author-info { text-align: center; padding: 10px 0; }
.author-avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-info h3 { color: #2c3e50; margin-bottom: 10px; }
.author-bio { color: #7f8c8d; margin-bottom: 20px; line-height: 1.6; }
.author-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; }
.stat { text-align: center; }
.stat-value { display: block; font-size: 1.2rem; font-weight: bold; color: #2c3e50; }
.stat-label { display: block; color: #7f8c8d; font-size: 0.9rem; }
.related-articles { margin-top: 15px; }
.related-article { display: flex; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
.related-article:last-child { border-bottom: none; margin-bottom: 0; }
.related-thumb { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-info h4 { color: #2c3e50; font-size: 0.95rem; margin-bottom: 5px; line-height: 1.4; max-height: 42px; overflow: hidden;  }
.related-info h4 a { color: #2c3e50; text-decoration: none; }
.related-meta { color: #7f8c8d; font-size: 0.8rem; }
.newsletter-sidebar { text-align: center; }
.newsletter-sidebar h3 { color: #2c3e50; margin-bottom: 10px; }
.newsletter-sidebar p { color: #7f8c8d; margin-bottom: 15px; }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-form input { padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.newsletter-form button { background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.newsletter-form button:hover { background: #2980b9; }
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.pagination-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ddd; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; text-decoration: none; }
.pagination-btn:hover { border-color: #3498db; color: #3498db; }
.pagination-btn.active { background: #3498db; color: white; border-color: #3498db; }
.pagination-btn.disabled i { color: #CCC;  }
/* ===== 充值页面样式 ===== */
.subtitle { color: #7f8c8d; margin-bottom: 20px; }
.amount-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; }
.amount-option { border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
.amount-option:hover { border-color: #3498db; transform: translateY(-3px); }
.amount-option.active { border-color: #3498db; background: #e8f4fc; transform: translateY(-3px); }
.amount-value { font-size: 1.5rem; font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
.amount-bonus { color: #2ecc71; font-size: 0.9rem; }
.custom-amount { margin-bottom: 30px; }
.custom-amount label { display: block; margin-bottom: 8px; color: #2c3e50; font-weight: 500; }
.input-group { position: relative; max-width: 300px; }
.input-prefix { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #7f8c8d; font-weight: 500; }
.custom-amount input { width: 100%; padding: 12px 15px 12px 35px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; outline: none; transition: border-color 0.3s; }
.custom-amount input:focus { border-color: #3498db; }
.total-amount { background: #f8f9fa; padding: 20px; border-radius: 12px; margin-top: 20px; }
.total-amount h3 { color: #2c3e50; margin-bottom: 10px; }
#totalAmount { color: #2ecc71; }
.bonus-info { color: #7f8c8d; margin: 0; }
#bonusAmount { color: #2ecc71; font-weight: 500; }
.payment-methods { margin-bottom: 30px; }
.payment-method { display: flex; align-items: center; padding: 15px; border: 2px solid #e0e0e0; border-radius: 12px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s; }
.payment-method:hover { border-color: #3498db; }
.payment-method.active { border-color: #3498db; background: #e8f4fc; }
.method-logo { width: 60px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.method-logo img { max-width: 100%; max-height: 100%; }
.method-info { flex: 1; }
.method-info h3 { color: #2c3e50; margin-bottom: 5px; font-size: 1rem; }
.method-info p { color: #7f8c8d; margin: 0; font-size: 0.9rem; }
.method-check { color: #2ecc71; font-size: 1.2rem; }
.payment-method:not(.active) .method-check { color: #e0e0e0; }
.payment-form { padding-top: 20px; border-top: 1px solid #eee; }
.paypal-info { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; }
.paypal-info p { margin: 0; color: #7f8c8d; }
.form-row { display: flex; gap: 15px; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #2c3e50; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; outline: none; transition: border-color 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #3498db; }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-actions { text-align: center; margin-top: 30px; }
#payWithPayPal { background: #0070ba; color: white; padding: 15px 30px; font-size: 1.1rem; border: none; border-radius: 30px; cursor: pointer; transition: background 0.3s; }
#payWithPayPal:hover { background: #005ea6; }
.order-details { padding: 10px 0; }
.order-item { display: flex; justify-content: space-between; margin-bottom: 12px; color: #7f8c8d; }
.order-divider { height: 1px; background: #eee; margin: 15px 0; }
.order-total { display: flex; justify-content: space-between; font-weight: bold; color: #2c3e50; margin-bottom: 8px; }
.order-credit { display: flex; justify-content: space-between; color: #2ecc71; font-weight: 500; }
.security-info { padding: 10px 0; }
.security-item { display: flex; align-items: center; margin-bottom: 20px; }
.security-item i { width: 40px; height: 40px; background: #e8f4fc; color: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.2rem; }
.security-item h4 { color: #2c3e50; margin-bottom: 5px; font-size: 1rem; }
.security-item p { color: #7f8c8d; margin: 0; font-size: 0.9rem; }
.support-info { padding: 10px 0; }
.support-info p { color: #7f8c8d; margin-bottom: 20px; }
.support-contacts { display: flex; flex-direction: column; gap: 10px; }
.support-link { display: flex; align-items: center; color: #3498db; text-decoration: none; font-weight: 500; }
.support-link i { margin-right: 10px; }
.support-link:hover { color: #2980b9; }
/* ===== 用户资料页面样式 ===== */
.profile-card { background: white; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: 20px; }
.profile-avatar { position: relative; width: 100px; height: 100px; margin: 0 auto 15px; }
.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.3s; cursor: pointer; }
.profile-avatar:hover .avatar-overlay { opacity: 1; }
.profile-info h3 { color: #2c3e50; margin-bottom: 5px; }
.profile-info p { color: #7f8c8d; margin-bottom: 15px; }
.account-balance { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 15px; }
.account-balance span { display: block; color: #7f8c8d; font-size: 0.9rem; margin-bottom: 5px; }
.account-balance strong { display: block; color: #2ecc71; font-size: 1.5rem; margin-bottom: 10px; }
.recharge-btn { display: block; background: #3498db; color: white; text-decoration: none; padding: 8px 15px; border-radius: 20px; font-weight: 500; transition: background 0.3s; }
.recharge-btn:hover { background: #2980b9; }
.settings-nav { background: white; border-radius: 12px; padding: 10px 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.nav-item { display: flex; align-items: center; padding: 12px 20px; color: #7f8c8d; text-decoration: none; transition: all 0.3s; border-left: 3px solid transparent; }
.nav-item:hover { background: #f8f9fa; color: #3498db; }
#nav-item-sel, .nav-item.active { background: #e8f4fc; color: #3498db; border-left-color: #3498db; }
.nav-item i { margin-right: 10px; width: 20px; text-align: center; }
.profile-form .form-row { display: flex; gap: 15px; margin-bottom: 20px; }
.profile-form .form-row .form-group { flex: 1; }
.avatar-upload { text-align: center; }
.avatar-preview { width: 150px; height: 150px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; border: 3px solid #e0e0e0; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: flex; justify-content: center; gap: 10px; }
.crop-container { background: white; border-radius: 12px; width: 500px; height: 621px; margin: 260px auto; overflow: hidden; position: relative; }
.crop-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; }
.crop-header h3 { color: #2c3e50; margin: 0; }
.close-modal { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #7f8c8d; }
.crop-area { width: 500px; height: 500px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; position: relative; }
.crop-area .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; }
.crop-area .cut{ border-radius: 50%; overflow: hidden; z-index: 111; position: absolute; top: 0px; left: 0px; }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; border-top: 1px solid #eee; }
.security-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }
.security-item:last-child { border-bottom: none; }
.security-info h3 { color: #2c3e50; margin-bottom: 5px; font-size: 1rem; }
.security-info p { color: #7f8c8d; margin: 0; font-size: 0.9rem; }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch label { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.toggle-switch label:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.toggle-switch input:checked + label { background-color: #2ecc71; }
.toggle-switch input:checked + label:before { transform: translateX(26px); }
.login-history { margin: 20px 0; }
.login-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }
.login-item:last-child { border-bottom: none; }
.login-info h4 { color: #2c3e50; margin-bottom: 5px; font-size: 1rem; }
.login-info p { color: #7f8c8d; margin: 0; font-size: 0.9rem; }
.login-status { padding: 5px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; }
.login-status.success { background: #e8f6ef; color: #2ecc71; }
.view-all-container { text-align: center; margin-top: 20px; }
.filters { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
.filters select { padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 8px; outline: none; }
.date-filter { display: flex; align-items: center; gap: 10px; }
.date-filter input { padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; outline: none; }
.date-filter span { color: #7f8c8d; }
.transactions-list { margin: 20px 0; }
.transaction-item { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }
.transaction-item:last-child { border-bottom: none; }
.transaction-icon { width: 40px; height: 40px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.transaction-icon .success { color: #2ecc71; }
.transaction-icon .danger { color: #e74c3c; }
.transaction-info { flex: 1; }
.transaction-info h4 { color: #2c3e50; margin-bottom: 5px; font-size: 1rem; }
.transaction-info p { color: #7f8c8d; margin: 0; font-size: 0.9rem; }
.transaction-amount { font-weight: bold; }
.transaction-amount.success { color: #2ecc71; }
.transaction-amount.danger { color: #e74c3c; }
.support-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.support-option { background: #f8f9fa; border-radius: 12px; padding: 20px; text-align: center; }
.support-icon { width: 60px; height: 60px; border-radius: 50%; background: #e8f4fc; color: #3498db; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 1.5rem; }
.support-option h3 { color: #2c3e50; margin-bottom: 10px; }
.support-option p { color: #7f8c8d; margin-bottom: 15px; }
.support-form { margin-top: 20px; }
/* Additional styles for read page */
.book-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.book-content { line-height: 1.8; font-size: 1.1rem; margin-bottom: 30px; }
.book-content p { margin-bottom: 15px; position: relative; }
.book-controls { display: flex; justify-content: space-between; margin-top: 20px; }
.chapters-list { max-height: 400px; overflow-y: auto; }
.chapter-item { padding: 10px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.3s; }
.chapter-item:hover { background: #f5f7fa; }
.chapter-item.active { background: #e8f4fc; border-left: 3px solid #3498db; }
.chapter-number a { text-decoration: none; font-weight: 500; color: #2c3e50; }
.chapter-title a { text-decoration: none; font-size: 0.9rem; color: #7f8c8d; display: block; }
.book-stats { display: flex; justify-content: space-around; margin: 20px 0; }
.book-description { font-size: 0.9rem; color: #34495e; line-height: 1.6; }
.annotations-list { margin-bottom: 20px; }
.annotation-item { position: relative; padding: 15px; margin-bottom: 15px; background: #f9f9f9; border-radius: 8px; border-left: 3px solid #2ecc71; }
.annotation-text { font-style: italic; color: #3498db; margin-bottom: 8px; }
.annotation-note { color: #2c3e50; margin-bottom: 5px; }
.annotation-meta { font-size: 0.8rem; color: #7f8c8d; }
.annotation-delete { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 0.9rem; }
.no-annotations { text-align: center; color: #7f8c8d; font-style: italic; padding: 20px; }
.add-annotation textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; min-height: 80px; outline: none; margin-bottom: 10px; }
.annotation-actions { display: flex; gap: 10px; }
.annotation-highlight { background: rgba(46, 204, 113, 0.2); border-bottom: 1px dashed #2ecc71; cursor: pointer; }
/* Articles Page Specific Styles */
.featured-article { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: 40px; display: flex; }
.featured-article-image { flex: 1; min-height: 300px; position: relative; overflow: hidden; }
.featured-article-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-article-content { flex: 1; padding: 25px; display: flex; flex-direction: column; justify-content: center; }
.featured-article-content h2 a { color: #2c3e50; margin-bottom: 15px; font-size: 1.8rem; line-height: 1.3; text-decoration: none; }
.article-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #7f8c8d; font-size: 0.9rem; }
.article-meta .category { color: #3498db; font-weight: 500; }
.article-excerpt { color: #7f8c8d; margin-bottom: 20px; line-height: 1.6; }
.article-author { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.article-author img { width: 40px; height: 40px; border-radius: 50%; }
.author-name { font-weight: 500; color: #2c3e50; display: block; }
.author-title { font-size: 0.8rem; color: #7f8c8d; display: block; }
.article-stats { display: flex; gap: 15px; color: #7f8c8d; font-size: 0.9rem; }
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; margin-bottom: 50px; }
.article-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.article-card:hover { transform: translateY(-5px); }
.article-image { position: relative; width: 100%; height: auto; overflow: hidden; }
.article-image img { width: 100%; height: 100%; object-fit: cover; }
.article-badge { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 500; }
.article-content { padding: 20px; }
.article-content h3 a { color: #2c3e50; margin-bottom: 12px; font-size: 1.2rem; line-height: 1.4; text-decoration: none; }
.article-content .article-excerpt { font-size: 0.9rem; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-footer { display: flex; justify-content: space-between; align-items: center; }
.article-footer .article-author { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.article-footer .article-author img { width: 30px; height: 30px; }
.article-footer .article-author span { font-size: 0.9rem; color: #7f8c8d; }
.article-footer .article-stats { display: flex; gap: 12px; font-size: 0.8rem; }
/*     注册页面     */
.register-container { max-width: 960px; margin: 40px auto; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.register-header { text-align: center; margin-bottom: 30px; }
.register-header h1 { color: #2c3e50; margin-bottom: 10px; font-size: 2rem; }
.register-header p { color: #7f8c8d; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #2c3e50; font-weight: 500; }
.form-group input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; outline: none; transition: border-color 0.3s; }
.form-group input:focus { border-color: #3498db; }
.email-verification { display: flex; gap: 10px; }
.email-verification input { flex: 1; }
.send-code-btn { background: #3498db; color: white; border: none; padding: 0 15px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.3s; }
.send-code-btn:hover { background: #2980b9; }
.send-code-btn:disabled { background: #95a5a6; cursor: not-allowed; }
.agreement { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.agreement input { margin-top: 3px; }
.agreement label { color: #7f8c8d; font-size: 0.9rem; line-height: 1.4; }
.agreement a { color: #3498db; text-decoration: none; }
.agreement a:hover { text-decoration: underline; }
.reg-submit-btn { width: 100%; background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); color: white; border: none; padding: 12px; border-radius: 30px; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.reg-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.login-link { text-align: center; margin-top: 20px; color: #7f8c8d; }
.login-link a { color: #3498db; text-decoration: none; font-weight: 500; }
.login-link a:hover { text-decoration: underline; }
.error-message { color: #e74c3c; font-size: 0.8rem; margin-top: 5px; display: none; }
.countdown { font-size: 0.8rem; color: #7f8c8d; margin-top: 5px; }
/* 充值结果页 */
.payment-result-container { width: 1280px; margin: 40px auto; padding: 60px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); text-align: center; }
.result-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 2.5rem; }
.success { background: #e8f6ef; color: #2ecc71; }
.pending { background: #fef5e7; color: #f39c12; }
.failed { background: #fdecea; color: #e74c3c; }
.result-title { color: #2c3e50; margin-bottom: 24px; font-size: 1.8rem; }
.result-message { color: #7f8c8d; margin-bottom: 45px; line-height: 1.6; }
.order-details { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; text-align: left; }
.detail-item { display: flex; justify-content: space-between; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.detail-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.detail-label { color: #7f8c8d; }
.detail-value { color: #2c3e50; font-weight: 500; }
.action-buttons { display: flex; justify-content: center; gap: 200px; margin-top: 20px; }
.primary-btn { background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); color: white; }
.secondary-btn { border: 2px solid #3498db; color: #3498db; background: white; }
.help-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.help-title { color: #2c3e50; margin-bottom: 15px; }
.help-contact { display: flex; justify-content: center; gap: 20px; }
.contact-item { display: flex; align-items: center; gap: 8px; color: #7f8c8d; text-decoration: none; }
.contact-item:hover { color: #3498db; }
/* 新增样式：统一弹框和消息提示 */
.custom-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; }
.custom-modal-content { background: white; border-radius: 12px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; }
.custom-modal-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.custom-modal-header h2 { color: #2c3e50; margin: 0; font-size: 1.5rem; }
.custom-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #7f8c8d; }
.custom-modal-body { padding: 20px; }
.custom-modal-footer { padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; }
/* 密码强度指示器 */
.password-strength { height: 5px; margin-top: 8px; border-radius: 3px; transition: all 0.3s ease; }
.password-strength-weak { background: #e74c3c; width: 33%; }
.password-strength-medium { background: #f39c12; width: 66%; }
.password-strength-strong { background: #2ecc71; width: 100%; }
.password-strength-text { font-size: 0.8rem; margin-top: 5px; color: #7f8c8d; }
/* 推广页面样式 */
.promotion-hero { background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%); color: white; padding: 40px 0; text-align: center; border-radius: 12px; margin-bottom: 30px; }
.promotion-stats { display: flex; justify-content: space-around; margin: 30px 0; text-align: center; }
.stat-item { padding: 12px; }
.stat-value { font-size: 1.2rem; font-weight: bold; color: #2ecc71; margin-bottom: 10px; }
.stat-label { color: #7f8c8d; font-size: 1rem; }
.referral-link-box { background: #f8f9fa; padding: 20px; border-radius: 12px; display: flex; margin-bottom: 20px; }
.referral-link-input { flex: 1; padding: 12px 15px; border: 2px solid #e0e0e0; border-right: none; border-radius: 8px 0 0 8px; font-size: 1rem; }
.copy-link-btn { background: #3498db; color: white; border: none; padding: 0 20px; border-radius: 0 8px 8px 0; cursor: pointer; transition: background 0.3s; }
.copy-link-btn:hover { background: #2980b9; }
.social-share { display: flex; justify-content: center; gap: 15px; margin: 20px 0; }
.share-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s; }
.share-btn.facebook { background: #3b5998; color: white; }
.share-btn.twitter { background: #1da1f2; color: white; }
.share-btn.whatsapp { background: #25d366; color: white; }
.share-btn.telegram { background: #0088cc; color: white; }
/* 隐私政策样式 */
.privacy-content { line-height: 1.8; color: #34495e; }
.privacy-section { margin-bottom: 30px; }
.privacy-content h2 { color: #2c3e50; margin: 30px 0 15px; font-size: 1.6rem; }
.privacy-content h3 { color: #2c3e50; margin: 25px 0 12px; font-size: 1.3rem; }
.privacy-content ul, .privacy-content ol { margin-bottom: 20px; padding-left: 20px; }
.privacy-content li { margin-bottom: 8px; }
/* Popup Modal Styles */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; align-items: center; justify-content: center; }
.modal-content { background: white; border-radius: 12px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); width: 90%; max-width: 450px; overflow: hidden; animation: modalFadeIn 0.3s ease; }
.modal-header { padding: 20px; display: flex; align-items: center; border-bottom: 1px solid #eee; }
.modal-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.2rem; }
.modal-title { flex: 1; font-size: 1.4rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #7f8c8d; }
.modal-body { padding: 25px; font-size: 1.1rem; line-height: 1.5; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; }
.modal-btn { padding: 10px 20px; border: none; border-radius: 6px; font-weight: 500; cursor: pointer; transition: background 0.3s; }
.modal-btn-close { background: #f8f9fa; color: #2c3e50; }
.modal-btn-close:hover { background: #e9ecef; }
/* Modal type variations */
.modal-info .modal-icon { background: #e8f4fc; color: #3498db; }
.modal-warn .modal-icon { background: #fef5e7; color: #f39c12; }
.modal-error .modal-icon { background: #fdecea; color: #e74c3c; }
.modal-success .modal-icon { background: #e8f6ef; color: #2ecc71; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from {     opacity: 1; } to {     opacity: 0; } }
/* 邮箱验证表单样式 */
.verification-form { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.verification-inputs { display: flex; gap: 10px; margin-bottom: 15px; }
.verification-inputs input { flex: 1; }
.countdown { font-size: 0.8rem; color: #7f8c8d; margin-top: 5px; }
/* 弹框倒计时样式 */
.countdown-timer { font-size: 1.2rem; font-weight: bold; color: #3498db; text-align: center; margin: 10px 0; }
/* Content Layout */
.layout { display: flex; gap: 30px; }
.voice-list { flex: 7; }
.player-section { flex: 5; }
/* Voice List */
.voice-list-container { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 20px; }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.search-box { display: flex; align-items: center; background: #f5f7fa; border-radius: 20px; padding: 5px 15px; width: 300px; }
.search-box input { background: transparent; border: none; padding: 8px; width: 100%; outline: none; }
.sort-filter select { padding: 8px 15px; border-radius: 20px; border: 1px solid #ddd; outline: none; }
.selection-controls { display: flex; gap: 10px; margin-bottom: 15px; }
.selection-btn { background: #f5f7fa; border: none; padding: 8px 15px; border-radius: 20px; color: #7f8c8d; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.3s; }
.selection-btn:hover { background: #e8f4fc; }
.selection-btn.active { background: #3498db; color: white; }
.voice-items { max-height: 860px; overflow-y: auto; }
.voice-item { display: flex; align-items: center; padding: 15px; border-radius: 8px; margin-bottom: 10px; transition: background 0.3s; position: relative; }
.voice-item:hover { background: #f5f7fa; }
.voice-item.active { background: #e8f4fc; border-left: 4px solid #3498db; }
.voice-item .select-checkbox { margin-right: 15px; }
.voice-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.voice-details { flex: 1; }
.voice-details h3 { color: #2c3e50; margin-bottom: 5px; }
.voice-details p { color: #7f8c8d; font-size: 0.9rem; }
.voice-meta { display: flex; gap: 15px; margin-top: 5px; }
.voice-meta span { font-size: 0.8rem; color: #95a5a6; }
.voice-duration { color: #3498db; font-weight: 500; }
.voice-item.selected { background: rgba(52, 152, 219, 0.1); }
.selected-count { position: absolute; top: 10px; right: 15px; background: #2ecc71; color: white; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }
/* Player Section */
.player-card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 25px; margin-bottom: 20px; }
.now-playing { text-align: center; margin-bottom: 25px; }
.now-playing img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid #3498db; }
.now-playing h2 { color: #2c3e50; margin-bottom: 5px; }
.now-playing p { color: #7f8c8d; }
.progress-container { margin: 25px 0; }
.progress-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; position: relative; }
.progress { position: absolute; height: 100%; background: linear-gradient(to right, #2ecc71, #3498db); border-radius: 3px; width: 35%; }
.progress-time { display: flex; justify-content: space-between; margin-top: 5px; color: #95a5a6; font-size: 0.8rem; }
.player-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; }
.control-btn { background: none; border: none; font-size: 1.2rem; color: #3498db; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s; }
.control-btn:hover { background: #f5f7fa; }
.play-btn { background: #3498db; color: white; width: 50px; height: 50px; font-size: 1.5rem; }
.play-btn:hover { background: #2980b9; }
.volume-control { display: flex; align-items: center; gap: 10px; margin: 15px 0; }
.volume-control input { flex: 1; }
.playback-options { display: flex; justify-content: space-between; margin: 20px 0; }
.option-btn { background: #f5f7fa; border: none; padding: 8px 15px; border-radius: 20px; color: #7f8c8d; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.3s; }
.option-btn.active { background: #3498db; color: white; }
.option-btn:hover { background: #e8f4fc; }
/* Timer Section */
.timer-card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 25px; }
.timer-card h3 { color: #2c3e50; margin-bottom: 15px; }
.timer-options { display: flex; gap: 10px; margin-bottom: 15px; }
.timer-option { flex: 1; text-align: center; padding: 10px; border-radius: 8px; background: #f5f7fa; cursor: pointer; transition: all 0.3s; }
.timer-option.active { background: #3498db; color: white; }
.custom-timer { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.custom-timer input { padding: 8px; border: 1px solid #ddd; border-radius: 5px; width: 60px; text-align: center; }
.timer-btn { background: #2ecc71; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s; margin-top: 15px; width: 100%; }
.timer-btn:hover { background: #27ae60; }
/* ===== 咨询页面样式 ===== */
.consultation-layout { display: flex; gap: 20px; height: calc(100vh - 200px); }
.consultation-list { flex: 3; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; }
.consultation-list-container { padding: 20px; }
.consultation-list .list-header { padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.consultation-list .list-header h2 { color: #2c3e50; margin-bottom: 15px; }
.consultation-items { overflow-y: auto; flex: 1; }
.consultation-item { display: flex; padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.3s; }
.consultation-item:hover { background: #f9f9f9; }
.consultation-item.active { background: #e8f4fc; }
.consultation-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.consultation-details { flex: 1; }
.consultation-details h3 { color: #2c3e50; margin-bottom: 5px; }
.consultation-details p { color: #7f8c8d; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consultation-meta { display: flex; justify-content: space-between; margin-top: 5px; }
.consultation-meta span { font-size: 0.8rem; color: #95a5a6; }
.unread-count { background: #e74c3c; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.consultation-chat-container { flex: 7; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; }
.consultation-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; }
.consultation-chat-header .chat-user { display: flex; align-items: center; }
.consultation-chat-header .chat-user img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.consultation-chat-header .chat-user-info h3 { color: #2c3e50; margin-bottom: 3px; }
.consultation-chat-header .chat-user-info p { color: #7f8c8d; font-size: 0.9rem; }
.consultation-chat-header .chat-actions button { background: #3498db; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background 0.3s; }
.consultation-chat-header .chat-actions button:hover { background: #2980b9; }
.consultation-chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.consultation-message { display: flex; max-width: 80%; }
.consultation-message.received { align-self: flex-start; }
.consultation-message.sent { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin: 0 10px; }
.message-content { background: #f0f4f8; padding: 12px 15px; border-radius: 18px; position: relative; }
.consultation-message.sent .message-content { background: #3498db; color: white; }
.message-text { margin-bottom: 5px; }
.message-time { font-size: 0.7rem; color: #95a5a6; text-align: right; }
.consultation-message.sent .message-time { color: rgba(255, 255, 255, 0.8); }
.message-image { max-width: 200px; border-radius: 10px; margin-top: 5px; }
.voice-message { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.5); padding: 8px 12px; border-radius: 20px; margin-top: 5px; }
.voice-message button { background: none; border: none; color: #3498db; cursor: pointer; }
.voice-progress { width: 100px; height: 4px; background: #ddd; border-radius: 2px; overflow: hidden; }
.voice-progress-bar { height: 100%; background: #3498db; width: 60%; }
.appointment-card { background: #e8f4fc; border-radius: 12px; padding: 15px; margin-top: 10px; border: 1px solid #3498db; }
.appointment-header { display: flex; align-items: center; margin-bottom: 10px; }
.appointment-header img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 10px; }
.appointment-title { color: #2c3e50; font-weight: bold; margin-bottom: 5px; }
.appointment-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.appointment-detail { font-size: 0.9rem; }
.appointment-detail label { display: block; color: #7f8c8d; font-size: 0.8rem; margin-bottom: 3px; }
.appointment-detail span { color: #2c3e50; font-weight: 500; }
.appointment-price { font-size: 1.2rem; color: #e74c3c; font-weight: bold; text-align: center; margin: 10px 0; }
.appointment-actions { display: flex; gap: 10px; }
.appointment-btn { flex: 1; padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: 500; transition: all 0.3s; }
.appointment-btn.accept { background: #2ecc71; color: white; }
.appointment-btn.accept:hover { background: #27ae60; }
.appointment-btn.decline { background: #e74c3c; color: white; }
.appointment-btn.decline:hover { background: #c0392b; }
.consultation-chat-input { padding: 15px 20px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 10px; }
.chat-input-actions { display: flex; gap: 5px; }
.chat-input-actions button { background: none; border: none; font-size: 1.2rem; color: #7f8c8d; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.chat-input-actions button:hover { background: #f5f7fa; color: #3498db; }
.chat-input-field { flex: 1; position: relative; }
.chat-input-field input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 20px; outline: none; }
.emoji-picker { position: absolute; bottom: 50px; right: 0; background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 10px; display: none; grid-template-columns: repeat(8, 1fr); gap: 5px; width: 300px; }
.emoji-picker.show { display: grid; }
.emoji { font-size: 1.5rem; cursor: pointer; text-align: center; padding: 5px; border-radius: 5px; }
.emoji:hover { background: #f5f7fa; }
.chat-send button { background: #3498db; color: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; }
.chat-send button:hover { background: #2980b9; }