/* ============================================================
   Mccの博客 · 编辑器 + 登录页 + 管理员操作样式
   ============================================================ */

/* ========== 管理员操作按钮（文章卡片上） ========== */
.mcc-admin-actions {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 6px; z-index: 5;
  opacity: 0; transition: opacity .25s ease;
}
.article-sort.item:hover .mcc-admin-actions { opacity: 1; }
.mcc-edit-btn, .mcc-delete-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mcc-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--mcc-muted); cursor: pointer;
  transition: all .2s ease; padding: 0;
}
.mcc-edit-btn:hover { background: var(--mcc-gold-soft); color: var(--mcc-gold-deep); border-color: var(--mcc-gold); }
.mcc-delete-btn:hover { background: rgba(158, 90, 90, 0.12); color: var(--mcc-accent); border-color: var(--mcc-accent); }

/* 文章详情页编辑按钮 */
.mcc-post-admin-bar { margin-bottom: 24px; }
.mcc-edit-btn--large {
  width: auto; height: auto; padding: 8px 18px; border-radius: var(--mcc-radius-full);
  font-family: var(--mcc-font-sans); font-size: 13.5px; font-weight: 600;
  gap: 6px; display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #d4b87a, var(--mcc-gold));
  color: var(--mcc-ink); border: none;
  box-shadow: 0 4px 12px rgba(200, 168, 110, 0.3);
}
.mcc-edit-btn--large:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200, 168, 110, 0.4); }

/* ========== 登录页 ========== */
.login-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-radius-card);
  padding: 40px 36px;
  max-width: 380px; width: 100%;
  box-shadow: 0 22px 60px -20px rgba(26, 22, 18, 0.25);
  text-align: center;
}
.login-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.login-logo .avatar-core { box-shadow: 0 8px 24px -8px rgba(26, 22, 18, 0.3); }
.login-title {
  font-family: var(--mcc-font-serif); font-weight: 700;
  font-size: 24px; color: var(--mcc-ink); margin: 0 0 8px;
}
.login-subtitle { font-size: 13px; color: var(--mcc-muted); margin: 0 0 24px; }
.login-error {
  background: rgba(158, 90, 90, 0.1); color: var(--mcc-accent);
  padding: 10px 16px; border-radius: var(--mcc-radius);
  font-size: 13px; margin-bottom: 16px;
}
.login-form { text-align: left; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-family: var(--mcc-font-sans); font-size: 12.5px;
  font-weight: 600; color: var(--mcc-muted); margin-bottom: 6px;
}
.form-group input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--mcc-border); border-radius: var(--mcc-radius);
  font-family: var(--mcc-font-sans); font-size: 14px; color: var(--mcc-ink);
  background: rgba(255, 255, 255, 0.8);
  transition: border-color .2s ease; outline: none;
}
.form-group input:focus { border-color: var(--mcc-gold); box-shadow: 0 0 0 3px rgba(200, 168, 110, 0.15); }
.login-submit {
  width: 100%; padding: 12px; margin-top: 8px;
  border: none; border-radius: var(--mcc-radius);
  font-family: var(--mcc-font-sans); font-size: 15px; font-weight: 700;
  color: var(--mcc-ink); cursor: pointer;
  background: linear-gradient(135deg, #d4b87a, var(--mcc-gold));
  box-shadow: 0 4px 12px rgba(200, 168, 110, 0.3);
  transition: all .2s ease;
}
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200, 168, 110, 0.4); }
.login-back { display: inline-block; margin-top: 20px; font-size: 13px; color: var(--mcc-muted); }

/* ========== 编辑器浮层 ========== */
.mcc-editor-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(26, 22, 18, 0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.mcc-editor-overlay.is-open { opacity: 1; pointer-events: auto; }
.mcc-editor-panel {
  background: var(--mcc-bg);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-radius-card);
  width: 100%; max-width: 860px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(26, 22, 18, 0.4);
  transform: translateY(20px); transition: transform .3s ease;
  overflow: hidden;
}
.mcc-editor-overlay.is-open .mcc-editor-panel { transform: translateY(0); }

