/* 基础样式与响应式布局 */
body { margin: 0; font-family: 'Roboto', sans-serif; color: #fff; background: linear-gradient(135deg, #0074D9, #005C99); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.container { max-width: 1400px; margin: 0 auto; padding: 20px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
h1, h2, h3 { color: #FFC300; text-align: center; }
p { line-height: 1.6; text-align: justify; }

/* 导航栏与提示 */
.navbar { background: rgba(0, 0, 0, 0.8); padding: 15px; position: sticky; top: 0; z-index: 1000; }
.navbar span { color: #FFC300; font-size: 14px; display: block; text-align: center; }
@media (min-width: 768px) { .navbar span { font-size: 16px; } }

/* 模块化卡片设计 */
.card { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; }
.card:hover { transform: translateY(-5px); }
.card img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 15px; }

/* 动态分割线 */
.divider { width: 100%; height: 2px; background: linear-gradient(to right, transparent, #FFC300, transparent); margin: 30px 0; position: relative; }
.divider::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #FFC300; animation: slide 2s infinite; }
@keyframes slide { 0% { left: -100%; } 100% { left: 100%; } }

/* 按钮与交互效果 */
.cta { background-color: #0074D9; color: white; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; font-size: 16px; text-align: center; margin-top: 15px; }
.cta:hover { background-color: #FFC300; }
article pre { background: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 5px; overflow-x: auto; }

/* 示例数据展示 */
.data-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.data-list li { background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 5px; }

/* 响应式调整 */
@media (max-width: 768px) { 
    body { font-size: 14px; }
    .container { grid-template-columns: 1fr; }
    h1, h2, h3 { font-size: 20px; }
}
@media (min-width: 1200px) { 
    body { font-size: 16px; }
    .container { grid-template-columns: repeat(3, 1fr); }
}