/* ====== Reset ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 15px; line-height: 1.7; color: #333; background: #fff; }
a { color: #0066CC; text-decoration: none; }
a:hover { color: #003399; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }

/* ====== Header ====== */
.header { position: fixed; top: 0; left: 0; right: 0; height: 50px; background: #f5f5f5; border-bottom: 1px solid #e8e8e8; z-index: 999; display: flex; align-items: center; padding: 0 20px; }
.header-logo { font-size: 18px; font-weight: bold; color: #333; white-space: nowrap; }
.header-logo span { color: #0066CC; }
.header-search { flex: 1; max-width: 400px; margin: 0 30px; position: relative; }
.header-search input { width: 100%; height: 32px; padding: 0 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; outline: none; }
.header-search input:focus { border-color: #0066CC; }
.header-search-results { position: absolute; top: 36px; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 4px; max-height: 300px; overflow-y: auto; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.header-search-results.active { display: block; }
.header-search-results a { display: block; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.header-search-results a:hover { background: #f5f5f5; }
.header-search-results a:last-child { border-bottom: none; }
.header-search-results .no-result { padding: 12px; text-align: center; color: #999; font-size: 14px; }
.header-nav { display: flex; gap: 20px; margin-left: auto; }
.header-nav a { font-size: 14px; color: #666; white-space: nowrap; }
.header-nav a:hover { color: #0066CC; }
.hamburger { display: none; font-size: 20px; cursor: pointer; margin-right: 15px; color: #333; background: none; border: none; padding: 0; }

/* ====== Sidebar ====== */
.sidebar { position: fixed; top: 51px; left: 0; width: 220px; bottom: 41px; background: #fff; border-right: 1px solid #eee; overflow-y: auto; z-index: 900; }
.sidebar-group-title { padding: 10px 15px 4px; font-size: 13px; color: #999; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.sidebar-group-title:hover { color: #0066CC; }
.sidebar-group-title .arrow { font-size: 10px; transition: transform 0.2s; }
.sidebar-group-title.collapsed .arrow { transform: rotate(-90deg); }
.sidebar-group { padding: 0 0 5px; }
.sidebar-group.hidden { display: none; }
.sidebar-group a { display: block; padding: 6px 15px 6px 25px; font-size: 14px; color: #666; }
.sidebar-group a:hover { color: #0066CC; background: #f9f9f9; }
.sidebar-group a.active { color: #0066CC; background: #f0f7ff; border-right: 2px solid #0066CC; }

/* ====== Content ====== */
.content { margin-left: 240px; margin-top: 51px; min-height: calc(100vh - 91px); padding: 30px 40px 40px; max-width: 1000px; }
.content h1 { font-size: 20px; font-weight: bold; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.content h2 { font-size: 18px; font-weight: bold; margin: 25px 0 15px; }
.content h3 { font-size: 16px; font-weight: bold; margin: 20px 0 12px; }
.content p { margin-bottom: 20px; }
.content ul, .content ol { margin: 0 0 20px 20px; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li { margin-bottom: 6px; }
.content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.content th, .content td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; font-size: 14px; }
.content th { background: #f8f8f8; font-weight: bold; }
.content img { margin: 10px 0; }

/* ====== Code Blocks ====== */
.content code { background: #f6f7f9; padding: 2px 6px; border-radius: 3px; font-family: Consolas, "Courier New", monospace; font-size: 14px; }
.content pre { background: #f6f7f9; border: 1px solid #eee; border-radius: 4px; padding: 0; margin: 0 0 20px; position: relative; overflow: auto; }
.content pre code { background: none !important; padding: 15px 20px; display: block; line-height: 1.5; font-size: 14px; border: none; border-radius: 0; }
.content pre .hljs { background: transparent !important; padding: 0 !important; }
.copy-btn { position: absolute; top: 6px; right: 6px; padding: 4px 10px; font-size: 12px; background: #fff; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; color: #666; display: none; }
.content pre:hover .copy-btn { display: inline-block; }
.copy-btn:hover { background: #f0f0f0; }
.copy-btn.copied { color: #52c41a; border-color: #52c41a; }

/* ====== Prev/Next Navigation ====== */
.page-nav { display: flex; justify-content: center; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.page-nav a { padding: 8px 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.page-nav a:hover { border-color: #0066CC; color: #0066CC; }
.page-nav .prev::before { content: "\00AB "; }
.page-nav .next::after { content: " \00BB"; }

/* ====== Home Page Specific ====== */
.home-intro { margin-bottom: 30px; }
.home-intro h2 { font-size: 18px; margin-bottom: 15px; }
.home-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; }
.home-course-card { border: 1px solid #eee; border-radius: 6px; padding: 20px; }
.home-course-card h3 { font-size: 16px; margin-bottom: 10px; }
.home-course-card p { font-size: 14px; color: #666; margin-bottom: 12px; }
.home-course-card a { font-size: 14px; }
.home-quick-links { margin: 20px 0; }
.home-quick-links h3 { font-size: 16px; margin-bottom: 10px; }
.home-quick-links ul { margin-left: 0; }
.home-quick-links li { padding: 6px 0; border-bottom: 1px dashed #eee; }
.home-quick-links li:last-child { border-bottom: none; }

/* ====== Footer ====== */
.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; background: #f5f5f5; border-top: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; z-index: 999; }

/* ====== Responsive: Tablet ====== */
@media (max-width: 1199px) {
  .content { padding: 25px 30px 30px; }
}

/* ====== Responsive: Mobile ====== */
@media (max-width: 767px) {
  .hamburger { display: block; }
  .header-search { margin: 0 10px; }
  .header-nav { display: none; }
  .sidebar { left: -220px; transition: left 0.3s; box-shadow: 2px 0 8px rgba(0,0,0,0.1); }
  .sidebar.open { left: 0; }
  .content { margin-left: 0; padding: 20px 15px 30px; }
  .content h1 { font-size: 18px; }
  .content h2 { font-size: 16px; }
  .content h3 { font-size: 15px; }
  .content pre code { font-size: 13px; padding: 12px 15px; }
  .page-nav { flex-direction: column; gap: 10px; align-items: center; }
  .home-courses { grid-template-columns: 1fr; }
  .sidebar-overlay { display: none; position: fixed; top: 51px; left: 0; right: 0; bottom: 41px; background: rgba(0,0,0,0.3); z-index: 899; }
  .sidebar-overlay.active { display: block; }
}

/* ====== Search Page ====== */
.search-page-results { margin-top: 20px; }
.search-page-result { padding: 15px 0; border-bottom: 1px solid #eee; }
.search-page-result:last-child { border-bottom: none; }
.search-page-result h3 { margin: 0 0 5px; }
.search-page-result p { font-size: 14px; color: #666; margin: 0; }
.search-page-no-result { text-align: center; padding: 40px 0; color: #999; }