/* 编辑器头部 */
.mcc-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--mcc-border);
  flex-shrink: 0;
}
.mcc-editor-header h2 {
  margin: 0; font-family: var(--mcc-font-serif); font-weight: 700;
  font-size: 18px; color: var(--mcc-ink);
}
.mcc-editor-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--mcc-muted); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.mcc-editor-close:hover { background: rgba(158, 90, 90, 0.1); color: var(--mcc-accent); }

/* 编辑器元信息区 */
.mcc-editor-meta { padding: 16px 24px; border-bottom: 1px solid var(--mcc-border); flex-shrink: 0; }
.mcc-editor-title-input {
  width: 100%; border: none; outline: none;
  font-family: var(--mcc-font-serif); font-weight: 700;
  font-size: 24px; color: var(--mcc-ink);
  background: transparent; padding: 4px 0;
}
.mcc-editor-title-input::placeholder { color: var(--mcc-muted); opacity: 0.5; }
.mcc-editor-meta-row {
  display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.mcc-meta-field { flex: 1; min-width: 180px; }
.mcc-meta-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--mcc-muted); margin-bottom: 4px;
}
.mcc-meta-field input, .mcc-meta-field select {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--mcc-border); border-radius: var(--mcc-radius);
  font-family: var(--mcc-font-sans); font-size: 13px; color: var(--mcc-ink) !important;
  background: rgba(255, 255, 255, 0.85); outline: none;
  appearance: auto;
  -webkit-appearance: menulist;
  cursor: pointer;
}
.mcc-meta-field select option {
  color: #1a1612 !important;
  background: #ffffff;
  font-family: var(--mcc-font-sans); font-size: 13px;
}
.mcc-meta-field input:focus, .mcc-meta-field select:focus { border-color: var(--mcc-gold); box-shadow: 0 0 0 3px rgba(200, 168, 110, 0.18); }

/* 编辑器工具栏 */
.mcc-editor-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 24px; border-bottom: 1px solid var(--mcc-border);
  flex-shrink: 0; flex-wrap: wrap;
  background: var(--mcc-bg-2);
}
.mcc-tool-btn {
  width: 32px; height: 32px; border-radius: var(--mcc-radius);
  border: 1px solid transparent; background: transparent;
  color: var(--mcc-muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mcc-font-sans); font-size: 14px; font-weight: 600;
  transition: all .15s ease;
}
.mcc-tool-btn:hover { background: rgba(200, 168, 110, 0.12); color: var(--mcc-gold-deep); }
.mcc-tool-btn.is-active { background: var(--mcc-gold-soft); color: var(--mcc-gold-deep); border-color: var(--mcc-gold); }
.mcc-tool-sep { width: 1px; height: 20px; background: var(--mcc-border); margin: 0 4px; }

