/* ============================================================
   articles.html 文章管理页（配合 theme.css 设计令牌）
   布局：左侧文章列表 + 右侧编辑器；按钮主次分明；重绘 UEditor 工具栏
   ============================================================ */

.container {
  max-width: 1280px;
  margin: 16px auto 96px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ---------- 左侧文章列表 ---------- */
.sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  padding: 16px;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
}
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-head h3 { margin: 0; font-size: var(--text-base, 15px); color: #0f172a; }
.side-hint { font-size: var(--text-xs, 12px); color: #94a3b8; }
.side-search { display: flex; flex-direction: column; gap: 8px; }
.side-search input { min-height: 40px; }
.side-actions { display: flex; gap: 8px; }
.side-actions .btn { flex: 1; }
/* 侧栏小尺寸按钮（提高选择器优先级以覆盖 theme 的 .btn） */
.sidebar .btn-sm { min-height: 36px; padding: 7px 12px; font-size: var(--text-sm, 13px); border-radius: var(--radius-sm, 8px); }

.article-list { overflow-y: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.article-list::-webkit-scrollbar { width: 8px; }
.article-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; }
.article-list:empty::after {
  content: "暂无文章，点击“新建文章”开始写作";
  display: block; padding: 22px 12px; text-align: center;
  color: #94a3b8; font-size: var(--text-sm, 13px); line-height: 1.8;
}
.article-item {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  transition: background var(--transition, 180ms), border-color var(--transition, 180ms), box-shadow var(--transition, 180ms);
}
.article-item:hover { background: #f8fafc; border-color: var(--color-border, #e2e8f0); }
.article-item.active { background: var(--color-brand-soft, #eff6ff); border-color: #bfdbfe; }
.article-item .title {
  font-size: var(--text-sm, 13px); font-weight: 600; color: #1e293b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-item .time { margin-top: 4px; font-size: var(--text-xs, 12px); color: #94a3b8; }

/* ---------- 右侧编辑器 ---------- */
.editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
}
.editor-head input {
  font-size: var(--text-lg, 18px);
  font-weight: 600;
  padding: 12px 14px;
  min-height: 48px;
}

/* 操作区：保存=主按钮，去AI痕迹/导出=次级，删除=危险并靠右 */
.actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #e2e8f0);
  margin-top: 2px;
}
.actions-spacer { flex: 1 1 auto; }
.actions .btn { min-height: 40px; padding: 9px 18px; font-size: var(--text-sm, 13px); }

/* ---------- UEditor 外观重绘（覆盖默认皮肤，贴合简洁风格） ---------- */
.editor .edui-editor {
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: var(--radius, 10px) !important;
  overflow: hidden !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  width: 100% !important;
}
.editor .edui-editor-toolbarboxouter,
.editor .edui-editor-toolbarbox {
  background: #f8fafc !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  box-shadow: none !important;
}
.editor .edui-toolbar { padding: 6px 8px !important; }
.editor .edui-button { margin: 2px 2px !important; }
.editor .edui-button-body,
.editor .edui-default .edui-button-body {
  min-width: 24px !important; height: 24px !important; line-height: 24px !important;
  border-radius: 6px !important;
  transition: background var(--transition, 180ms) !important;
}
.editor .edui-button-hover .edui-button-body,
.editor .edui-button:hover .edui-button-body { background: #e2e8f0 !important; }
.editor .edui-button-active .edui-button-body,
.editor .edui-button-checked .edui-button-body { background: var(--color-brand-soft, #eff6ff) !important; }
.editor .edui-separator { margin: 4px 6px !important; opacity: 0.55 !important; }
.editor .edui-combox-body,
.editor .edui-default .edui-combox-body {
  border-radius: 6px !important; border-color: var(--color-border, #e2e8f0) !important;
  height: 24px !important; line-height: 24px !important;
}
.editor .edui-editor-iframeholder { background: #fff !important; }
.editor .edui-editor-iframeholder iframe { min-height: 460px !important; }
.editor .edui-editor-bottomContainer { background: #f8fafc !important; border-top: 1px solid var(--color-border, #e2e8f0) !important; }
.editor .edui-editor-bottomContainer table { background: transparent !important; }
.editor .edui-editor-bottomContainer td,
.editor .edui-editor-wordcount,
.editor .edui-editor-scale { color: #64748b !important; font-size: var(--text-xs, 12px) !important; font-family: var(--font-sans) !important; }
.editor .edui-editor-scale .edui-editor-scale-loading,
.editor .edui-editor-scale .edui-editor-scale-0 { opacity: 0.6 !important; }

/* ---------- 状态提示 ---------- */
#status { margin-top: 2px; color: #64748b; font-size: var(--text-sm, 13px); min-height: 20px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; margin-bottom: 88px; }
  .sidebar { position: static; max-height: 300px; }
  .actions .btn { flex: 1 1 auto; }
  .actions-spacer { display: none; }
}
@media (max-width: 640px) {
  .container { padding: 0 12px; }
  .editor { padding: 14px; }
  .editor .edui-editor-iframeholder iframe { min-height: 320px !important; }
}


/* 工作台/管理页不展示广告横幅，避免喧宾夺主 */
body > .ad-carousel { display: none !important; }