/* ============================================================================
   后台样式：登录 / 文章管理 / 编辑器 / 诊断
   ============================================================================ */

.admin-page {
  background: var(--bg-soft);
  min-height: 100vh;
}

/* ---------- 创作后台 Shell：左侧栏 + 顶部 bar + 内容区 ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 14px 18px;
  gap: 8px;
}

.admin-sidebar-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.admin-sidebar-close { display: none; }

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  flex: 1;
  min-width: 0;
  color: var(--text-main);
}
.admin-brand:hover { color: var(--primary); }
.admin-brand svg { color: var(--primary); flex-shrink: 0; }

.admin-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}
.admin-brand-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-brand-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: background 0.15s, color 0.15s;
}
.admin-nav-item:hover {
  background: var(--bg-soft);
  color: var(--text-main);
}
.admin-nav-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
.admin-nav-item.active .admin-nav-icon svg { color: #fff; }

.admin-nav-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-nav-icon svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.admin-sidebar-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-nav-item.logout:hover {
  background: rgba(217, 83, 79, 0.1);
  color: #d9534f;
}

.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-menu-btn { display: none; }

.admin-sidebar-backdrop {
  display: none;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  min-height: 60px;
}
.admin-topbar-title {
  flex: 1;
  min-width: 0;
}
.admin-topbar-title h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-topbar-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--bg-soft);
}
.admin-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.admin-user-name {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-content {
  flex: 1;
  padding: 24px 28px 60px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* 全屏页（未登录 / 未授权） */
.admin-page-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

@media (max-width: 880px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: min(280px, 82vw);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    box-shadow: var(--shadow-strong);
    padding: 18px 12px 14px;
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-sidebar-close { display: inline-flex; }
  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--bg-mask);
    z-index: 199;
    animation: overlayIn 0.18s ease-out;
  }
  .admin-menu-btn {
    display: inline-flex !important;
    width: 36px;
    height: 36px;
  }
  .admin-topbar {
    padding: 10px 14px;
    gap: 10px;
    min-height: 56px;
  }
  .admin-topbar-title h1 { font-size: 16px; }
  .admin-content { padding: 18px 16px 60px; }
  .admin-user-name { display: none; }
  .admin-user { padding: 0; background: transparent; }
}

@media (max-width: 540px) {
  .admin-topbar { gap: 6px; padding: 8px 12px; }
  .admin-topbar-title h1 { font-size: 15px; }
  .admin-topbar-actions .btn { padding: 6px 10px; font-size: 12.5px; }
  .admin-topbar-actions .btn svg { width: 13px; height: 13px; }
  .admin-content { padding: 14px 14px 50px; }
}

/* ---------- 登录卡片 ---------- */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  width: 100%;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: var(--shadow-strong);
  text-align: center;
}

@media (max-width: 480px) {
  .login-wrap { padding: 16px; }
  .login-card { padding: 28px 22px; border-radius: 10px; }
  .login-card h1 { font-size: 19px; }
  .login-card p { font-size: 13px; margin-bottom: 22px; }
  .login-card .logo { width: 48px; height: 48px; margin-bottom: 16px; }
  .login-card input[type="password"], .login-card input[type="text"] {
    height: 44px;
    font-size: 13.5px;
  }
  .btn-github { height: 44px; font-size: 14px; }
  .login-warn { font-size: 11.5px; }
}

.login-card .logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.login-card p {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin-bottom: 28px;
  line-height: 1.7;
}

.btn-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  background: #24292F;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-github:hover { background: #1B1F23; color: #fff; }
.btn-github:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-github svg { width: 18px; height: 18px; }

.btn-device {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-main);
  font-size: 14px;
}
.btn-device:hover { border-color: var(--primary); color: var(--primary); }
.btn-device:disabled { opacity: 0.55; cursor: not-allowed; }

