/* 闃叉椤甸潰鍒囨崲鐧介棯 */
html { background: #f1f5f9;  }
html.dark { background: #050812; }

/* ================================================================
   瀹屾暣 CSS 鏍峰紡 鈥?鐩存帴鎻愬彇鑷?1111.html <style> 鍧?
   淇濈暀鍏ㄩ儴 Glassmorphism銆佹殫榛戞ā寮忋€佸姩鐢汇€佷唬鐮侀潰鏉跨瓑鏍峰紡
   ================================================================ */

/* 鍏ㄥ眬骞虫粦杩囨浮 */
/* Day/night mode transitions */
/* Day/night transition: activated by .mode-transitioning (JS) */
html.mode-transitioning,
html.mode-transitioning * {
  transition-duration: 1.5s !important;
  transition-timing-function: ease !important;
  transition-property: background-color, background, color,
                       border-color, border, box-shadow !important;
}
/* 鏍稿績锛氶珮绾ч€忔槑纾ㄧ爞鍗＄墖椋庢牸 (Glassmorphism) */
:root {
    --glass-bg-light: rgba(255, 255, 255, 0.45);
    --glass-border-light: rgba(255, 255, 255, 0.25);
    --glass-shadow-light: 0 12px 40px -10px rgba(0, 0, 0, 0.10), 0 2px 8px -2px rgba(0, 0, 0, 0.05);
    --glass-bg-dark: rgba(8, 12, 24, 0.25);
    --glass-border-dark: rgba(255, 255, 255, 0.10);
    --glass-shadow-dark: 0 24px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0px 0px rgba(255, 255, 255, 0.06);
}

.glass-panel {
    background: var(--glass-bg-light);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--glass-shadow-light), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.dark .glass-panel {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    box-shadow: var(--glass-shadow-dark);
}

.glass-hover:hover {
    border-color: rgba(99, 102, 241, 0.35) ;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(99,102,241,0.10);
    background: rgba(255, 255, 255, 0.25);
}
.dark .glass-hover:hover {
    border-color: rgba(99, 102, 241, 0.25) ;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 20px 0 rgba(99, 102, 241, 0.08);
    background: rgba(10, 16, 28, 0.45);
}

/* ====== 鏆楅粦妯″紡鍏ㄨ鐩?====== */
.dark, .dark body { background: #050812; color: #cbd5e1 !important; }
.dark input, .dark textarea, .dark select { color-scheme: dark !important; }
.dark .bg-white\/40 { background: rgba(7,10,18,0.5)  !important; }
.dark .bg-slate-200\/50 { background: rgba(255,255,255,0.06)  !important; }
.dark .bg-indigo-50 { background: rgba(99,102,241,0.05)  !important; }
.dark .bg-indigo-50\/80 { background: rgba(99,102,241,0.05)  !important; }
.dark .bg-purple-50\/80 { background: rgba(168,85,247,0.05)  !important; }
.dark .bg-amber-50 { background: rgba(245,158,11,0.05)  !important; }
.dark .bg-emerald-50 { background: rgba(16,185,129,0.1)  !important; }
.dark .bg-sky-50 { background: rgba(14,165,233,0.05)  !important; }
.dark .bg-orange-50\/50 { background: rgba(234,88,12,0.1)  !important; }
.dark .bg-yellow-50\/50 { background: rgba(202,138,4,0.1)  !important; }
.dark .bg-blue-50\/50 { background: rgba(59,130,246,0.1)  !important; }
.dark .bg-rose-50 { background: rgba(225,29,72,0.1)  !important; }
.dark .text-slate-500 { color: #94a3b8  !important; }
.dark .text-slate-600, .dark .text-slate-700 { color: #cbd5e1  !important; }
.dark .text-indigo-600 { color: #818cf8  !important; }
.dark .text-indigo-700 { color: #818cf8  !important; }
.dark .text-purple-600 { color: #a78bfa  !important; }
.dark .text-amber-600 { color: #fbbf24  !important; }
.dark .text-emerald-600 { color: #34d399  !important; }
.dark .text-sky-600 { color: #38bdf8  !important; }
.dark .text-rose-600 { color: #fb7185  !important; }
.dark .text-blue-700 { color: #60a5fa  !important; }
.dark .text-yellow-700 { color: #facc15  !important; }
.dark .text-orange-700 { color: #fb923c  !important; }
.dark .border-white\/50 { border-color: rgba(255,255,255,0.08)  !important; }
.dark .border-white\/60 { border-color: rgba(255,255,255,0.08)  !important; }
.dark .border-white\/10 { border-color: rgba(255,255,255,0.06)  !important; }
.dark .border-indigo-200\/50, .dark .border-indigo-100 { border-color: rgba(99,102,241,0.2)  !important; }
.dark .border-purple-100 { border-color: rgba(168,85,247,0.2)  !important; }
.dark .border-orange-100 { border-color: rgba(234,88,12,0.2)  !important; }
.dark .border-yellow-100 { border-color: rgba(202,138,4,0.2)  !important; }
.dark .border-blue-100 { border-color: rgba(59,130,246,0.2)  !important; }
.dark .border-rose-200 { border-color: rgba(225,29,72,0.2)  !important; }
.dark .border-slate-100\/30 { border-color: rgba(255,255,255,0.06)  !important; }
.dark .border-slate-200\/50 { border-color: rgba(255,255,255,0.06)  !important; }
.dark .border-slate-300 { border-color: rgba(255,255,255,0.1)  !important; }
.dark .divide-slate-100\/30 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.06)  !important; }
.dark .bg-white { background: #1e1e1e  !important; }
.dark .bg-slate-200 { background: rgba(255,255,255,0.08)  !important; }
.dark .bg-slate-400 { background: rgba(255,255,255,0.2)  !important; }
.dark .bg-slate-300 { background: rgba(255,255,255,0.15)  !important; }
.dark .bg-slate-900\/40 { background: rgba(0,0,0,0.5)  !important; }
.dark tbody tr:hover { background: rgba(255,255,255,0.03)  !important; }
.dark th { color: #cbd5e1  !important; }
.dark td { color: #cbd5e1  !important; }
.dark footer { background: rgba(7,9,19,0.8) ; border-color: rgba(255,255,255,0.06)  !important; }
.dark .view-btn.text-slate-600 { color: #cbd5e1  !important; }
.dark .view-btn.text-slate-600:hover { background: rgba(255,255,255,0.05)  !important; }
.dark .bg-gradient-to-br\.from-slate-900\.to-slate-600 { background-image: linear-gradient(to bottom right, #f1f5f9, #94a3b8)  !important; }
.dark .glass-panel input, .dark input.glass-panel, .dark input[type="text"], .dark input[type="password"], .dark textarea, .dark select {
    background: rgba(0,0,0,0.3) ;
    color: #cbd5e1 ;
    border-color: rgba(255,255,255,0.08) ;
}
.dark .glass-panel input::placeholder,
.dark .glass-panel textarea::placeholder { color: #94a3b8  !important; }
.dark .group-hover\:text-indigo-500 { color: #818cf8  !important; }
.dark .text-slate-300 { color: #cbd5e1  !important; }
.dark .text-slate-400 { color: #94a3b8  !important; }
.dark mark, .dark .bg-amber-300\/60 { background: rgba(245,158,11,0.2) ; color: #fbbf24  !important; }
.dark .hover\:bg-slate-200\/50:hover { background: rgba(255,255,255,0.05)  !important; }
.dark .hover\:bg-amber-50:hover { background: rgba(245,158,11,0.05)  !important; }
.dark .hover\:bg-emerald-50:hover { background: rgba(16,185,129,0.1)  !important; }
.dark .hover\:bg-sky-50:hover { background: rgba(14,165,233,0.05)  !important; }
.dark .hover\:text-indigo-500:hover { color: #818cf8  !important; }
.dark .hover\:bg-white\/50:hover,
.dark .hover\:bg-slate-100\/50:hover,
.dark .hover\:bg-slate-200\/50:hover { background: rgba(255,255,255,0.06)  !important; }
.dark .hover\:bg-white\/50:hover span,
.dark .hover\:bg-slate-100\/50:hover span,
.dark .hover\:bg-white\/50:hover .text-slate-700,
.dark .hover\:bg-slate-100\/50:hover .text-slate-700 { color: #e2e8f0  !important; }
.dark .hover\:bg-indigo-500:hover { background: #4f46e5  !important; }
.dark button.hover\:bg-white\/80:hover { background: rgba(255,255,255,0.08)  !important; }
.dark button.hover\:bg-white\/10:hover { background: rgba(255,255,255,0.08)  !important; }
.dark .text-white { color: #e2e8f0  !important; }
.dark .text-slate-900 { color: #e2e8f0  !important; }
.dark .bg-black\/10 { background: rgba(0,0,0,0.3)  !important; }
.dark .bg-black\/20 { background: rgba(0,0,0,0.3)  !important; }
.dark .from-indigo-100.to-purple-100 { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2)) !important; }`n.dark .from-indigo-500\.to-purple-500 { background: linear-gradient(135deg, #4f46e5, #7c3aed)  !important; }
.dark .shadow-indigo-500\/30 { box-shadow: 0 10px 15px -3px rgba(79,70,229,0.3)  !important; }
.dark .shadow-indigo-500\/20 { box-shadow: 0 10px 15px -3px rgba(79,70,229,0.2)  !important; }
.dark .bg-indigo-400 { background: #1e1b4b  !important; }
.dark .bg-indigo-600 { background: #4f46e5  !important; }
.dark .bg-purple-400 { background: #1a0a3e  !important; }
.dark .bg-pink-400 { background: #1f0a14  !important; }
.dark .text-slate-700 { color: #cbd5e1  !important; }
.dark .text-slate-800 { color: #e2e8f0  !important; }
.dark .text-slate-900 { color: #f1f5f9  !important; }
.dark .text-indigo-400 { color: #818cf8  !important; }
.dark .text-indigo-500 { color: #818cf8  !important; }
.dark .text-indigo-600 { color: #818cf8  !important; }
.dark .text-indigo-700 { color: #818cf8  !important; }
.dark .text-purple-400 { color: #a78bfa  !important; }
.dark .text-purple-500 { color: #a78bfa  !important; }
.dark .text-purple-600 { color: #a78bfa  !important; }
.dark .text-amber-400 { color: #fbbf24  !important; }
.dark .text-amber-600 { color: #fbbf24  !important; }
.dark .text-emerald-400 { color: #34d399  !important; }
.dark .text-emerald-500 { color: #34d399  !important; }
.dark .text-emerald-600 { color: #34d399  !important; }
.dark .text-rose-500 { color: #fb7185  !important; }
.dark .text-rose-600 { color: #fb7185  !important; }
.dark .text-blue-600 { color: #60a5fa  !important; }
.dark .text-blue-700 { color: #60a5fa  !important; }
.dark .text-sky-500 { color: #38bdf8  !important; }
.dark .text-sky-600 { color: #38bdf8  !important; }
.dark .text-white { color: #e2e8f0  !important; }
.dark .text-emerald-500 { color: #34d399  !important; }
.dark .hover\:text-white:hover { color: #e2e8f0  !important; }
.dark .hover\:bg-indigo-500:hover { background: #4f46e5  !important; }
.dark .hover\:bg-indigo-500:hover .text-slate-700,
.dark .hover\:bg-white\/50:hover span,
.dark .hover\:bg-slate-100\/50:hover span { color: #e2e8f0  !important; }
.dark .hover\:text-amber-700:hover { color: #fbbf24  !important; }
.dark .hover\:text-rose-700:hover { color: #fb7185  !important; }
.dark .hover\:text-indigo-700:hover { color: #818cf8  !important; }
.dark .text-amber-500 { color: #fbbf24  !important; }
.dark .hover\:text-emerald-700:hover { color: #6ee7b7  !important; }

/* Code panel */
/* 浠ｇ爜鍧?鈥?GitHub椋庢牸 */
html code {
  background: rgba(175, 184, 193, 0.2);
  color: #24292f;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
html.dark code {
  background: rgba(110, 118, 129, 0.4);
  color: #c9d1d9;
}
html.dark pre code, html.dark .code-panel code {
  background: transparent;
  color: #c9d1d9;
}

.code-panel-header { background: #e8eaed; color: #57606a; border-bottom: 1px solid #e1e4e8; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }
.dark .code-panel-header { background: #252526; color: #858585; border-bottom-color: #333 !important; }
.code-copy-btn { color: #57606a; }
.code-copy-btn:hover { background: #d0d7de; }
.dark .code-copy-btn { color: #858585 !important; }
.dark .code-copy-btn:hover { background: #3c3c3c !important; }
.code-line-numbers { color: #6e7681; border-right-color: #d0d7de; }
.dark .code-line-numbers { color: #858585; border-right-color: #333 !important; }
.code-kw { color: #8250df; }
.dark .code-kw { color: #569cd6 !important; }
.code-fn { color: #0550ae; }
.dark .code-fn { color: #dcdcaa !important; }
.code-str { color: #d14; }
.dark .code-str { color: #ce9178 !important; }
.code-num { color: #1a7f37; }
.dark .code-num { color: #b5cea8 !important; }
.code-cmt { color: #6e7781; font-style: italic; }
.dark .code-cmt { color: #6a9955 !important; font-style: italic !important; }
.code-panel { background: #ffffff; border: 1px solid #e1e4e8; border-radius: 16px; overflow: hidden; font-family: 'SF Mono','Fira Code','Consolas',monospace; font-size: 0.875rem; color: #24292f; }
.dark .code-panel { background: #1e1e1e !important; border-color: #333 !important; color: #d4d4d4 !important; }
.code-panel pre { color: #24292f; }
.dark .code-panel pre { color: #d4d4d4 !important; }

.glass-hover {
}

/* 鐜鍏夋檿绮掑瓙娴佷綋鍔ㄧ敾 */

/* Missing dark mode overrides for article elements */
.dark .bg-white\/60 { background: rgba(7,10,18,0.5) !important; }
.dark .bg-indigo-400\/30 { background: rgba(79,70,229,0.25) !important; }
.dark .hover\:bg-blue-500:hover { background: #3b82f6 !important; }
.dark .hover\:bg-emerald-500:hover { background: #10b981 !important; }
.dark .from-indigo-400 { --tw-gradient-from: #818cf8 !important; }
.dark .to-purple-400 { --tw-gradient-to: #a78bfa !important; }
.dark .border-white\/50 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-white\/40 { border-color: rgba(255,255,255,0.06) !important; }

/* Missing dark mode overrides */
.dark .bg-white\/60 { background: rgba(7,10,18,0.5) !important; }
.dark .bg-indigo-400\/30 { background: rgba(79,70,229,0.25) !important; }
.dark .hover\:bg-blue-500:hover { background: #3b82f6 !important; }
.dark .hover\:bg-emerald-500:hover { background: #10b981 !important; }
.dark .from-indigo-400 { --tw-gradient-from: #818cf8 !important; }
.dark .to-purple-400 { --tw-gradient-to: #a78bfa !important; }
.dark .border-white\/50 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-white\/40 { border-color: rgba(255,255,255,0.06) !important; }

@keyframes float {
    0%   { transform: translate(0px, 0px) scale(1); }
    20%  { transform: translate(240px, -180px) scale(1.3); }
    40%  { transform: translate(-160px, 120px) scale(0.8); }
    60%  { transform: translate(-200px, -100px) scale(1.25); }
    80%  { transform: translate(180px, 160px) scale(0.85); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes breathe {
    0% { opacity: 0; }
    10% { opacity: 0.2; }
    50% { opacity: 0.95; }
    90% { opacity: 0.2; }
    100% { opacity: 0; }
}

/* 鍛煎惛鍏夌悆 鈥?娴姩 + 鍛煎惛 */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 1s ease;
}

@keyframes blobFloat {
  0%   { transform: translate(0px, 0px) scale(1); }
  20%  { transform: translate(240px, -180px) scale(1.3); }
  40%  { transform: translate(-160px, 120px) scale(0.8); }
  60%  { transform: translate(-200px, -100px) scale(1.25); }
  80%  { transform: translate(180px, 160px) scale(0.85); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes blobBreathe {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* 椤甸潰鍔犺浇娓愬叆鈥斺€旈殣钘廱lob璺充綅 */

/* 渚ц竟鏍忔爣棰?*/
html .sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  letter-spacing: 0.02em;
}
html .sidebar-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, #6366f1);
}
html .sidebar-title.knowledge::before { background: #6366f1; }
html .sidebar-title.tags::before { background: #a78bfa; }
html.dark .sidebar-title {
  color: #e2e8f0;
  border-bottom-color: rgba(255,255,255,0.06);
}

/* 鍒嗙被鍒楄〃椤?*/
html .cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  text-decoration: none;
color: #475569;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
html .cat-item:last-child { border-bottom: none; }
html .cat-item:hover {
  color: #4f46e5;
  padding-left: 6px;
}
html .cat-item:active { transform: scale(0.99); }
html.dark .cat-item { color: #94a3b8; border-bottom-color: rgba(255,255,255,0.04) !important; }
html.dark .cat-item:hover { color: #818cf8 !important; }

html .cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}
html.dark .cat-count { background: rgba(99,102,241,0.12); color: #818cf8 !important; }

/* 鏍囩 鈥?纾ㄧ爞鐜荤拑椋庢牸 */
html .tag-glass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  color: #64748b;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
html .tag-glass:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}
html .tag-glass:active { transform: scale(0.95); }
html.dark .tag-glass {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
}
html.dark .tag-glass:hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.25);
  color: #818cf8;
  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
}

/* 鍝佺墝鏍囪瘑寰界珷锛圔LOG / 绠＄悊鍙帮級 */
html .brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff ;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  text-decoration: none;
cursor: pointer;
}
html .brand-badge:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
  color: #fff ;
}
html .brand-badge:active {
  transform: scale(0.96);
}
html.dark .brand-badge {
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
}
html.dark .brand-badge:hover {
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4);
}

/* ====== 瀵艰埅鏍忕粍浠舵牱寮?====== */

/* 鍥哄畾椤舵爮瀵艰埅椤?*/
html .topbar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #64748b;
white-space: nowrap;
}
html .topbar-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  transform: translateY(-1px);
}
html .topbar-item:active {
  transform: scale(0.95);
}
html .topbar-item.active {
  color: #4f46e5;
}
html .topbar-item.active::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #6366f1;
  animation: topbarActiveIn 0.3s ease;
}
html.dark .topbar-item { color: #cbd5e1 !important; }
html.dark .topbar-item:hover { background: rgba(99,102,241,0.15); color: #a5b4fc !important; }
html.dark .topbar-item.active { color: #a5b4fc !important; }
html.dark .topbar-item.active::after { background: #a5b4fc !important; }

@keyframes topbarActiveIn {
  from { width: 0; opacity: 0; }
  to { width: 14px; opacity: 1; }
}

/* 绮樻€у鑸摼鎺ワ紙鍓嶅彴澶у鑸級 */
html .nav-link-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #64748b;
white-space: nowrap;
}
html .nav-link-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  transform: translateY(-1px);
}
html .nav-link-item:active {
  transform: scale(0.96);
}
html .nav-link-item.active {
  color: #4f46e5;
}
html .nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #6366f1;
  animation: navLinkActiveIn 0.35s ease;
}
html.dark .nav-link-item { color: #cbd5e1 !important; }
html.dark .nav-link-item:hover { background: rgba(99,102,241,0.15); color: #a5b4fc !important; }
html.dark .nav-link-item.active { color: #a5b4fc !important; }
html.dark .nav-link-item.active::after { background: #a5b4fc !important; }

@keyframes navLinkActiveIn {
  from { width: 0; opacity: 0; }
  to { width: 20px; opacity: 1; }
}

/* 绮樻€у鑸悳绱㈡寜閽?*/
html .nav-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
white-space: nowrap;
  border: none;
  cursor: pointer;
}
html .nav-search-btn:hover {
  background: #6366f1;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
html .nav-search-btn:active {
  transform: scale(0.96);
}
html .nav-search-btn.active {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  font-weight: 700;
}
html.dark .nav-search-btn { background: rgba(99,102,241,0.05); color: #cbd5e1 !important; }
html.dark .nav-search-btn:hover { background: #6366f1; color: #fff !important; }
html.dark .nav-search-btn.active { background: rgba(99,102,241,0.18); color: #a5b4fc !important; }

/* 瀵艰埅閾炬帴涔嬮棿鐨勫垎闅旂 */
html .nav-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.3);
  flex-shrink: 0;
}
html.dark .nav-sep { background: rgba(255,255,255,0.1) !important; }

/* 鍚庡彴瀵艰埅椤?*/
html .admin-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: #64748b;
white-space: nowrap;
  letter-spacing: 0.02em;
}
html .admin-nav-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  transform: translateY(-1px);
}
html .admin-nav-item:active {
  transform: scale(0.95);
}
html .admin-nav-item.active {
  color: #4f46e5;
}
html .admin-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: #6366f1;
  animation: adminNavActiveIn 0.25s ease;
}
html.dark .admin-nav-item { color: #cbd5e1 !important; }
html.dark .admin-nav-item:hover { background: rgba(99,102,241,0.15); color: #a5b4fc !important; }
html.dark .admin-nav-item.active { color: #a5b4fc !important; }
html.dark .admin-nav-item.active::after { background: #a5b4fc !important; }

@keyframes adminNavActiveIn {
  from { width: 0; opacity: 0; }
  to { width: 12px; opacity: 1; }
}

/* Editor dark mode overrides */
.dark .bg-\[#1e1e1e\] { background: #1e1e1e !important; }
.dark .bg-\[#252526\] { background: #252526 !important; }
.dark .text-\[#d4d4d4\] { color: #d4d4d4 !important; }
.dark .text-\[#858585\] { color: #858585 !important; }
.dark .text-\[#3b3b3b\] { color: #d4d4d4 !important; }
.dark .text-\[#237893\] { color: #569cd6 !important; }
.dark .hover\:bg-\[#3c3c3c\]:hover { background: #3c3c3c !important; }
.dark .border-\[#e1e4e8\] { border-color: #333 !important; }
.dark .border-\[#333\] { border-color: #333 !important; }
.dark select,
.dark select option {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.dark select option:hover,
.dark select option:checked {
  background: #4f46e5 !important;
  color: #ffffff !important;
}

.dark .active\:bg-\[#4c4c4c\]:active { background: #4c4c4c !important; }

.dark .hover\:bg-indigo-400\/15:hover { background: rgba(129,140,248,0.15) !important; }
.dark .active\:bg-indigo-400\/25:active { background: rgba(129,140,248,0.25) !important; }

/* Badge 徽章样式（分类标签） */
.badge-indigo { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(99,102,241,0.12); color: #4f46e5; border: 1px solid rgba(99,102,241,0.2); }
.dark .badge-indigo { background: rgba(99,102,241,0.2) !important; color: #a5b4fc !important; }
.badge-purple { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(168,85,247,0.12); color: #7c3aed; border: 1px solid rgba(168,85,247,0.2); }
.dark .badge-purple { background: rgba(168,85,247,0.2) !important; color: #c084fc !important; }
.badge-emerald { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.2); }
.dark .badge-emerald { background: rgba(16,185,129,0.2) !important; color: #34d399 !important; }
.badge-amber { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.2); }
.dark .badge-amber { background: rgba(245,158,11,0.2) !important; color: #fbbf24 !important; }
.badge-sky { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(14,165,233,0.1); color: #0284c7; border: 1px solid rgba(14,165,233,0.2); }
.dark .badge-sky { background: rgba(14,165,233,0.2) !important; color: #38bdf8 !important; }
.badge-rose { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(225,29,72,0.1); color: #e11d48; border: 1px solid rgba(225,29,72,0.2); }
.dark .badge-rose { background: rgba(225,29,72,0.2) !important; color: #fb7185 !important; }

/* Missing bg-white/50 dark override */
.dark .bg-white\/50 { background: rgba(7,10,18,0.5) !important; }
/* Ensure tag dark text works */

/* Dashboard stat cards dark mode */
.dark .bg-indigo-400\/15 { background: rgba(129,140,248,0.15) !important; }
.dark .bg-purple-400\/15 { background: rgba(192,132,252,0.15) !important; }
.dark .bg-amber-400\/15 { background: rgba(251,191,36,0.15) !important; }
.dark .bg-sky-400\/15 { background: rgba(56,189,248,0.15) !important; }
.dark .group:hover .dark\:group-hover\:bg-indigo-400\/25 { background: rgba(129,140,248,0.25) !important; }
.dark .group:hover .dark\:group-hover\:bg-purple-400\/25 { background: rgba(192,132,252,0.25) !important; }
.dark .group:hover .dark\:group-hover\:bg-amber-400\/25 { background: rgba(251,191,36,0.25) !important; }
.dark .group:hover .dark\:group-hover\:bg-sky-400\/25 { background: rgba(56,189,248,0.25) !important; }

/* Stat card icon containers */
.dark .bg-indigo-500\/15 { background: rgba(99,102,241,0.12) !important; }
.dark .bg-purple-500\/15 { background: rgba(168,85,247,0.12) !important; }
.dark .bg-amber-500\/15 { background: rgba(245,158,11,0.12) !important; }
.dark .bg-sky-500\/15 { background: rgba(14,165,233,0.12) !important; }

/* Giscus 评论区 */
#comments-section {
  overflow: visible;
}
#giscus-container {
  width: 100%;
  min-height: 150px;
}
#giscus-container iframe {
  width: 100% !important;
  border: none;
}

/* ========== 移动端优化 ========== */
@media (max-width: 767px) {
  /* 编辑器分屏：移动端预览区给一个最小高度 */
  #editor-preview {
    min-height: 50vh;
  }
  #editor-textarea {
    min-height: 40vh;
  }
  /* 文章内容区缩小字号 */
  .prose-lg { font-size: 15px; line-height: 1.7; }
  .prose-lg h1 { font-size: 1.5em; }
  .prose-lg h2 { font-size: 1.25em; }
  /* 侧边栏头像缩小 */
  #sidebar-container .w-24{ width: 64px; height: 64px; }
  /* 评论区溢出保护 */
  #giscus-container { overflow-x: hidden; max-width: 100vw; }
  /* 编辑器元数据栏紧凑 */
  #editor-meta { padding: 8px 12px; }
  /* 移动端菜单动画 */
  #mobile-menu { transition: opacity 0.3s ease; }
  #mobile-menu > div { transition: transform 0.3s ease; }
  /* 页脚文字缩小 */
  footer p { font-size: 12px; }
}

/* 分类/标签编辑弹窗 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.modal-box {
  max-width: 380px; width: 90vw;
  padding: 28px !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  animation: scaleIn 0.25s ease;
}
.dark .modal-box {
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes scaleIn { from { transform: scale(0.92); opacity: 0 } to { transform: scale(1); opacity: 1 } }
/* 隐藏浏览器默认滚动条按钮 */
html { scroll-behavior: smooth; }
::-webkit-scrollbar-button { display: none !important; }

@media (max-width: 400px) {
  /* 极端窄屏进一步缩小 */
  .glass-panel { padding: 16px !important; }
  .topbar-item { padding: 4px 8px; font-size: 11px; }
  /* 按钮缩小 */
  .react-btn { padding: 6px 10px; font-size: 12px; }
}