/* Tiptap 编辑区域 —— 套用文章正文样式保证所见即所得 */
.mcc-editor-body {
  flex: 1; overflow-y: auto; padding: 28px 32px;
  -webkit-overflow-scrolling: touch;
  min-height: 340px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
}
.mcc-editor-body #mcc-tiptap-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.mcc-editor-body .tiptap {
  flex: 1;
  display: block;
  outline: none;
  font-family: var(--mcc-font-sans); font-size: 16px; line-height: 1.85;
  color: var(--mcc-text);
}
.mcc-editor-body .tiptap .ProseMirror {
  min-height: 100%;
  padding: 0 !important;
}
.mcc-editor-body .tiptap:focus,
.mcc-editor-body .tiptap .ProseMirror:focus { outline: none; }
.mcc-editor-body .tiptap > *:first-child {
  margin-top: 0;
}
.mcc-editor-body .tiptap p {
  margin: 0.8em 0;
  min-height: 1.85em;
}
/* Tiptap 空编辑器的占位符（Placeholder extension 的标准 class 组合） */
.mcc-editor-body .tiptap p.is-editor-empty:first-child::before,
.mcc-editor-body .tiptap.ProseMirror-focused p.is-empty:first-child::before,
.mcc-editor-body .tiptap p.ProseMirror-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--mcc-muted);
  opacity: 0.55;
  font-style: normal;
  font-weight: 400;
}
.mcc-editor-body .tiptap h1 { font-family: var(--mcc-font-serif) !important; font-weight: 700; font-size: 1.8em; color: var(--mcc-ink); margin-top: 1.8em; margin-bottom: 0.8em; }
.mcc-editor-body .tiptap h2 { font-family: var(--mcc-font-serif) !important; font-weight: 700; font-size: 1.5em; color: var(--mcc-ink); border-bottom: 2px solid var(--mcc-gold-soft); padding-bottom: 0.3em; margin-top: 1.8em; margin-bottom: 0.8em; }
.mcc-editor-body .tiptap h3 { font-family: var(--mcc-font-serif) !important; font-weight: 700; font-size: 1.25em; color: var(--mcc-ink); margin-top: 1.8em; margin-bottom: 0.8em; }
.mcc-editor-body .tiptap blockquote { border-left: 4px solid var(--mcc-gold); background: var(--mcc-gold-soft); border-radius: 0 var(--mcc-radius) var(--mcc-radius) 0; padding: 14px 18px; margin: 1.5em 0; color: var(--mcc-text); }
.mcc-editor-body .tiptap code { font-family: var(--mcc-font-mono); font-size: 0.88em; }
.mcc-editor-body .tiptap code:not([class]) { background: var(--mcc-gold-soft); color: var(--mcc-gold-deep); padding: 1px 6px; border-radius: 3px; }
.mcc-editor-body .tiptap pre { background: #fbf8f1; border: 1px solid var(--mcc-border); border-radius: var(--mcc-radius); padding: 16px; overflow-x: auto; margin: 1.5em 0; }
.mcc-editor-body .tiptap pre code { background: transparent; color: var(--mcc-text); padding: 0; }
.mcc-editor-body .tiptap ul, .mcc-editor-body .tiptap ol { padding-left: 1.5em; margin: 1em 0; }
.mcc-editor-body .tiptap li { margin: 0.4em 0; }
.mcc-editor-body .tiptap img { max-width: 100%; border-radius: var(--mcc-radius); margin: 1.5em 0; }
.mcc-editor-body .tiptap hr { border: none; border-top: 1px dashed var(--mcc-border); margin: 2em 0; }
.mcc-editor-body .tiptap a { color: var(--mcc-gold-deep); text-decoration: underline; text-decoration-color: rgba(200, 168, 110, 0.4); }

/* 编辑器底部 */
.mcc-editor-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-top: 1px solid var(--mcc-border);
  flex-shrink: 0; background: var(--mcc-bg-2);
}
.mcc-editor-status { font-size: 12px; color: var(--mcc-muted); }
.mcc-editor-actions { display: flex; gap: 8px; }
.mcc-btn {
  padding: 8px 20px; border-radius: var(--mcc-radius-full);
  font-family: var(--mcc-font-sans); font-size: 13.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--mcc-border); background: transparent;
  color: var(--mcc-text); transition: all .2s ease;
}
.mcc-btn:hover { border-color: var(--mcc-gold); color: var(--mcc-gold-deep); }
.mcc-btn-primary {
  background: linear-gradient(135deg, #d4b87a, var(--mcc-gold));
  color: var(--mcc-ink); border: none;
  box-shadow: 0 4px 12px rgba(200, 168, 110, 0.3);
}
.mcc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200, 168, 110, 0.4); }
.mcc-btn-danger { color: var(--mcc-accent); border-color: rgba(158, 90, 90, 0.3); }
.mcc-btn-danger:hover { background: rgba(158, 90, 90, 0.1); border-color: var(--mcc-accent); }

/* 编辑器加载中 */
.mcc-editor-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px; color: var(--mcc-muted); font-size: 14px;
}
.mcc-editor-loading::before {
  content: ""; width: 20px; height: 20px;
  border: 2px solid var(--mcc-border); border-top-color: var(--mcc-gold);
  border-radius: 50%; margin-right: 10px;
  animation: mcc-spin 0.8s linear infinite;
}

/* 移动端编辑器 */
@media (max-width: 768px) {
  .mcc-editor-overlay { padding: 0; }
  .mcc-editor-panel { max-height: 100vh; border-radius: 0; }
  .mcc-editor-header { padding: 12px 16px; }
  .mcc-editor-meta { padding: 12px 16px; }
  .mcc-editor-toolbar { padding: 6px 12px; overflow-x: auto; }
  .mcc-editor-body { padding: 20px 16px; }
  .mcc-editor-footer { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .mcc-editor-title-input { font-size: 20px; }
}