.device-login-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.device-login-box strong {
  display: block;
  margin: 8px 0;
  font-size: 24px;
  letter-spacing: 0.12em;
  color: var(--primary);
  font-family: var(--font-mono);
}
.device-login-box a { color: var(--primary); }

[data-theme="dark"] .btn-github { background: #2A2F36; }
[data-theme="dark"] .btn-github:hover { background: #3A4148; }

.login-warn {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.7;
}

.login-card label { font-weight: 500; color: var(--text-secondary); }

.login-card input[type="password"],
.login-card input[type="text"] {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0 40px 0 14px;
  font-size: 14px;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-main);
  transition: border-color 0.15s;
}
.login-card input:focus { border-color: var(--primary); }

/* ---------- 后台工具栏 ---------- */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--bg-elev);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.admin-toolbar h2 { font-size: 16px; font-weight: 600; margin-right: auto; }
.admin-toolbar-spacer { flex: 1; min-width: 0; }

.settings-status {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 0 8px;
}
.settings-status.saving { color: var(--text-secondary); }
.settings-status.saved { color: #67C23A; }
.settings-status.error { color: #d9534f; }

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}
.admin-tabs button {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--text-secondary);
}
.admin-tabs button:hover { background: var(--bg-soft); color: var(--text-main); }
.admin-tabs button.active {
  background: var(--primary);
  color: #fff;
}

