/* 基础样式重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #f5f7fa, #c3cfe2); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #2c3e50; }
p { margin-bottom: 1em; }
ul, ol { margin-left: 1.5em; margin-bottom: 1em; }
a { text-decoration: none; color: #1abc9c; transition: color 0.3s ease; }
a:hover { color: #16a085; }
button { cursor: pointer; transition: all 0.3s ease; }

/* 页面布局 */
.container { max-width: 1400px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.header { grid-column: 1 / -1; text-align: center; padding: 40px 0; background: linear-gradient(135deg, #2980b9, #6dd5fa); color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header h1 { font-size: 2.5rem; margin-bottom: 10px; }
.header p { font-size: 1.2rem; }

/* 模块化卡片设计 */
.card { background: white; border-radius: 15px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.5); padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.5); }
.card img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 15px; }
.card h3 { font-size: 1.5rem; margin-bottom: 10px; color: #2c3e50; }
.card p { font-size: 1rem; color: #555; }

/* 按钮样式 */
.button { background: linear-gradient(145deg, #c0c0c0, #f0f0f0); border: none; border-radius: 15px; box-shadow: 5px 5px 10px #888888, -5px -5px 10px #ffffff; padding: 10px 20px; font-weight: bold; transition: all 0.3s ease; }
.button:hover { transform: scale(0.98); box-shadow: 3px 3px 7px #888888, -3px -3px 7px #ffffff; }

/* 响应式设计 */
@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
  .header h1 { font-size: 2rem; }
  .card { padding: 15px; }
  .button { padding: 8px 16px; font-size: 14px; }
}
@media (min-width: 1200px) {
  .container { grid-template-columns: repeat(3, 1fr); }
}

/* 微交互效果 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 1s ease-in-out; }
.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* 其他装饰性样式 */
hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, #ddd, transparent); margin: 20px 0; }
blockquote { font-style: italic; color: #27ae60; margin: 20px 0; padding-left: 20px; border-left: 5px solid #27ae60; }
pre { background: #f4f4f4; padding: 15px; border-radius: 10px; overflow-x: auto; font-size: 0.9rem; }

/* 特殊提示样式 */
.tip { background: #ecf0f1; border-left: 5px solid #3498db; padding: 15px; margin: 20px 0; border-radius: 5px; font-size: 1rem; color: #333; }