/* style.css - 极简 GitBook 风格 (含搜索按钮) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
a { text-decoration: none; color: #333; transition: color 0.2s; }
a:hover { color: #007bff; }

#app { display: flex; min-height: 100vh; }

/* 侧边栏 */
#sidebar { width: 300px; border-right: 1px solid #e8e8e8; background: #fafafa; padding: 40px 20px; overflow-y: auto; height: 100vh; position: sticky; top: 0; }
#sidebar h1 { font-size: 1.2rem; margin-bottom: 1.5rem; padding-left: 10px; border-left: 4px solid #333; }
#sidebar h1 a { font-weight: bold; }

/* 搜索框布局 */
.search-form { margin-bottom: 2rem; padding: 0 10px; }
.search-form form { display: flex; gap: 5px; }
.search-form input { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; outline: none; }
.search-form input:focus { border-color: #333; }
.search-form button { padding: 8px 15px; background: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.search-form button:hover { background: #555; }

#sidebar .category-group { margin-bottom: 20px; }
#sidebar .category-title { font-weight: bold; margin: 10px 0 5px 10px; color: #888; text-transform: uppercase; font-size: 12px; }
#sidebar ul { list-style: none; }
#sidebar li { margin-bottom: 2px; }
#sidebar li a { display: block; padding: 6px 15px; border-radius: 4px; font-size: 13px; color: #555; }
#sidebar li a:hover { background: #eee; color: #000; }

/* 正文区 */
#content { flex: 1; padding: 60px 80px; max-width: 960px; margin: 0 auto; }
.post-title { font-size: 2.2rem; margin-bottom: 2rem; font-weight: 700; color: #000; }
.post-content { font-size: 16px; color: #24292e; }
.post-content img { max-width: 100%; height: auto; border-radius: 4px; }
.post-content p { margin-bottom: 1.5em; }

/* 响应式 */
@media (max-width: 768px) {
    #app { flex-direction: column; }
    #sidebar { width: 100%; height: auto; position: relative; padding: 20px; border-right: none; border-bottom: 1px solid #e8e8e8; }
    #sidebar h1 { margin-bottom: 1rem; }
    #content { padding: 40px 20px; }
    .post-title { font-size: 1.8rem; }
}