/* ===== 后台样式 ===== */
:root {
  --bg:#f5f6f8; --surface:#fff; --text:#1a1d23; --muted:#6b7280; --faint:#9ca3af;
  --border:#e5e7eb; --border-strong:#d1d5db;
  --accent:#16161a; --accent-hover:#2a2a30;
  --gold:#c9a961; --gold-dark:#a8884a;
  --free:#4a9d6c; --free-soft:#e8f3ec; --member:#c9a961; --paid:#d97757;
  --danger:#d9504a; --danger-soft:#fbeae9;
  --info:#3b82f6; --info-soft:#dbeafe;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans SC",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
input,select,textarea{font-family:inherit;font-size:14px}

.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}

/* 侧边栏 */
.sidebar{background:var(--accent);color:#cfd2d8;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar__brand{display:flex;align-items:center;gap:8px;padding:20px 22px;font-weight:800;font-size:17px;color:#fff;border-bottom:1px solid #2a2a30}
.sidebar__brand .mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--gold);color:var(--accent);border-radius:6px;font-size:12px;font-weight:900}
.sidebar__nav{padding:14px 12px}
.sidebar__group-title{font-size:11px;color:#6b6f78;text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 6px;font-weight:600}
.sidebar__link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;color:#cfd2d8;font-size:14px;margin-bottom:1px;transition:.15s}
.sidebar__link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar__link--active{background:rgba(201,169,97,.18);color:#fff;font-weight:500}
.sidebar__link svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.sidebar__foot{padding:16px 22px;font-size:12px;color:#6b6f78;border-top:1px solid #2a2a30;margin-top:auto}
.sidebar__foot a{color:#cfd2d8}
.sidebar__foot a:hover{color:var(--gold)}

/* 主区 */
.main{padding:0;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar__title{font-size:17px;font-weight:700}
.topbar__actions{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.topbar__user{display:flex;align-items:center;gap:8px}
.topbar__avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.content{padding:28px}

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px}
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card__title{font-size:15px;font-weight:700}

/* 统计卡片 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px}
.stat__label{font-size:13px;color:var(--muted);margin-bottom:8px}
.stat__num{font-size:28px;font-weight:800;letter-spacing:-.02em}
.stat__trend{font-size:12px;color:var(--free);margin-top:6px}

/* 表格 */
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.table th,.table td{padding:12px 16px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--border)}
.table th{background:#fafafa;font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:#fafafa}
.cell-title{font-weight:500;color:var(--text)}
.cell-title a:hover{color:var(--gold-dark)}
.cell-meta{font-size:12px;color:var(--faint);margin-top:2px}
.cell-actions{display:flex;gap:6px;flex-wrap:wrap}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:8px 14px;border-radius:6px;transition:.15s;border:1px solid transparent;white-space:nowrap}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-dark)}
.btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn--ghost:hover{background:var(--bg)}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover{background:#b93d37}
.btn--sm{padding:6px 10px;font-size:12px}
.btn--lg{padding:11px 20px;font-size:14px}
.btn--block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 徽章 */
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px}
.badge--free{color:var(--free);background:var(--free-soft)}
.badge--member{color:var(--gold-dark);background:#f5efde}
.badge--paid{color:#fff;background:var(--paid)}
.badge--vip{color:#fff;background:var(--gold)}
.badge--published{color:var(--free);background:var(--free-soft)}
.badge--draft{color:#8a6d3b;background:#fcf3d6}
.badge--paid-ok{color:#fff;background:var(--free)}
.badge--paid-no{color:#fff;background:var(--faint)}

/* 表单 */
.form{max-width:920px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form__row--3{grid-template-columns:1fr 1fr 1fr}
.form__field{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.form__label{font-size:13px;font-weight:600;color:var(--text)}
.form__label .req{color:var(--danger)}
.form__hint{font-size:12px;color:var(--faint)}
.form__input,.form__select,.form__textarea{padding:10px 12px;border:1px solid var(--border-strong);border-radius:6px;background:#fff;font-size:14px;transition:.15s;width:100%}
.form__input:focus,.form__select:focus,.form__textarea:focus{outline:none;border-color:var(--accent)}
.form__textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.7}
.form__actions{display:flex;gap:10px;padding-top:14px;border-top:1px solid var(--border);margin-top:8px}

/* 文件上传 */
.upload{border:1.5px dashed var(--border-strong);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:.15s;background:#fafafa}
.upload:hover{border-color:var(--gold);background:#fdfaf2}
.upload__icon{width:32px;height:32px;color:var(--faint);margin:0 auto 8px}
.upload__text{font-size:13px;color:var(--muted)}
.upload__hint{font-size:11px;color:var(--faint);margin-top:4px}
.upload__preview{margin-top:12px}
.upload__preview img{max-height:120px;border-radius:6px;border:1px solid var(--border)}
.upload__file{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--info-soft);border-radius:6px;font-size:13px;margin-top:8px}
.upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 登录页 */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a20,#2d2a22);padding:24px}
.login-card{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:36px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login__brand{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:900;font-size:22px;margin-bottom:6px}
.login__brand .mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--accent);color:var(--gold);border-radius:8px;font-size:14px}
.login__sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:26px}
.login__error{background:var(--danger-soft);color:var(--danger);padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:16px}

/* 工具栏 */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.toolbar__filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter{padding:7px 14px;border-radius:6px;font-size:13px;color:var(--muted);border:1px solid var(--border);background:#fff;transition:.15s}
.filter--active{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter:hover:not(.filter--active){border-color:var(--border-strong)}
.search{position:relative}
.search input{padding:8px 12px 8px 34px;border:1px solid var(--border-strong);border-radius:6px;font-size:13px;width:240px;background:#fff}
.search input:focus{outline:none;border-color:var(--accent)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}

/* 空状态 */
.empty{text-align:center;padding:60px 20px;color:var(--faint)}
.empty__icon{width:48px;height:48px;margin:0 auto 12px;opacity:.5}

/* 提示条 */
.alert{padding:12px 16px;border-radius:6px;font-size:13px;margin-bottom:16px}
.alert--success{background:var(--free-soft);color:#2d7a4f}
.alert--error{background:var(--danger-soft);color:var(--danger)}

/* ===== 后台正文富文本编辑器 ===== */
.wysiwyg {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px #00000008;
  transition: border-color .15s, box-shadow .15s;
}
.wysiwyg:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #00000014;
}
.wysiwyg__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #fafbfc, #f3f5f8);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.wysiwyg__btn {
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #374151;
  font-size: 13px;
  line-height: 1;
  transition: all .12s;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-weight: 500;
}
.wysiwyg__btn:hover {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--accent);
  box-shadow: 0 1px 2px #00000010;
  transform: translateY(-1px);
}
.wysiwyg__btn:active { transform: translateY(0); }
.wysiwyg__btn.is-bold   { font-weight: 800; }
.wysiwyg__btn.is-italic { font-style: italic; }
.wysiwyg__btn.is-del    { text-decoration: line-through; }
.wysiwyg__btn.is-ul     { letter-spacing: 1px; }
.wysiwyg__btn--sep {
  width: 1px;
  height: 18px;
  background: #d1d5db;
  margin: 0 6px;
  min-width: 1px;
  padding: 0;
  cursor: default;
  flex: none;
}
.wysiwyg__btn--sep:hover { background: #d1d5db; border: none; box-shadow: none; transform: none; }
.wysiwyg__btn--danger { color: #d9504a; }
.wysiwyg__btn--danger:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.wysiwyg__tabs {
  display: inline-flex;
  background: #e5e7eb;
  padding: 3px;
  border-radius: 7px;
  margin-left: auto;
  flex: none;
}
.wysiwyg__tab {
  height: 26px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 12.5px;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
}
.wysiwyg__tab:hover { color: var(--text); }
.wysiwyg__tab--active {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 2px #00000010;
}

.wysiwyg__body { position: relative; }
.wysiwyg__textarea {
  width: 100%;
  border: none;
  outline: none;
  padding: 18px 20px;
  min-height: 360px;
  font-family: Consolas, Monaco, "JetBrains Mono", "Fira Code", monospace;
  font-size: 13.5px;
  line-height: 1.8;
  color: #1a1d23;
  background: #fffdf7;
  resize: vertical;
  tab-size: 2;
}
.wysiwyg__preview {
  min-height: 360px;
  padding: 26px 30px;
  background: #fff;
  color: #1f2328;
  display: none;
  line-height: 1.85;
  font-size: 15px;
}
.wysiwyg__body.is-preview .wysiwyg__textarea { display: none; }
.wysiwyg__body.is-preview .wysiwyg__preview  { display: block; }

/* 编辑器底部快捷键提示条 */
.wysiwyg__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
  color: #6b7280;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wysiwyg__footer kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  font-family: Consolas, Monaco, monospace;
  font-size: 11.5px;
  font-weight: 600;
  margin: 0 2px;
}

/* 响应式 */
@media (max-width: 900px){
  .wysiwyg__btn {
    min-width: 30px; height: 30px; padding: 0 6px; font-size: 12.5px;
  }
  .wysiwyg__btn--sep { display: none; }
  .wysiwyg__tabs { margin-left: 0; width: 100%; justify-content: flex-start; margin-top: 6px; }
}

/* 后台浅色正文排版（与前台暗色版 .prose 对应）*/
.prose-light { font-size: 15px; line-height: 1.85; color: #1f2328; word-break: break-word; }
.prose-light > *:first-child { margin-top: 0; }
.prose-light > *:last-child  { margin-bottom: 0; }
.prose-light h1{ font-size: 28px; font-weight: 800; margin: 30px 0 16px; line-height: 1.3; color: #111827; }
.prose-light h2{ font-size: 22px; font-weight: 700; margin: 28px 0 14px; line-height: 1.35; color: #111827; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
.prose-light h3{ font-size: 18px; font-weight: 700; margin: 24px 0 12px; line-height: 1.4; color: #111827; }
.prose-light h4{ font-size: 16px; font-weight: 700; margin: 18px 0 10px; color: #111827; }
.prose-light h5,.prose-light h6{ font-size: 15px; font-weight: 600; margin: 14px 0 8px; color: #111827; }
.prose-light p { margin: 0 0 14px; }
.prose-light a { color: #2563eb; text-decoration: none; border-bottom: 1px solid #bfdbfe; padding-bottom: 1px; }
.prose-light a:hover { color: #1d4ed8; border-color: #2563eb; }
.prose-light strong { font-weight: 700; color: #111827; }
.prose-light em { font-style: italic; }
.prose-light del { text-decoration: line-through; opacity: .7; }
.prose-light u { text-decoration: underline; }
.prose-light ul, .prose-light ol { padding-left: 26px; margin: 0 0 16px; }
.prose-light ul { list-style: disc; }
.prose-light ol { list-style: decimal; }
.prose-light li { margin: 6px 0; line-height: 1.8; }
.prose-light blockquote {
  margin: 18px 0; padding: 12px 16px; border-left: 4px solid var(--gold);
  background: #fbf7ee; border-radius: 0 8px 8px 0; color: #4b5563;
}
.prose-light blockquote p:last-child { margin-bottom: 0; }
.prose-light code {
  padding: 2px 6px; border-radius: 5px; background: #f3f4f6;
  color: #b91c1c; font-family: Consolas, Monaco, monospace; font-size: 13.5px;
  border: 1px solid #e5e7eb;
}
.prose-light pre {
  margin: 16px 0; padding: 16px 18px; background: #0b1020; border-radius: 10px; overflow-x: auto;
  line-height: 1.7; font-size: 13.5px; border: 1px solid #0b1020;
}
.prose-light pre code { padding: 0; border: none; background: transparent; color: #e6e9f2; font-size: 13.5px; }
.prose-light hr { border: none; border-top: 1px dashed #d1d5db; margin: 26px 0; }
.prose-light img {
  max-width: 100%; height: auto; border-radius: 10px; margin: 14px 0;
  border: 1px solid #e5e7eb; box-shadow: 0 4px 16px #00000010;
}
.prose-light table {
  width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px;
}
.prose-light th, .prose-light td {
  padding: 10px 12px; border: 1px solid #e5e7eb; text-align: left;
}
.prose-light th { background: #f9fafb; color: #111827; font-weight: 700; }
.prose-light tr:nth-child(even) td { background: #fafbfc; }
.prose-light kbd {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb;
  border-bottom-width: 2px; font-family: Consolas, monospace; font-size: 12px;
}
.prose-light mark {
  background: linear-gradient(transparent 60%, rgba(201,169,97,.45) 60%); color: inherit; padding: 0 2px;
}

/* 响应式 */
@media (max-width:900px){
  .admin-layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-220px;z-index:50;transition:.2s;width:220px}
  .sidebar--open{left:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .form__row,.form__row--3{grid-template-columns:1fr}
  .content{padding:18px}
  .table{display:block;overflow-x:auto}
  .wysiwyg__btn { min-width: 30px; height: 30px; padding: 0 6px; }
  .wysiwyg__btn--sep { display: none; }
}