/* --- 基础与布局样式 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: '华文楷体', '楷体', '微软雅黑', Arial, sans-serif; 
    line-height: 1.8; 
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 50%, #f0f8ff 100%); 
    min-height: 100vh; 
}
.header { 
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.9) 100%); 
    backdrop-filter: blur(10px); 
    padding: 1.5rem 2rem; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
    border-bottom: 2px solid #667eea;
}
.nav { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.nav a { 
    color: #667eea; 
    text-decoration: none; 
    font-weight: bold; 
    transition: color 0.3s ease; 
    padding: 0.5rem 1rem; 
    border-radius: 8px; 
}
.nav a:hover { 
    color: #ff6b6b; 
    background: rgba(232, 242, 255, 0.7); 
}
.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 3rem 2rem; 
}

/* --- 诗词头部样式 --- */
.poem-header { 
    text-align: center; 
    margin-bottom: 3rem; 
    background: rgba(255,255,255,0.95); 
    padding: 3rem; 
    border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    backdrop-filter: blur(10px); 
    position: relative; 
}
.poem-title { font-size: 2.8rem; color: #2c3e50; margin-bottom: 1.5rem; font-weight: bold; }
.poem-author { font-size: 1.4rem; color: #7f8c8d; margin-bottom: 1rem; }
.poem-dynasty { font-size: 1.2rem; color: #95a5a6; }

/* --- 诗词内容样式 --- */
.poem-content { 
    background: rgba(255,255,255,0.95); 
    padding: 3rem; 
    border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    margin-bottom: 2rem; 
    backdrop-filter: blur(10px); 
}
.poem-text { 
    font-size: 1.4rem; 
    line-height: 2.2; 
    color: #2c3e50; 
    margin-bottom: 2rem; 
    text-align: left; /* 默认左对齐 */
    font-family: '华文楷体', '楷体', serif; 
}
.poem-text.text-center {
    text-align: center; /* 为“诗”类型提供的居中样式 */
}
.poem-text p { margin-bottom: 1rem; }
.section { margin-bottom: 3rem; }
.section-title { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: #2c3e50; 
    margin-bottom: 1.5rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 3px solid #667eea; 
    display: inline-block; 
}
.section-content { font-size: 1.1rem; color: #34495e; line-height: 1.8; }
.section-content p { margin-bottom: 1em; }
.translation { background: rgba(103, 126, 234, 0.05); padding: 2rem; border-radius: 15px; border-left: 4px solid #667eea; }
.annotation { background: rgba(46, 204, 113, 0.05); padding: 2rem; border-radius: 15px; border-left: 4px solid #2ecc71; }
.intro { background: rgba(230, 126, 34, 0.05); padding: 2rem; border-radius: 15px; border-left: 4px solid #e67e22; }
.appreciations { background: rgba(155, 89, 182, 0.05); padding: 2rem; border-radius: 15px; border-left: 4px solid #9b59b6; }

/* --- 分享功能样式 --- */
.share-container { position: absolute; top: 1.5rem; right: 1.5rem; }
.share-btn { 
    background: rgba(255,255,255,0.9); border: 1px solid rgba(102, 126, 234, 0.2);
    color: #667eea; padding: 0.6rem 0.8rem; border-radius: 50px; cursor: pointer; font-size: 0.9rem; 
    display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s ease; 
    backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.share-btn:hover { 
    background: rgba(102, 126, 234, 0.1); transform: translateY(-1px); 
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); 
}
.share-dropdown { 
    position: absolute; top: 100%; right: 0; background: rgba(255,255,255,0.95); 
    backdrop-filter: blur(15px); border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
    padding: 0.8rem; min-width: 160px; opacity: 0; visibility: hidden; 
    transform: translateY(-5px); transition: all 0.2s ease; z-index: 1000;
    border: 1px solid rgba(0,0,0,0.1); margin-top: 0.5rem;
}
.share-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.share-options { display: flex; flex-direction: column; gap: 0.2rem; }
.share-option { 
    display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; 
    border-radius: 8px; text-decoration: none; color: #2c3e50; 
    transition: all 0.2s ease; font-size: 0.9rem; cursor: pointer;
}
.share-option:hover { background: rgba(102, 126, 234, 0.08); }

/* --- 提示消息样式 --- */
.success-message { 
    position: fixed; top: 20px; right: 20px; background: rgba(46, 204, 113, 0.95); 
    color: white; padding: 0.8rem 1.2rem; border-radius: 8px; font-size: 0.9rem;
    font-weight: 500; z-index: 10000; opacity: 0; transform: translateX(100%); 
    transition: all 0.3s ease; 
}
.success-message.show { opacity: 1; transform: translateX(0); }

/* --- 响应式布局 --- */
@media (max-width: 768px) {
    .poem-title { font-size: 2.2rem; }
    .container { padding: 2rem 1rem; }
    .poem-content, .poem-header { padding: 2rem; }
    .poem-text { font-size: 1.2rem; }
    .share-container { position: static; margin-top: 1rem; display: flex; justify-content: center; }
    .share-dropdown { right: auto; left: 50%; transform: translateX(-50%) translateY(-5px); }
    .share-dropdown.active { transform: translateX(-50%) translateY(0); }
}