/* DXTool（大雄工具）页面补充样式（在 design-system.css 基础上追加） */

/* ===== 面包屑 ===== */
.breadcrumb { max-width: 1024px; margin: 0 auto; padding: 16px; font-size: 13px; color: var(--text-muted); }
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 6px; color: var(--border); }

/* ===== 工具页 ===== */
.tool-section { max-width: 1024px; margin: 0 auto; padding: 0 16px 40px; }
.tool-header { margin-bottom: 20px; }
.tool-header h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.tool-header p { font-size: 14px; color: var(--text-secondary); }
.toolbar { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.btn {
    padding: 8px 20px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 500;
    border: 1px solid var(--border); background: #fff; color: var(--text-body); cursor: pointer; transition: all .2s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary { background: var(--gradient); color: #fff; border: none; }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(91,107,217,.35); transform: translateY(-1px); color: #fff; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #389e0d; color: #fff; }
/* ===== 工具页（统一骨架，对齐原型 DT-P03） ===== */
.tool-workspace { margin-top: 24px; }
.tool-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-panel { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); overflow: hidden; }
.tool-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border-light); background: var(--bg);
}
.tool-panel-head .t { font-size: 13px; font-weight: 600; color: var(--text-body); }
.tool-panel-head .ops { display: flex; gap: 8px; }
.op-btn {
    padding: 4px 12px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border);
    background: #fff; color: var(--text-body); cursor: pointer; transition: all .15s;
}
.op-btn:hover { border-color: var(--primary); color: var(--primary); }
.op-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.tool-panel textarea {
    width: 100%; min-height: 320px; border: none; outline: none; resize: vertical;
    padding: 14px 16px; font-family: 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6;
}
.tool-options { display: flex; gap: 16px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.tool-options label { display: flex; align-items: center; gap: 6px; }
/* 常用示例快捷标签（正则 / Cron 等工具） */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.preset-label { font-size: 13px; color: var(--text-muted); margin-right: 2px; }
.preset-chip {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-tag);
    background: #fff; font-size: 13px; color: var(--text-body); cursor: pointer;
    transition: all .15s;
}
.preset-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--tag-bg); }
.tool-title-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.tool-title-row .tool-icon { width: 52px; height: 52px; font-size: 24px; }
.tool-seo { margin-top: 32px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px; }
.tool-seo h2 { font-size: 18px; margin-bottom: 12px; }
.tool-seo p { font-size: 14px; color: var(--text-secondary); line-height: 1.9; margin-bottom: 8px; }
/* 说明区行内链接：全局 a 被重置为继承色，这里还原成一眼可辨的链接样式 */
.tool-seo a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91,107,217,.45); transition: color .15s, text-decoration-color .15s; }
.tool-seo a:hover { color: var(--primary-dark); text-decoration-color: var(--primary-dark); }
/* 说明区行内代码：与文章正文保持一致，避免命令关键字和普通文字混在一起 */
.tool-seo code { font-family: Consolas, Monaco, monospace; font-size: 13px; background: var(--bg-subtle); padding: 2px 6px; border-radius: 4px; }
@media (max-width: 768px) { .tool-panels { grid-template-columns: 1fr; } }

/* 旧版编辑器样式保留（兼容未迁移模板） */
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.editor-box { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); overflow: hidden; }
.editor-header {
    padding: 12px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center;
}
.editor-label { font-size: 13px; font-weight: 600; color: var(--text-body); }
.editor-textarea {
    width: 100%; height: 380px; padding: 14px; resize: none; outline: none;
    font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px;
    line-height: 1.6; border: none; background: var(--bg);
}
.editor-output {
    width: 100%; height: 380px; padding: 14px; overflow-y: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px;
    line-height: 1.6; background: var(--bg); white-space: pre-wrap;
}
.help-section { max-width: 1024px; margin: 0 auto; padding: 0 16px 40px; }
.help-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px; }
.help-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.help-card p { font-size: 14px; color: var(--text-body); line-height: 1.8; margin-bottom: 10px; }

/* ===== 选项 ===== */
.opt { font-size: 13px; color: var(--text-body); display: inline-flex; align-items: center; gap: 6px; }
.opt input { accent-color: var(--primary); }
.opt-input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn);
    font-size: 13px; outline: none;
}
.opt-input:focus { border-color: var(--primary); }

/* ===== 速查页 ===== */
.scenario-group { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); margin-bottom: 18px; overflow: hidden; }
.scenario-header {
    padding: 14px 20px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-light);
    font-size: 16px; font-weight: 600; color: var(--text-title);
}
.command-item {
    padding: 14px 20px; border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    transition: background .15s;
}
.command-item:hover { background: var(--bg-subtle); }
.command-item:last-child { border-bottom: none; }
.command-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.command-syntax {
    font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px;
    color: var(--text-secondary); background: var(--bg); padding: 6px 10px; border-radius: 6px;
    display: inline-block; word-break: break-all;
}
.command-copy {
    padding: 6px 16px; border-radius: 6px; font-size: 13px; flex-shrink: 0;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
}
.command-copy:hover { background: var(--primary-light); }