.search-input {
  background: var(--bg-soft);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  width: 220px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.search-input:focus { border-color: var(--primary); background: var(--bg); }

/* ---------- 管理列表 ---------- */
.admin-list {
  background: var(--bg-elev);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-row {
  display: grid;
  grid-template-columns: 1fr 110px 80px 80px 220px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.admin-row:last-child { border-bottom: none; }
.admin-row:hover { background: var(--bg-soft); }

.admin-row.head {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-row.head:hover { background: var(--bg-soft); }

.admin-row .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}
.badge.draft { background: #FEF3C7; color: #92400E; }
.badge.pinned { background: var(--primary); color: #fff; }
.badge.carousel { background: #DBEAFE; color: #1E40AF; }
[data-theme="dark"] .badge.draft { background: #4D3F1F; color: #FBBF24; }
[data-theme="dark"] .badge.carousel { background: #1E3A5F; color: #93C5FD; }

.drag-handle,
.nav-row-handle {
  color: var(--text-tertiary);
  cursor: grab;
  user-select: none;
  font-size: 15px;
}
.admin-row.draggable.dragging,
.nav-editor-row.dragging {
  opacity: 0.55;
  background: var(--bg-soft);
}

.admin-row .meta { font-size: 12px; color: var(--text-secondary); }

.admin-row .actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-row .actions a,
.admin-row .actions button {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.15s;
}
.admin-row .actions a:hover { color: var(--primary); background: var(--bg-soft); }
.admin-row .actions .danger:hover { color: #d9534f; background: var(--bg-soft); }

@media (max-width: 720px) {
  .admin-toolbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .admin-tabs { width: 100%; margin-right: 0; flex: 1 1 100%; order: 1; }
  .admin-tabs button { flex: 1; padding: 6px 10px; font-size: 12.5px; }
  .admin-toolbar-spacer { display: none; }
  .search-input { width: 100%; flex: 1; min-width: 0; order: 2; }
  .admin-toolbar .btn { order: 3; }

  .admin-row {
    grid-template-columns: 1fr auto;
    padding: 12px 14px;
    gap: 8px;
  }
  .admin-row .meta:not(:last-child) { display: none; }
  .admin-row.head { display: none; }
  .admin-row .title { font-size: 13.5px; white-space: normal; }
  .admin-row .actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .admin-row .actions a, .admin-row .actions button { padding: 4px 8px; font-size: 12px; }

  .admin-list { border-radius: 8px; }
}

@media (max-width: 720px) {
  .settings-form { gap: 12px; }
  .settings-card { padding: 16px 14px; border-radius: 8px; }
  .settings-card h3 { font-size: 15px; margin-bottom: 12px; }
  .settings-help { font-size: 12px; margin-bottom: 12px; }
  .settings-grid { grid-template-columns: 1fr; gap: 12px; }
  .settings-grid input, .settings-grid textarea, .settings-grid select {
    font-size: 14px;
    padding: 9px 11px;
  }

  .diagnose-row { padding: 12px 14px; gap: 10px; }
  .diagnose-title { font-size: 13px; }
  .diagnose-detail { font-size: 11.5px; }
}

/* ---------- 编辑器 ---------- */
.editor-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.editor-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* 允许窄桌面端 wrap，避免「模式切换」「草稿/置顶/轮播」等被推到视口外裁掉 */
  flex-wrap: wrap;
}

.editor-bar .back {
  font-size: 14px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.editor-bar .back:hover { color: var(--primary); }

.editor-status {
  /* 之前是 flex:1，会把"模式切换 / 草稿/置顶/轮播 / 主题 / 预览 / 删除 / 发布"全推到右边，
     窄桌面端配合 nowrap 直接被挤出视口看不到。改成自适应 + 上限。 */
  flex: 0 1 auto;
  max-width: 240px;
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;       /* 把右侧按钮组推到 bar 末端 */
}
.editor-status.saving { color: var(--text-secondary); }
.editor-status.saved { color: #67C23A; }
.editor-status.error { color: #d9534f; }

.editor-toggle-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.editor-toggle-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* ---------- Markdown / 富文本 模式切换 ---------- */
.editor-mode-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  height: 30px;
  flex-shrink: 0;          /* 永远不被压缩，保证用户能点到 */
}
.editor-mode-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.editor-mode-btn + .editor-mode-btn { border-left: 1px solid var(--border); }
.editor-mode-btn:hover { color: var(--text-main); background: var(--bg-elev); }
.editor-mode-btn.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.editor-mode-btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
}

.editor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
}

.editor-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.editor-pane:last-child { border-right: none; }

.editor-title {
  padding: 24px 32px 8px;
  font-size: 28px;
  font-weight: 700;
  border: none;
  width: 100%;
  outline: none;
  color: var(--text-main);
  background: transparent;
}
.editor-title::placeholder { color: var(--text-tertiary); }

.editor-meta {
  padding: 0 32px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.editor-meta input {
  background: var(--bg-soft);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 140px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.editor-meta input:focus { border-color: var(--primary); background: var(--bg); }
.editor-meta label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.editor-tag-field {
  flex: 1 1 100%;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.editor-meta-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.editor-selected-tags,
.editor-tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}
.editor-tag-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.editor-tag-input-row input {
  flex: 1;
  min-width: 160px;
  background: var(--bg);
  border-color: var(--border);
}
.editor-tag-input-row .btn {
  padding: 5px 12px;
  font-size: 12px;
}

/* ---------- 编辑器：文章独立计数器面板 ---------- */
.editor-counter-field {
  flex: 1 1 100%;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.editor-counter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.editor-counter-row .btn { padding: 5px 12px; font-size: 12px; }
.editor-counter-summary {
  font-size: 12px;
  color: var(--text-secondary);
  display: grid;
  gap: 4px;
}
.editor-counter-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.editor-counter-line span {
  color: var(--text-tertiary);
  min-width: 56px;
}
.editor-counter-line a {
  color: var(--primary);
  word-break: break-all;
  flex: 1;
  font-size: 12px;
}
.editor-counter-img {
  height: 18px;
  width: auto;
  vertical-align: middle;
}
.editor-counter-empty {
  color: var(--text-tertiary);
  font-size: 12px;
}
.editor-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.15s;
}
.editor-tag-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.editor-tag-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.editor-tag-chip.selected span {
  opacity: 0.78;
  font-weight: 700;
}
.editor-tag-empty {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.editor-textarea {
  flex: 1;
  padding: 18px 32px 32px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  resize: none;
  border: none;
  outline: none;
  background: var(--bg);
  color: var(--text-main);
}

.editor-preview {
  padding: 24px 32px;
  overflow-y: auto;
  background: var(--bg-soft);
}
.editor-preview .article-title { font-size: 24px; margin-bottom: 16px; }
.editor-preview .article-body { font-size: 15px; }

.editor-drop-hint {
  position: absolute;
  inset: 0;
  background: rgba(234, 111, 90, 0.1);
  border: 2px dashed var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--primary);
  pointer-events: none;
  z-index: 10;
  border-radius: 4px;
  margin: 8px;
}

/* EasyMDE 集成时的样式 —— 必须形成 flex 高度链路：
   .editor-pane(overflow:hidden) → .EasyMDEContainer(flex:1, min-height:0)
   → .CodeMirror(flex:1, min-height:0) → .CodeMirror-scroll(overflow:auto)
   否则 CodeMirror 会被内容撑大并被外层裁掉，滚动条消失 */
.EasyMDEContainer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 32px 32px;
  overflow: hidden;
}
.EasyMDEContainer .CodeMirror {
  flex: 1;
  min-height: 0;
  height: auto !important;       /* 抵消 EasyMDE 写入的 inline height */
  background: transparent;
  color: var(--text-main);
  border: none;
  padding: 12px 0;
}
.EasyMDEContainer .CodeMirror-scroll {
  height: 100% !important;
  max-height: none !important;
  min-height: 0;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
.EasyMDEContainer .CodeMirror-sizer { min-height: 0 !important; }
.EasyMDEContainer .editor-toolbar {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  margin-bottom: 8px;
}
.EasyMDEContainer .editor-toolbar a {
  color: var(--text-secondary) !important;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--text-main); }

/* ---------- 富文本（Vditor / WYSIWYG）模式 ---------- */
/* Vditor 默认 fixed 高度，我们让它继承 .editor-pane 的 flex:1 高度链 */
.editor-vditor-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 32px 32px;
  overflow: hidden;
}
.editor-vditor-host[hidden] { display: none !important; }

/* 富文本模式下隐藏 EasyMDE / textarea */
.editor-pane.is-rich .EasyMDEContainer,
.editor-pane.is-rich .editor-textarea { display: none !important; }

/* Vditor 实例本体填满容器 */
.editor-vditor-host .vditor {
  flex: 1;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.editor-vditor-host .vditor-toolbar {
  flex-shrink: 0;
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--border) !important;
}
.editor-vditor-host .vditor-content {
  flex: 1;
  min-height: 0;
}
.editor-vditor-host .vditor-wysiwyg,
.editor-vditor-host .vditor-ir,
.editor-vditor-host .vditor-sv {
  height: 100% !important;
}
.editor-vditor-host .vditor-wysiwyg__pre,
.editor-vditor-host .vditor-wysiwyg__post,
.editor-vditor-host .vditor-reset {
  background: var(--bg) !important;
  color: var(--text-main) !important;
}
/* 暗色模式下 Vditor 需要切到 dark 主题；JS 会处理 setTheme，这里给一些 fallback */
html[data-mode="dark"] .editor-vditor-host .vditor-toolbar__item .vditor-tooltipped {
  color: var(--text-secondary);
}

@media (max-width: 880px) {
  .editor-body { grid-template-columns: 1fr; }
  .editor-pane { border-right: none; }
  .editor-preview { display: none; }
  .editor-pane.preview-mode .editor-textarea,
  .editor-pane.preview-mode .EasyMDEContainer,
  .editor-pane.preview-mode .editor-vditor-host { display: none !important; }
  .editor-pane.preview-mode .editor-preview { display: block; }
}

@media (max-width: 720px) {
  .editor-bar {
    height: auto;
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .editor-bar .back { font-size: 13px; order: 1; }
  .editor-status {
    flex: 1 0 100%;
    order: 2;
    text-align: left;
    padding: 0;
    font-size: 11px;
  }
  .editor-toggle-row {
    order: 3;
    font-size: 12px;
    gap: 10px;
  }
  .editor-bar #themeToggle { order: 4; }
  .editor-bar .btn {
    order: 5;
    padding: 7px 14px;
    font-size: 13px;
  }
  .editor-title { padding: 16px 18px 6px; font-size: 22px; }
  .editor-meta { padding: 0 18px 10px; gap: 8px; }
  .editor-meta input { min-width: 0; flex: 1; font-size: 13px; }
  .editor-meta label { flex: 1 1 calc(50% - 4px); }
  .editor-tag-field { padding: 9px 10px; gap: 7px; }
  .editor-textarea { padding: 14px 18px 24px; font-size: 13.5px; }
  .EasyMDEContainer { padding: 8px 14px 24px; }
}

@media (max-width: 480px) {
  .editor-bar { padding: 8px 12px; gap: 6px; }
  .editor-bar .back svg { width: 13px; height: 13px; }
  .editor-bar .btn { padding: 6px 10px; font-size: 12px; }
  .editor-toggle-row label { gap: 3px; }
  .editor-meta { font-size: 11px; }
  .editor-meta label { flex: 1 1 100%; }
  .editor-meta input { padding: 6px 10px; }
  .editor-tag-input-row { flex-direction: column; align-items: stretch; }
  .editor-tag-input-row .btn { width: 100%; }
}

/* ---------- 模态框 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: var(--bg-mask);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--bg-elev);
  border-radius: 8px;
  padding: 24px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-strong);
}
.modal h3 { font-size: 16px; margin-bottom: 12px; }
.modal p { color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; line-height: 1.7; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- 诊断页 ---------- */
.diagnose-list {
  background: var(--bg-elev);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.diagnose-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.diagnose-row:last-child { border-bottom: none; }
.diagnose-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.diagnose-icon.pending { background: var(--text-tertiary); }
.diagnose-icon.ok { background: #67C23A; }
.diagnose-icon.fail { background: #d9534f; }
.diagnose-icon.warn { background: #E6A23C; }

.diagnose-info { flex: 1; min-width: 0; }
.diagnose-title { font-size: 14px; font-weight: 500; color: var(--text-main); }
.diagnose-detail { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; word-break: break-all; }
.diagnose-detail code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); }

/* ---------- 设置页 ---------- */
.settings-form {
  display: grid;
  gap: 18px;
}

.settings-card {
  background: var(--bg-elev);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.settings-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

.settings-help {
  margin: -4px 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.settings-grid label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-grid .span-2 {
  grid-column: 1 / -1;
}

.settings-grid input,
.settings-grid textarea,
.settings-grid select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-main);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.settings-grid textarea {
  resize: vertical;
  min-height: 76px;
  font-family: var(--font-mono);
  line-height: 1.6;
}

.settings-grid input:focus,
.settings-grid textarea:focus,
.settings-grid select:focus {
  border-color: var(--primary);
  background: var(--bg-elev);
}

.settings-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  min-height: 38px;
}

.settings-check input {
  width: auto;
}

.settings-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.nav-editor {
  display: grid;
  gap: 10px;
}

.nav-editor-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) minmax(160px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.nav-editor-row label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

/* ---------- 后台访问数据（saobby dashboard 嵌入） ---------- */
.analytics-shell {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
.analytics-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.analytics-post-select {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-main);
  font-size: 13px;
  max-width: 280px;
}
.analytics-missing {
  margin: 0 0 18px 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 13px;
}
.analytics-missing summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
}
.analytics-missing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 14px;
}
.analytics-missing-list a {
  color: var(--primary);
  word-break: break-all;
}
.analytics-missing-meta {
  margin-left: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.analytics-tab {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.analytics-tab:hover { color: var(--text-main); background: var(--bg-soft); }
.analytics-tab.active {
  color: var(--primary);
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: transparent;
  margin-bottom: -7px;
  font-weight: 600;
}
.analytics-panels { flex: 1; }
.analytics-panel { display: none; }
.analytics-panel.active { display: block; }
.analytics-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.analytics-panel-head h3 { margin: 0 0 4px 0; }
.analytics-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.saobby-counter-preview {
  height: 28px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  padding: 2px 6px;
}
.analytics-frame-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  min-height: 600px;
}
.analytics-frame {
  display: block;
  width: 100%;
  min-height: 700px;
  border: 0;
}
.analytics-frame-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-secondary);
  pointer-events: none;
}
.analytics-frame-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}
.admin-empty-card {
  max-width: 640px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.admin-empty-card h2 { margin-top: 0; }

/* ---------- 设置页：saobby 额外计数器编辑器 ---------- */
.saobby-extra-editor {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.saobby-extra-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.saobby-extra-row label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}
@media (max-width: 768px) {
  .saobby-extra-row {
    grid-template-columns: 1fr;
  }
  .saobby-extra-row .btn {
    justify-self: start;
  }
}

.image-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.image-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.image-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--bg-soft);
}
.image-card-body { padding: 12px; }
.image-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.image-path {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  word-break: break-all;
  line-height: 1.5;
  min-height: 34px;
}
.image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.image-actions button {
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12px;
}
.image-actions button:hover { color: var(--primary); }
.image-actions button.danger:hover { color: #d9534f; }

@media (max-width: 720px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .nav-editor-row {
    grid-template-columns: 24px 1fr;
  }
  .nav-editor-row label {
    grid-column: 2;
  }
  .nav-editor-row .btn {
    grid-column: 2;
    justify-self: start;
  }
  .image-library {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}

/* ---------- 设置页：外观与主题面板 ---------- */
.theme-preset-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.theme-preset-preview .preset-card {
  font: inherit;
}

.theme-tokens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-bottom: 18px;
}
.theme-token {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.theme-token-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.theme-token-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
}
.theme-token-row input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}
.theme-token-row input[type="text"] {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text-main);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.theme-token-clear {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: none;
  cursor: pointer;
}
.theme-token-clear:hover {
  color: var(--primary);
}

.theme-custom-css {
  display: grid;
  gap: 8px;
}
.theme-custom-css textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-main);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
  min-height: 140px;
}
.theme-custom-css textarea:focus { border-color: var(--primary); }

@media (max-width: 720px) {
  .theme-tokens-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Admin 数据看板
   ============================================================ */
.admin-dashboard {
  margin: 0 0 18px;
}
.dashboard-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s;
}
.dashboard-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.dashboard-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.dashboard-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.dashboard-pv {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.dashboard-pv-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.dashboard-pv-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}
.dashboard-pv-list { display: grid; gap: 6px; }
.dashboard-pv-empty { color: var(--text-tertiary); font-size: 13px; padding: 12px 0; }
.dashboard-pv-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-main);
  border-bottom: none;
}
.dashboard-pv-row:hover { background: var(--bg-secondary); color: var(--primary); }
.dashboard-pv-rank {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.dashboard-pv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-pv-count {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 880px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-num { font-size: 22px; }
}

/* ============================================================
   诊断页：死链 / 孤儿图 工具卡片
   ============================================================ */
.diagnose-tool {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diagnose-tool-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  gap: 10px;
  flex-wrap: wrap;
}
.diagnose-tool-hint {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}
.tools-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
}
.tools-table th,
.tools-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: break-word;
}
.tools-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 12.5px;
}
.tools-table code { word-break: break-all; }
.btn-danger {
  background: #d9534f;
  color: #fff;
  border: 1px solid #d9534f;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
.btn-danger:hover { background: #c9302c; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}