/**
 * guide.css — 使用指南页族共享样式（自 app/view/guide/{index,detail,category,search,error}.html
 * 内联 <style> 块迁出合并，optimization-plan Phase 2 任务 8）
 *
 * 布局复用 style.css 的 .doc-* 族（guide 页视觉本依赖其 1500px 侧栏版，
 * 与 doc 页族的 doc.css 1200px 版同名不同值——guide 页勿引 doc.css）。
 * 冲突类改名：.pagination→.guide-pager（Bootstrap）、.btn 族→.g-btn 族（Bootstrap）。
 * 复制反馈态（data-copied/data-error）预置于此，替代原 JS 动态 <style> 注入。
 */

/* ===== 共享段（原 4 页逐字重复） ===== */
.article-list { list-style: none; padding: 0; }
.article-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.article-item:last-child { border-bottom: none; }
.article-link { color: #666; text-decoration: none; display: block; padding: 5px 0; }
.article-link:hover { color: #1E9FFF; }
.article-link.active { color: #1E9FFF; font-weight: bold; }

.doc-sidebar .search-box { margin-bottom: 20px; }
.doc-sidebar .search-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }

/* 列表卡片标题链接（原内联 color:#333 类化） */
.article-title-link { color: #333; text-decoration: none; }

/* 文章卡片（index / category / search 三页同款） */
.article-card { background: white; border-radius: 8px; padding: 25px; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; }
.article-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333; }
.article-meta { color: #999; font-size: 14px; margin-bottom: 10px; }
.article-excerpt { color: #666; line-height: 1.6; }

/* ===== index 特有 ===== */
.recent-articles { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.recent-title { font-size: 18px; font-weight: bold; margin-bottom: 20px; color: #333; }

/* ===== category 特有 ===== */
.list-header { margin-bottom: 30px; }
.list-header h2 { color: #333; font-size: 24px; margin-bottom: 10px; }
.list-header p { color: #666; font-size: 14px; }
.article-list-main { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

/* 分页（原 .pagination，改名避 Bootstrap 冲突） */
.guide-pager { margin-top: 30px; text-align: center; }

/* ===== search 特有 ===== */
.search-results { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.no-results { text-align: center; padding: 40px; color: #666; }
.no-results h3 { color: #333; margin-bottom: 10px; }
/* 服务端 highlightKeywords 生成，勿改名 */
.search-highlight { background-color: #ffeb3b; color: #333; padding: 2px 4px; border-radius: 3px; font-weight: bold; }

/* ===== detail 段 ===== */
.article-content { background: white; border-radius: 8px; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.article-body { line-height: 1.8; color: #333; font-size: 16px; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color: #333; margin-top: 30px; margin-bottom: 15px; }
.article-body p { margin-bottom: 15px; }
.article-body code { background: #f8f9fa; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; }
.article-body pre { background: #f8f9fa; padding: 15px; border-radius: 8px; overflow-x: auto; margin: 15px 0; }

.related-articles { margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; }
.related-articles h3 { color: #333; margin-bottom: 20px; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.related-item { background: #f8f9fa; padding: 15px; border-radius: 6px; transition: all 0.3s ease; }
.related-item:hover { background: #e9ecef; transform: translateY(-2px); }
.related-item a { color: #333; text-decoration: none; font-weight: 500; }
.related-item a:hover { color: #1E9FFF; }

/* 文章内容中的 Layui 组件适配 */
.article-body .layui-container { max-width: 100%; padding: 0; }
.article-body .layui-card { margin-bottom: 20px; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
.article-body .layui-card-header { background: #f8f9fa; border-bottom: 1px solid #e9ecef; font-weight: 600; padding: 15px 20px; color: #333; }
.article-body .layui-card-body { padding: 20px; }
.article-body .layui-tab-content { padding: 20px 0; }
.article-body .layui-collapse { border: none; }
.article-body .layui-colla-item { border: 1px solid #e9ecef; margin-bottom: 10px; border-radius: 4px; }
.article-body .layui-colla-title { display: flex; align-items: center; background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 15px 20px; cursor: pointer; transition: background-color 0.3s; }
.article-body .layui-colla-title:hover { background: #e9ecef; }
.article-body .layui-colla-title::before { content: ''; width: 0; height: 0; border-left: 6px solid #666; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 10px; transition: transform 0.3s ease; }
.article-body .layui-colla-item.layui-show .layui-colla-title::before { transform: rotate(90deg); }
.article-body .layui-colla-content { padding: 15px 20px; }
.article-body .layui-steps { margin: 20px 0; }
.article-body .layui-timeline { margin: 20px 0; }
.article-body .layui-timeline-item { position: relative; padding-left: 30px; margin-bottom: 20px; }
.article-body .layui-timeline-axis { position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: #1E9FFF; border-radius: 50%; color: white; text-align: center; line-height: 20px; font-size: 12px; }
.article-body .layui-timeline-content { padding-left: 10px; }
.article-body .layui-timeline-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; color: #333; }
.article-body .layui-row { margin: 0 -10px; }
.article-body .layui-col-space20 > * { padding: 0 10px; }
.article-body .python3-card { border-left: 4px solid #1E9FFF; }
.article-body .python2-card { border-left: 4px solid #ff5722; }
.article-body .recommend-tag { float: right; margin-top: -2px; }
.article-body .step-box { margin-bottom: 20px; }
.article-body .layui-bg-blue { background-color: #1E9FFF !important; color: white !important; }
.article-body .layui-icon-tips { margin-right: 5px; }

/* 代码块 + 复制按钮（伪元素） */
.article-body .code-block { background: #2f3640; color: #e6e6e6; border: 1px solid #3c4043; border-radius: 6px; padding: 20px; margin: 15px 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.6; overflow-x: auto; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.article-body .code-block::before { content: '复制'; position: absolute; top: 8px; right: 12px; background: #1E9FFF; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer; transition: background-color 0.3s ease; z-index: 10; }
.article-body .code-block::before:hover { background: #0d8ce8; }
.article-body .code-block code { background: none; padding: 0; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; }
.article-body .code-block br { display: block; margin: 2px 0; content: ""; }

/* 复制反馈态（原 JS 动态 <style> 注入预置化，JS 只切换 data 属性） */
.article-body .code-block[data-copied="true"]::before { content: '已复制!'; background: #52c41a; }
.article-body .code-block[data-error="true"]::before { content: '复制失败'; background: #ff4d4f; }

/* 代码高亮 */
.article-body .code-block .hljs-keyword { color: #c678dd; }
.article-body .code-block .hljs-string { color: #98c379; }
.article-body .code-block .hljs-comment { color: #5c6370; font-style: italic; }
.article-body .code-block .hljs-number { color: #d19a66; }
.article-body .code-block .hljs-function { color: #61dafb; }

/* 降级复制用的离屏 textarea（原 JS 动态定位类化） */
.g-copy-offscreen { position: fixed; left: -999999px; top: -999999px; }

/* ===== error 段（guide/error.html，仅该页引入生效） ===== */
.error-content { text-align: center; background: white; border-radius: 8px; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 500px; }
.error-icon { font-size: 4em; margin-bottom: 20px; }
.error-content h2 { color: #333; margin-bottom: 15px; }
.error-content p { color: #666; margin-bottom: 30px; }
.error-actions { display: flex; gap: 15px; justify-content: center; }

/* 按钮（原 .btn 族，改名避 Bootstrap 冲突） */
.g-btn { padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.g-btn-primary { background: #1E9FFF; color: white; }
.g-btn-primary:hover { background: #0d8aee; }
.g-btn-secondary { background: #f8f9fa; color: #333; border: 1px solid #ddd; }
.g-btn-secondary:hover { background: #e9ecef; }