/* 速查搜索（首页分类 / 详情页命令通用） */
.cs-search-wrap {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.cs-search {
    flex: 1; min-width: 240px; max-width: 420px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
    font-family: inherit; color: var(--text-body); background: #fff; outline: none;
    transition: border-color .2s;
}
.cs-search:focus { border-color: var(--primary); }
.cs-search-hint { font-size: 12px; color: var(--text-muted); }

/* 首页主题分组 */
.cs-group { margin-bottom: 28px; }
.cs-group-head {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
}
.cs-group-title { font-size: 16px; font-weight: 600; color: var(--text-title); }
.cs-group-count { font-size: 12px; color: var(--text-muted); }
.cs-empty {
    text-align: center; color: var(--text-muted); font-size: 14px; padding: 40px 0;
}

/* ===== 下载页（对齐原型 DT-P09） ===== */
.download-hero { background: var(--gradient-bg); padding: 56px 16px 64px; text-align: center; position: relative; overflow: hidden; }
.download-hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(91,107,217,.08); top: -160px; right: -80px; }
.download-hero-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.download-card {
    max-width: 640px; margin: 32px auto 0; background: #fff; border-radius: 16px;
    box-shadow: 0 12px 40px rgba(91,107,217,.15); padding: 32px; text-align: center;
    border: 1px solid var(--border-light);
}
.download-card .version-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--tag-bg); color: var(--primary); font-size: 12px; font-weight: 600; }
.download-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
    padding: 14px 40px; border-radius: 10px; background: var(--gradient); color: #fff;
    font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: all .2s;
    box-shadow: 0 4px 14px rgba(91,107,217,.35);
}
.download-btn:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(91,107,217,.5); transform: translateY(-2px); }
.download-btn:disabled { opacity: .6; cursor: not-allowed; }
.download-meta { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.safety-bar {
    margin-top: 16px; padding: 10px; background: #f6ffed; border: 1px solid #b7eb8f;
    border-radius: 8px; font-size: 12px; color: #52c41a;
}
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.feature-item { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 20px; display: flex; gap: 14px; }
.feature-item .icon { width: 42px; height: 42px; border-radius: 10px; background: var(--tag-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.feature-item .t { font-size: 15px; font-weight: 600; }
.feature-item .d { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; }
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-top: 24px; }
.compare-table th, .compare-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.compare-table th { background: var(--bg); font-weight: 600; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; }
.compare-table .ok { color: var(--success); font-weight: 700; }
.compare-table .no { color: var(--text-muted); }
.compare-table .pro-col { background: linear-gradient(180deg, #f6f4fe, #fff); }
.promise-bar { display: flex; gap: 16px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.promise-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.promise-item .icon { color: var(--primary); font-size: 16px; }
.roadmap { display: flex; gap: 12px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.roadmap-item {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card);
    padding: 16px 20px; min-width: 180px; text-align: center;
}
.roadmap-item.current { border-color: var(--primary); background: var(--tag-bg); }
.roadmap-item .v { font-size: 13px; font-weight: 700; color: var(--primary); }
.roadmap-item .t { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.roadmap-item .st { font-size: 11px; margin-top: 6px; }
.st.done { color: var(--success); }
.st.doing { color: var(--warning); }
.st.plan { color: var(--text-muted); }

/* ===== 文章列表 ===== */
.article-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.article-card {
    display: flex; gap: 20px; padding: 20px; background: #fff;
    border: 1px solid var(--border-light); border-radius: var(--radius-card);
    transition: all .2s;
}
.article-card:hover { border-color: var(--primary-light); box-shadow: 0 4px 16px rgba(91,107,217,.08); }
.article-cover {
    position: relative; overflow: hidden;
    width: 180px; height: 120px; border-radius: 8px; background: var(--bg-subtle);
    display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0;
}
/* 按文章分类着色，作为封面主色（无需上传图片也有完整视觉效果） */
.article-cover .cover-icon { font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .18)); position: relative; z-index: 1; }
.article-cover .cover-label {
    position: absolute; left: 12px; bottom: 10px; z-index: 1;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; opacity: .85;
}
.article-cover::after {
    content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255, 255, 255, .35); right: -46px; top: -46px;
}
.cover-pitfall { background: linear-gradient(135deg, #fff2f0 0%, #ffd9d4 100%); color: #c0392b; }
.cover-solution { background: linear-gradient(135deg, #eff2ff 0%, #d8ddff 100%); color: #4a56c9; }
.cover-tips { background: linear-gradient(135deg, #ecfdf3 0%, #c9f5dd 100%); color: #0f8a55; }
.cover-default { background: linear-gradient(135deg, #f4f5f9 0%, #e3e6f0 100%); color: #6b7280; }
.article-content { flex: 1; min-width: 0; }
.article-title { font-size: 17px; font-weight: 600; line-height: 1.4; }
.article-title:hover { color: var(--primary); }
.article-summary { margin-top: 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta { margin-top: 12px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); }
.article-category { display: inline-block; padding: 2px 10px; border-radius: var(--radius-tag); background: var(--tag-bg); color: var(--primary); font-size: 12px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.page-btn {
    min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--text-body); cursor: pointer; background: #fff;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { border-color: var(--primary); color: var(--primary); background: var(--tag-bg); }

/* ===== 文章详情 ===== */
/* min-width:0 必须加：否则 grid item 的隐式 min-width:auto 会被长代码块/长表格撑开，
   导致正文溢出轨道压住右侧目录（桌面），或在移动端超出视口被裁切 */
.article-detail { min-width: 0; }
/* 单列布局（无目录时 article-detail 是唯一子元素）才限制阅读宽度，
   有目录时宽度交给 grid 轨道 minmax(0,1fr) 控制 */
.article-layout > .article-detail:only-child { max-width: 800px; margin: 0 auto; }
.article-header { padding: 32px 0 24px; border-bottom: 1px solid var(--border-light); }
.article-header h1 { font-size: 28px; font-weight: 700; line-height: 1.4; }
.article-header .meta { margin-top: 12px; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text-muted); }
.article-body { padding: 32px 0; font-size: 15px; line-height: 1.9; color: var(--text-body); }
/* 正文链接：主色 + 半透明下划线，长段落中一眼可辨；hover 加深 */
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91,107,217,.45); transition: color .15s, text-decoration-color .15s; }
.article-body a:hover { color: var(--primary-dark); text-decoration-color: var(--primary-dark); }
.article-body h2 { font-size: 20px; font-weight: 600; margin: 32px 0 16px; color: var(--text-title); }
.article-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 12px; color: var(--text-title); }
.article-body p { margin-bottom: 16px; }
.article-body pre {
    background: #1e1e3f; color: #f8f8f2; padding: 16px 20px; border-radius: 8px;
    overflow-x: auto; font-family: Consolas, Monaco, monospace; font-size: 13px; line-height: 1.7;
    margin: 16px 0; max-width: 100%;
}
.article-body code { font-family: Consolas, Monaco, monospace; font-size: 13px; background: var(--bg-subtle); padding: 2px 6px; border-radius: 4px; }
.article-body pre code { background: none; padding: 0; }
.article-body blockquote {
    border-left: 4px solid var(--primary); padding: 12px 20px; margin: 16px 0;
    background: var(--tag-bg); color: var(--text-secondary); border-radius: 0 8px 8px 0;
}
.article-body ul, .article-body ol { margin: 16px 0; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
/* 文章内表格（GFM） */
.article-body table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--bg-subtle); font-weight: 600; }
.article-body tr:nth-child(even) td { background: #fafbfc; }
/* 文章内图片（截图 / 示意图）：居中、限制宽度、带描边与阴影 */
.article-body img {
    display: block; max-width: 100%; height: auto; margin: 20px auto;
    border: 1px solid var(--border-light); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.article-sidebar { position: sticky; top: 80px; min-width: 0; }
.article-sidebar .toc { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 20px; max-height: calc(100vh - 110px); overflow-y: auto; }
.article-sidebar .toc-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.article-sidebar .toc-item { font-size: 13px; color: var(--text-secondary); padding: 6px 0; display: block; line-height: 1.5; }
.article-sidebar .toc-item.toc-sub { padding-left: 16px; font-size: 12.5px; color: var(--text-muted); }
.article-sidebar .toc-item:hover { color: var(--primary); }
.article-sidebar .toc-item.active { color: var(--primary); font-weight: 600; }
/* 锚点跳转时预留顶部导航高度，避免标题被遮挡 */
.article-body h2, .article-body h3 { scroll-margin-top: 76px; }

/* 相关文章推荐（文章详情页底部） */
.related-articles { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-light); }
.related-title { font-size: 17px; font-weight: 600; color: var(--text-title); margin-bottom: 16px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.related-card { display: block; border: 1px solid var(--border-light); border-radius: 10px; padding: 16px 18px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.related-card:hover { border-color: var(--primary-light); box-shadow: 0 4px 16px rgba(91,107,217,.08); transform: translateY(-2px); }
.related-card-title { font-size: 14px; font-weight: 600; color: var(--text-title); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-card:hover .related-card-title { color: var(--primary); }
.related-card-meta { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .editor-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .article-card { flex-direction: column; }
    .article-cover { width: 100%; height: 160px; }

    /* 面包屑：移动端紧凑化 */
    .breadcrumb { font-size: 12px; padding: 12px 16px; flex-wrap: wrap; }

    /* 博客详情：双栏改单栏，目录移到正文下方（覆盖模板内联 grid 样式） */
    .article-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
    .article-sidebar { position: static; }
    .article-sidebar .toc { max-height: none; }
    .article-header h1 { font-size: 22px; }
    .article-body { padding: 24px 0; font-size: 14.5px; }

    /* 速查页：命令代码块横向滚动，避免长命令被硬断行 */
    .command-syntax { display: block; white-space: pre; word-break: normal; overflow-x: auto; }

    /* 下载页：对比表横向滚动 */
    .compare-table { display: block; overflow-x: auto; }
    .compare-table th, .compare-table td { white-space: nowrap; }
}

@media (max-width: 480px) {
    .download-card { padding: 24px 20px; }
}