/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { display: flex; min-height: 100vh; background-color: #fff; color: #333; overflow-x: hidden; }

/* 侧栏 */
.sidebar { width: 250px; background: linear-gradient(180deg, #FFA500, #007AFF); color: #fff; transition: width 0.3s; overflow: hidden; position: relative; }
.sidebar.collapsed { width: 60px; }
.sidebar .toggle-btn { position: absolute; top: 20px; right: -20px; width: 40px; height: 40px; background: #fff; color: #007AFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; font-size: 1.2em; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.3s; }
.sidebar .toggle-btn:hover { transform: rotate(90deg); }
.sidebar ul { list-style: none; margin-top: 80px; }
.sidebar ul li { padding: 20px; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.2s; }
.sidebar ul li:hover { background: rgba(255,255,255,0.2); transform: translateX(5px); }

/* 主内容 */
.main-content { flex: 1; padding: 40px; background-color: #fff; transition: margin-left 0.3s; }
section { margin-bottom: 100px; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s ease; }
section.visible { opacity: 1; transform: translateY(0); }
section h1 { font-size: 2em; margin-bottom: 20px; color: #007AFF; }
section p { font-size: 1.1em; line-height: 1.6; margin-bottom: 20px; }
section img { max-width: 100%; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
section img:hover { transform: scale(1.02); }

/* 卡片布局 */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 1 1 calc(33% - 20px); min-width: 250px; background: #fff; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.card img { width: 100%; height: 180px; object-fit: cover; }
.card-content { padding: 20px; }
.card:hover { transform: translateY(-10px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

/* 响应式 */
@media (max-width: 1024px) { .cards { flex-direction: column; } }
@media (max-width: 768px) { .sidebar { position: absolute; z-index: 10; height: 100%; } .main-content { margin-left: 0; padding: 20px; } }