/* ===== 🌌 Mercury Glassmorphism Design System ===== */
/* UI/UX Pro Max — Glassmorphism + Cosmic Theme       */
/* Zero image dependencies — all CSS/JS gradients      */

/* ─── 1. Design Tokens ─── */
:root {
  /* Font */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;

  /* Typography */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 2rem;     /* 32px */
  --text-4xl: 2.5rem;   /* 40px */
  --text-5xl: 3rem;     /* 48px */
  --text-6xl: 4rem;     /* 64px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Glassmorphism colors (light) */
  --primary: #2563EB;
  --primary-light: #DBEAFE;
  --primary-dark: #1D4ED8;
  --secondary: #3B82F6;
  --accent: #F97316;
  --accent-light: #FED7AA;

  --bg: rgba(248,250,252,0.65);
  --card-bg: rgba(255,255,255,0.72);
  --card-bg-hover: rgba(255,255,255,0.85);
  --text: #1E293B;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --border: rgba(226,232,240,0.5);
  --border-hover: rgba(148,163,184,0.5);

  --success: #22C55E;
  --error: #EF4444;
  --warning: #F59E0B;
  --info: #3B82F6;

  /* Glassmorphism effects */
  --glass-blur: 12px;
  --glass-border: 1px solid var(--border);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --glass-shadow-hover: 0 12px 40px rgba(0,0,0,0.12);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50%;

  /* Spacing (4pt/8dp) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Easing */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 999;
  --z-max: 9999;

  /* CSS-only image placeholders */
  --img-placeholder-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  --img-placeholder-error: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
  --img-placeholder-article: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
}

/* Dark mode */
[data-theme="dark"] {
  --primary: #818CF8;
  --primary-light: rgba(129,140,248,0.15);
  --primary-dark: #6366F1;
  --secondary: #93C5FD;
  --accent: #FB923C;
  --accent-light: rgba(251,146,60,0.15);

  --bg: rgba(15,23,42,0.65);
  --card-bg: rgba(30,41,59,0.72);
  --card-bg-hover: rgba(30,41,59,0.88);
  --text: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --border: rgba(51,65,85,0.5);
  --border-hover: rgba(71,85,105,0.5);

  --glass-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --glass-shadow-hover: 0 12px 40px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.25);

  --img-placeholder-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #A78BFA 100%);
  --img-placeholder-error: linear-gradient(135deg, #BE123C 0%, #E11D48 100%);
  --img-placeholder-article: linear-gradient(135deg, #3730A3 0%, #6D28D9 100%);
}

/* ─── 2. Reset ─── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* ─── 3. Base ─── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  touch-action: manipulation;
}

body {
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text);
  min-height: 100vh;
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 4. Glassmorphism Card ─── */
.glass {
  background: var(--card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass:hover {
  background: var(--card-bg-hover);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--border-hover);
}

/* ─── 5. Container ─── */
.container { max-width: 900px; margin: 0 auto; padding: var(--space-5); }
.container-wide { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
.container-narrow { max-width: 680px; margin: 0 auto; padding: var(--space-5); }

/* ─── 6. Focus (Accessibility) ─── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── 7. Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── 8. Keyframes ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; filter: blur(4px); }
  50% { opacity: 1; filter: blur(8px); }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ─── 9. Typography ─── */
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 700; color: var(--text); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { line-height: var(--leading-relaxed); }
a { color: var(--primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--primary-dark); }

/* ─── 10. Header ─── */
.header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.header h1 { font-size: var(--text-2xl); font-weight: 700; }
.header-center {
  text-align: center; padding: var(--space-10) 0 var(--space-8);
}
.header-center h1 { font-size: var(--text-4xl); margin-bottom: var(--space-2); }
.header-center p { color: var(--text-secondary); font-size: var(--text-lg); }
.header-sub {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

/* ─── 11. Link/Back ─── */
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--primary); text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}
.back-link:hover { text-decoration: underline; }

/* ─── 12. Tool Area ─── */
.tool-area {
  background: var(--card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--glass-shadow);
}

/* ─── 13. Buttons ─── */
.btn {
  padding: 12px 22px; min-height: 44px;
  border: none; border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-sm); font-weight: 500;
  transition: all var(--duration-fast) var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-1); text-decoration: none; line-height: 1;
  font-family: inherit;
}
.btn-primary {
  background: var(--primary); color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.btn-accent {
  background: var(--accent); color: #fff;
}
.btn-accent:hover {
  filter: brightness(1.1); transform: translateY(-1px);
}
.btn-sm { padding: 6px 14px; min-height: 36px; font-size: var(--text-xs); }
.btn-lg { padding: 14px 32px; min-height: 48px; font-size: var(--text-base); }
.btn:disabled, .btn[disabled] { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ─── 14. Form Elements ─── */
textarea, input[type="text"], input[type="number"], input[type="url"],
input[type="email"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="password"], select {
  width: 100%; padding: 12px 16px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--text-sm); background: var(--bg); color: var(--text);
  outline: none; font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
textarea:focus, input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.38; cursor: not-allowed; }

/* Date picker */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5); cursor: pointer; opacity: 0.6;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* Labels */
label {
  font-size: var(--text-sm); color: var(--text-secondary);
  margin-bottom: var(--space-1); display: block; font-weight: 500; cursor: pointer;
}

/* ─── 15. Layout Helpers ─── */
.row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.row > * { flex: 1; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.section { margin-bottom: var(--space-6); }
.section-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-1);
}

/* ─── 16. Output Area ─── */
.output-area {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4);
  min-height: 120px; font-size: var(--text-sm);
  line-height: var(--leading-normal); white-space: pre-wrap;
  word-break: break-word; font-family: inherit; margin-top: var(--space-2);
}
.output-area.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ─── 17. Toast ─── */
.toast {
  position: fixed; top: 20px; right: 20px;
  padding: 14px 24px; min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--success); color: #fff;
  font-size: var(--text-sm); font-weight: 500;
  z-index: var(--z-toast);
  animation: fadeInOut 3.5s var(--ease-out);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--space-2);
  pointer-events: auto; cursor: default;
}
.toast.error { background: var(--error); }
.toast.warning { background: var(--warning); }
.toast.info { background: var(--info); }

/* ─── 18. Theme Toggle ─── */
.theme-toggle {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: var(--glass-border);
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; z-index: var(--z-sticky);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--glass-shadow);
}
.theme-toggle:hover {
  border-color: var(--primary);
  box-shadow: var(--glass-shadow-hover);
}
.theme-toggle svg { width: 18px; height: 18px; }

/* ─── 19. Status Text ─── */
.text-error { color: var(--error); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-secondary); font-size: var(--text-sm); }

/* ─── 20. SVG Icon ─── */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 1em; height: 1em; fill: currentColor; }
.icon-sm svg { width: 16px; height: 16px; }
.icon-lg svg { width: 24px; height: 24px; }
.icon-xl svg { width: 32px; height: 32px; }

/* ─── 21. Footer ─── */
.footer {
  text-align: center; padding: var(--space-10) 0;
  color: var(--text-secondary); font-size: var(--text-xs);
}
.footer a { color: var(--primary); text-decoration: none; }

/* ─── 22. Checkbox / Radio ─── */
.check-group { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.check-item {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 8px 14px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-xs);
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--card-bg);
  backdrop-filter: blur(4px);
}
.check-item:hover { border-color: var(--primary); }
.check-item.active {
  background: var(--primary-light); border-color: var(--primary); color: var(--primary);
}

/* ─── 23. Input Group ─── */
.input-group { display: flex; gap: 0; margin-bottom: var(--space-3); }
.input-group input { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group .btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; white-space: nowrap; }

/* ─── 24. Preview Box ─── */
.preview-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4);
  margin-top: var(--space-3); text-align: center;
  min-height: 60px; display: flex; align-items: center; justify-content: center;
}

/* ─── 25. Range Slider ─── */
input[type="range"] {
  width: 100%; height: 6px; -webkit-appearance: none;
  background: var(--border); border-radius: 3px; outline: none; padding: 0; border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: var(--radius-full); background: var(--primary);
  cursor: pointer; border: 2px solid var(--card-bg); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
input[type="color"] {
  width: 40px; height: 40px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; background: var(--card-bg);
}

/* ─── 26. Code Block ─── */
.code-block {
  background: #1E1E2E; color: #CDD6F4;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-xs);
  line-height: var(--leading-normal); margin: var(--space-2) 0;
}

/* ─── 27. Skeleton Loading ─── */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ─── 28. Empty State ─── */
.empty-state {
  text-align: center; padding: var(--space-12) var(--space-4);
  color: var(--text-secondary);
}
.empty-state .icon-xl { margin-bottom: var(--space-4); opacity: 0.5; }
.empty-state p { font-size: var(--text-sm); }

/* ─── 29. Tab / Mode Button ─── */
.mode-btn {
  padding: 10px 18px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary);
  background: transparent; transition: all var(--duration-fast) var(--ease-out);
}
.mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── 30. Progress Bar ─── */
.progress { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin: var(--space-2) 0; }
.progress-fill { height: 100%; background: var(--primary); width: 0; transition: width 0.3s var(--ease-out); border-radius: 2px; }

/* ─── 31. Hint ─── */
.hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); margin-bottom: var(--space-2); }

/* ─── 32. ⭐ CSS-Only Image Placeholders ─── */
/* Replaces: 404.png, error-page.png, article_def.png, picture.png, friend_404.gif */

/* Default article cover placeholder */
.article-cover-placeholder {
  width: 100%; height: 200px;
  background: var(--img-placeholder-article);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.article-cover-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.article-cover-placeholder::after {
  content: '📝';
  font-size: 48px;
  opacity: 0.3;
}

/* Picture/avatar placeholder */
.picture-placeholder {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--img-placeholder-gradient);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.picture-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, transparent 50%);
}
.picture-placeholder::after {
  content: '👤';
  font-size: 20px;
  opacity: 0.35;
}

/* Error placeholder (for broken images) */
.error-placeholder {
  width: 100%; height: 200px;
  background: var(--img-placeholder-error);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2);
  position: relative; overflow: hidden;
  color: rgba(255,255,255,0.8);
  font-size: var(--text-sm);
}
.error-placeholder::before {
  content: '⚠️';
  font-size: 36px;
  margin-bottom: var(--space-1);
}
.error-placeholder p { color: rgba(255,255,255,0.7); font-size: var(--text-sm); }

/* Friend link broken image fallback */
.friend-link-fallback {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--img-placeholder-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

/* Img onerror handling — CSS-only fallback for broken images */
img[alt] {
  position: relative;
}
img:not([src]), img[src=""], img[src*="404"] {
  visibility: hidden;
}
img:not([src])::after, img[src=""]::after {
  content: attr(alt);
  visibility: visible;
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--img-placeholder-gradient);
  border-radius: inherit;
  color: #fff;
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-2);
}

/* ─── 33. ⭐ CSS-Only 404 Page ─── */
/* Replaces: 404.png, error-page.png */
.error-page {
  min-height: 70vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.error-page::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  opacity: 0.08;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-glow 4s ease-in-out infinite;
}
.error-page h1 {
  font-size: var(--text-6xl);
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}
.error-page .error-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}
.error-page .error-astronaut {
  position: relative;
  width: 120px; height: 120px;
  margin-bottom: var(--space-6);
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}
.error-page .error-astronaut svg {
  width: 100%; height: 100%;
}
.error-page .error-btn {
  display: inline-flex;
  align-items: center; gap: var(--space-2);
  padding: 14px 32px; min-height: 48px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  z-index: 1;
}
.error-page .error-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.3);
}

/* ─── 34. ⭐ CSS Stars Decoration ─── */
/* CSS-only starfield for non-canvas pages */
.css-stars {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.css-star {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--primary);
  border-radius: var(--radius-full);
  animation: twinkle 3s ease-in-out infinite;
}
.css-star:nth-child(odd) { animation-delay: 0.5s; }
.css-star:nth-child(3n) { animation-delay: 1s; width: 1px; }
.css-star:nth-child(5n) { animation-delay: 2s; width: 3px; height: 3px; }

/* ─── 35. Responsive ─── */
@media (max-width: 640px) {
  .container, .container-wide, .container-narrow { padding: var(--space-3); }
  .row { flex-direction: column; gap: var(--space-2); }
  .row-3 { grid-template-columns: 1fr; }
  .header-center h1 { font-size: var(--text-2xl); }
  .header-center p { font-size: var(--text-base); }
  .tool-area { padding: var(--space-4); }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; }
  .theme-toggle { top: 12px; right: 12px; width: 36px; height: 36px; }
  .error-page h1 { font-size: var(--text-5xl); }
  .error-page .error-astronaut { width: 80px; height: 80px; }
}
/* ===== 🌌 site-override.css — Butterfly → Glassmorphism Bridge ===== */
/* No image dependencies — uses CSS gradients + backdrop-filter      */

/* ─── 1. Body: transparent ─── */
body {
  background: transparent !important;
}

/* ─── 2. 🌌 Pure CSS Space Background — No Images, No JS ─── */

/* Layer 0: Deep space gradient on <html> itself */
html {
  background: radial-gradient(ellipse at 50% 25%, #0f1729 0%, #070a1a 30%, #020412 55%, #000005 80%, #000000 100%) !important;
  min-height: 100%;
}

/* Layer 1: Stars via box-shadow trick (GPU-friendly, single element) */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    /* ── Bright stars (2px) ── */
    8vw   3vh  0 0 #fff,
    22vw  8vh  0 0 #fff,
    35vw  2vh  0 0 #fff,
    62vw  5vh  0 0 #fff,
    78vw  4vh  0 0 #fff,
    91vw  7vh  0 0 #fff,
    15vw  15vh 0 0 #fff,
    45vw  12vh 0 0 #fff,
    72vw  18vh 0 0 #fff,
    55vw  22vh 0 0 #fff,
    5vw   25vh 0 0 #fff,
    85vw  28vh 0 0 #fff,
    /* ── Medium stars (1px) ── */
    12vw  6vh  0 0 rgba(255,255,255,0.7),
    28vw  14vh 0 0 rgba(255,255,255,0.6),
    42vw  4vh  0 0 rgba(255,255,255,0.7),
    68vw  10vh 0 0 rgba(255,255,255,0.6),
    75vw  22vh 0 0 rgba(255,255,255,0.7),
    88vw  16vh 0 0 rgba(255,255,255,0.6),
    3vw   20vh 0 0 rgba(255,255,255,0.5),
    18vw  28vh 0 0 rgba(255,255,255,0.6),
    32vw  18vh 0 0 rgba(255,255,255,0.5),
    50vw  8vh  0 0 rgba(255,255,255,0.5),
    60vw  30vh 0 0 rgba(255,255,255,0.6),
    95vw  12vh 0 0 rgba(255,255,255,0.6),
    /* ── Dim stars (0.5px, more numerous) ── */
    5vw   10vh 0 0 rgba(200,210,255,0.35),
    10vw  18vh 0 0 rgba(200,210,255,0.3),
    25vw  22vh 0 0 rgba(200,210,255,0.35),
    30vw  6vh  0 0 rgba(200,210,255,0.3),
    38vw  10vh 0 0 rgba(200,210,255,0.35),
    48vw  15vh 0 0 rgba(200,210,255,0.3),
    52vw  3vh  0 0 rgba(200,210,255,0.35),
    58vw  20vh 0 0 rgba(200,210,255,0.3),
    65vw  13vh 0 0 rgba(200,210,255,0.35),
    70vw  7vh  0 0 rgba(200,210,255,0.3),
    80vw  10vh 0 0 rgba(200,210,255,0.35),
    82vw  24vh 0 0 rgba(200,210,255,0.3),
    90vw  22vh 0 0 rgba(200,210,255,0.35),
    96vw  17vh 0 0 rgba(200,210,255,0.3);
}

/* Layer 2: Earth arc */
body::after {
  content: '';
  position: fixed;
  left: 50%; bottom: 0;
  width: 200%; height: 55%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  border-radius: 45% 45% 0 0;
  background:
    /* Earth surface — dark with subtle structure */
    radial-gradient(ellipse at 50% 100%, #0b1a2e 0%, #060f1f 40%, #030814 70%, transparent 100%),
    /* Subtle surface suggestion (terrain-like blobs) */
    radial-gradient(ellipse at 35% 70%, rgba(15,35,55,0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 75%, rgba(8,25,45,0.3) 0%, transparent 35%),
    radial-gradient(ellipse at 45% 55%, rgba(12,30,50,0.2) 0%, transparent 30%);
  box-shadow:
    /* Outer atmosphere (wide, soft cyan) */
    0 0 80px 30px rgba(56, 189, 248, 0.08),
    0 0 160px 60px rgba(56, 189, 248, 0.04),
    /* Inner atmosphere (tighter, brighter blue) */
    0 0 30px 8px rgba(96, 165, 250, 0.12),
    /* Sun-facing rim light (warm glow, right side) */
    inset 200px -50px 120px 0 rgba(255, 200, 100, 0.10),
    /* Lower atmosphere shimmer (purple-pink edge) */
    0 -10px 60px 10px rgba(192, 132, 252, 0.04);
}

/* ─── Sun (star at horizon) — using box-shadow on another pseudo-layer ─── */
/* Added as a spotlight via a fixed radial glow */
#web_bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Sun starburst */
    radial-gradient(circle at 72% 43%, rgba(255,215,150,0.12) 0%, transparent 35%),
    radial-gradient(circle at 72% 43%, rgba(255,180,80,0.06) 0%, transparent 50%);
}

/* ─── 3. Glassmorphism Cards ─── */
/* All Butterfly content cards get frosted glass effect */
#recent-posts > .recent-post-item,
#aside-content .card-widget,
#page .category-lists,
#page .tag-cloud,
#post .post-block,
.layout > .recent-posts .pagination,
#archive,
#tag,
#category,
#post .prev-next,
#post .post-copyright,
#post .post-reward,
#post .relatedPosts,
#post .post-prevnext,
#post #post-comment .comment-head,
#post #post-comment .comment-wrap,
.post-expand .post-card,
#page .category-lists .category-list,
.random-post-item {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226,232,240,0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
  transition: all 0.25s cubic-bezier(0,0,0.2,1) !important;
}

/* Hover lift */
#recent-posts > .recent-post-item:hover,
#aside-content .card-widget:hover,
.post-expand .post-card:hover,
.random-post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
  border-color: rgba(148,163,184,0.5) !important;
}

/* Dark mode glass */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] #page .category-lists,
[data-theme="dark"] #page .tag-cloud,
[data-theme="dark"] #post .post-block,
[data-theme="dark"] .layout > .recent-posts .pagination,
[data-theme="dark"] #archive,
[data-theme="dark"] #tag,
[data-theme="dark"] #category,
[data-theme="dark"] #post .prev-next,
[data-theme="dark"] #post .post-copyright,
[data-theme="dark"] #post .post-reward,
[data-theme="dark"] #post .relatedPosts,
[data-theme="dark"] #post .post-prevnext,
[data-theme="dark"] #post #post-comment .comment-head,
[data-theme="dark"] #post #post-comment .comment-wrap,
[data-theme="dark"] .post-expand .post-card,
[data-theme="dark"] #page .category-lists .category-list,
[data-theme="dark"] .random-post-item {
  background: rgba(30,41,59,0.72) !important;
  border-color: rgba(51,65,85,0.5) !important;
}
[data-theme="dark"] #recent-posts > .recent-post-item:hover,
[data-theme="dark"] #aside-content .card-widget:hover,
[data-theme="dark"] .post-expand .post-card:hover,
[data-theme="dark"] .random-post-item:hover {
  border-color: rgba(71,85,105,0.5) !important;
}

/* ─── 4. Navigation ─── */
#nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
/* Override Butterfly's white background on not-top-img pages */
#page-header.not-top-img #nav {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] #nav,
[data-theme="dark"] #page-header.not-top-img #nav {
  background: transparent !important;
}
#nav a,
#nav .site-name,
#nav .menus_item a,
#nav .menus_item span,
#nav .menus_item_child li a {
  color: #E2E8F0 !important;
}

/* ─── 5. Page Header (cosmic style, no images) ─── */
#page-header {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}
#page-header #site-info {
  position: relative;
  z-index: 1;
}

/* ─── Large title with depth-of-field fade into Earth ─── */
#page-header #site-title {
  font-size: clamp(3.5rem, 10vw, 9rem) !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-top: -12vh;
  text-shadow: 0 0 40px rgba(129,140,248,0.3);
  background: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #F9A8D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Depth-of-field: only bottom 1/4 fades into Earth */
    -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 90%);
    mask-image: linear-gradient(to bottom, black 72%, transparent 90%);
  }

  /* ─── Subtitle hidden (merged into title scale) ─── */
#page-header #site-subtitle {
  display: none !important;
}

/* ─── 6. Post block adjustments ─── */
#post .post-block {
  padding: 24px;
}
#post .post-content p,
#post .post-content li {
  font-size: 16px;
  line-height: 1.75;
}
#post .post-content h1 { font-size: 2rem; }
#post .post-content h2 { font-size: 1.5rem; }
#post .post-content h3 { font-size: 1.25rem; }
#post .post-content h4 { font-size: 1.125rem; }

/* ─── 7. Code blocks ─── */
#post .post-content .highlight,
#post .post-content code {
  border-radius: 8px;
}

/* ─── 8. Footer ─── */
#footer {
  background: transparent !important;
}
#footer::before {
  background: transparent !important;
}
#footer-wrap {
  color: var(--text-secondary, #94A3B8);
}

/* ─── 9. Sidebar ─── */
#aside-content .aside-list-item {
  padding: 8px 12px;
}

/* ─── 10. Tags & Categories ─── */
#post .tag_share .post-meta__tags .tag-cloud-tag,
.category-lists .category-list-item a {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 4px 12px;
  transition: all 0.15s ease-out;
}
[data-theme="dark"] #post .tag_share .post-meta__tags .tag-cloud-tag,
[data-theme="dark"] .category-lists .category-list-item a {
  background: rgba(30,41,59,0.5) !important;
}

/* ─── 11. ⭐ Compact Pagination (no glass card wrapper) — merged ─── */
.layout > .recent-posts .pagination {
  margin-top: 24px;
  text-align: center;
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.layout > .recent-posts .pagination .page-number,
.layout > .recent-posts .pagination .extend,
.layout > .recent-posts .pagination .space {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #334155);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(148,163,184,0.3);
  transition: all 0.2s cubic-bezier(0,0,0.2,1);
  text-decoration: none;
  cursor: pointer;
}
.layout > .recent-posts .pagination .page-number:hover,
.layout > .recent-posts .pagination .extend:hover {
  background: var(--primary-light, rgba(129,140,248,0.3));
  color: var(--primary, #818CF8);
  border-color: var(--primary, #818CF8);
  transform: translateY(-1px);
}
.layout > .recent-posts .pagination .page-number.current {
  background: var(--primary, #2563EB) !important;
  color: #fff !important;
  border-color: var(--primary, #2563EB) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.layout > .recent-posts .pagination .space {
  background: none !important;
  border: none !important;
  width: auto;
  padding: 0 4px;
  color: var(--text-tertiary, #94A3B8);
}
[data-theme="dark"] .layout > .recent-posts .pagination .page-number,
[data-theme="dark"] .layout > .recent-posts .pagination .extend,
[data-theme="dark"] .layout > .recent-posts .pagination .space {
  color: #CBD5E1;
  background: rgba(30,41,59,0.5);
  border-color: rgba(51,65,85,0.3);
}
[data-theme="dark"] .layout > .recent-posts .pagination .page-number:hover,
[data-theme="dark"] .layout > .recent-posts .pagination .extend:hover {
  background: rgba(99,102,241,0.2);
  border-color: var(--primary, #9D7CD8);
  color: var(--primary, #9D7CD8);
}
[data-theme="dark"] .layout > .recent-posts .pagination .page-number.current {
  background: var(--primary, #818CF8) !important;
  border-color: var(--primary, #818CF8) !important;
}

/* ─── 12. Butterfly Error Images → CSS Replacements ─── */
/* Replace 404 page image with CSS illustration */
.type-404 .error-content .error-img img {
  display: none !important;
}
.type-404 .error-content .error-img {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #F97316 100%) !important;
  border-radius: 12px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.type-404 .error-content .error-img::before {
  content: '🌌 404';
  font-size: 48px;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
  letter-spacing: 8px;
  z-index: 1;
}
.type-404 .error-content .error-img::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  top: -50px; right: -50px;
  animation: pulse-glow 4s ease-in-out infinite;
}
[data-theme="dark"] .type-404 .error-content .error-img {
  background: linear-gradient(135deg, #3730A3 0%, #6D28D9 50%, #BE123C 100%) !important;
}

/* 404 page overall */
.type-404 .error-content {
  height: auto !important;
  min-height: 360px;
}
.type-404 .error-content .error-info .error_title {
  font-size: 7em;
  background: linear-gradient(135deg, var(--primary, #818CF8) 0%, var(--accent, #FB923C) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Replace friend link error image */
.error_img.flink {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* ─── 12. Focus States ─── */
#post a:focus-visible,
.page a:focus-visible,
#aside-content a:focus-visible {
  outline: 2px solid var(--primary, #818CF8);
  outline-offset: 2px;
}

/* ─── 13. Srollbar styling ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.5);
}

/* ─── 14. Selection ─── */
::selection {
  background: var(--primary-light, rgba(129,140,248,0.3));
  color: var(--text, #E2E8F0);
}

/* ─── Nav Dropdown ─── */
#nav .menus_items .sub-menus {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 10px !important;
  min-width: 260px;
  background: rgba(30,41,59,0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
}
#nav .menus_items .sub-menus .menus_item_child li a {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: #E2E8F0 !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}
#nav .menus_items .sub-menus .menus_item_child li a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
[data-theme="dark"] #nav .menus_items .sub-menus {
  background: rgba(15,23,42,0.95) !important;
  border-color: rgba(51,65,85,0.5) !important;
}

#nav .menus_items .sub-menus .menu-item {
  display: flex !important;
  align-items: center;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}
#nav .menus_items .sub-menus .menu-item:hover {
  background: var(--primary-light, rgba(129,140,248,0.15)) !important;
}
#nav .menus_items .sub-menus .menu-item a {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── 16. ⭐ Login Modal & Auth Theming (replace yellow → design system) ─── */
#site-login-modal .slm-box {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] #site-login-modal .slm-box {
  background: rgba(30,41,59,0.9) !important;
}
#site-login-modal .slm-box h3 {
  background: linear-gradient(135deg, #2563EB, #F97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
}
#site-login-modal .slm-tab.active {
  color: var(--primary, #2563EB) !important;
  border-bottom-color: var(--primary, #2563EB) !important;
}
#site-login-modal .slm-submit {
  background: var(--primary, #2563EB) !important;
  border-radius: 8px !important;
}
#site-login-modal .slm-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
#site-login-modal .slm-send-btn {
  border-color: var(--primary, #2563EB) !important;
  color: var(--primary, #2563EB) !important;
  border-radius: 8px !important;
}

/* Anime page theme colors (replace yellow) */
#anime-page .anime-nav,
.anime-header,
#anime-page .btn-primary,
#anime-page .anime-tag.active {
  background: var(--primary, #2563EB) !important;
}
#anime-page .btn-primary:hover {
  filter: brightness(1.1);
}
#anime-page a {
  color: var(--primary, #2563EB) !important;
}

/* ─── 17. Replaced images fallback ─── */
/* When img has src that fails, show CSS gradient */
img.error-img-fallback,
.friend-link-avatar img[src*="friend_404"] {
  display: none !important;
}
.friend-link-avatar:has(img[src*="friend_404"]) {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* ─── 18. 工具箱分类色彩标识 ─── */
.category[data-category="converter"] .cat-icon { color: #3b82f6 !important; }
.category[data-category="dev"] .cat-icon { color: #22c55e !important; }
.category[data-category="crypto"] .cat-icon { color: #a855f7 !important; }
.category[data-category="text"] .cat-icon { color: #ec4899 !important; }
.category[data-category="time"] .cat-icon { color: #f59e0b !important; }
.category[data-category="image"] .cat-icon { color: #06b6d4 !important; }
.category[data-category="ai"] .cat-icon { color: #e11d48 !important; }

.category .category-title {
  border-left: 3px solid var(--primary, #3b82f6);
  padding-left: 12px;
  transition: border-color 0.2s;
}
.category[data-category="converter"] .category-title { border-left-color: #3b82f6; }
.category[data-category="dev"] .category-title { border-left-color: #22c55e; }
.category[data-category="crypto"] .category-title { border-left-color: #a855f7; }
.category[data-category="text"] .category-title { border-left-color: #ec4899; }
.category[data-category="time"] .category-title { border-left-color: #f59e0b; }
.category[data-category="image"] .category-title { border-left-color: #06b6d4; }
.category[data-category="ai"] .category-title { border-left-color: #e11d48; }

/* 图标背景也按分类着色（覆盖 inline style） */
.category[data-category="converter"] .tool-icon { background: rgba(59,130,246,0.1) !important; color: #3b82f6 !important; }
.category[data-category="dev"] .tool-icon { background: rgba(34,197,94,0.1) !important; color: #22c55e !important; }
.category[data-category="crypto"] .tool-icon { background: rgba(168,85,247,0.1) !important; color: #a855f7 !important; }
.category[data-category="text"] .tool-icon { background: rgba(236,72,153,0.1) !important; color: #ec4899 !important; }
.category[data-category="time"] .tool-icon { background: rgba(245,158,11,0.1) !important; color: #f59e0b !important; }
.category[data-category="image"] .tool-icon { background: rgba(6,182,212,0.1) !important; color: #06b6d4 !important; }
.category[data-category="ai"] .tool-icon { background: rgba(225,29,72,0.1) !important; color: #e11d48 !important; }

/* ─── 19. Responsive ─── */
@media (max-width: 768px) {
  body { font-size: 15px; }
  #post .post-content p,
  #post .post-content li { font-size: 15px; }
  #post .post-block { padding: 16px; }
  .type-404 .error-content { min-height: 300px; flex-direction: column; }
  .type-404 .error-content .error-img { width: 100%; min-height: 160px; }
  .type-404 .error-content .error-info { width: 100%; }
}
/* ─── 20. ⭐ 首页侧边栏宽度修复 ─── */
.layout {
  display: flex;
  justify-content: center;
}
#aside-content {
  width: 320px !important;
  min-width: 320px !important;
}

/* ─── 21. 登录按钮 — 去金色，透明毛玻璃样式 ─── */
#nav .site-page.auth-login-btn,
#nav .login-btn {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  color: #E2E8F0 !important;
  white-space: nowrap !important;
}
#nav .site-page.auth-login-btn:hover,
#nav .login-btn:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* ─── 22. 封面色条 — 替换图片为窄色条 ─── */
#recent-posts .post_cover {
  width: 8px !important;
  min-width: 8px !important;
  border-radius: 12px 0 0 12px !important;
  overflow: hidden !important;
  position: relative !important;
}
#recent-posts .post_cover a,
#recent-posts .post_cover .post-bg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#recent-posts .post_cover img,
#recent-posts .post_cover .gd-dots {
  display: none !important;
}
#recent-posts .recent-post-item .recent-post-info {
  width: auto !important;
  flex: 1 !important;
}
/* 6色轮换 */
#recent-posts .recent-post-item .post_cover.right {
  border-radius: 0 12px 12px 0 !important;
}
#recent-posts .recent-post-item:nth-child(6n+1) .post_cover { background: #3b82f6 !important; }
#recent-posts .recent-post-item:nth-child(6n+2) .post_cover { background: #22c55e !important; }
#recent-posts .recent-post-item:nth-child(6n+3) .post_cover { background: #a855f7 !important; }
#recent-posts .recent-post-item:nth-child(6n+4) .post_cover { background: #ec4899 !important; }
#recent-posts .recent-post-item:nth-child(6n+5) .post_cover { background: #f59e0b !important; }
#recent-posts .recent-post-item:nth-child(6n+6) .post_cover { background: #06b6d4 !important; }
[data-theme="dark"] #recent-posts .recent-post-item .post_cover {
  opacity: 0.85;
}

/* ─── 23. 卡片灰色字体增强对比度 ─── */
#recent-posts .article-meta,
#recent-posts .article-meta a,
#recent-posts .article-meta time,
#recent-posts .post-meta-date,
#recent-posts .post-meta-date a,
#recent-posts .post-meta-date time,
.post-meta-cat, .post-meta-tag, .post-meta-divider,
.recent-post-item .article-meta > span,
.recent-post-item .article-meta > a {
  color: #475569 !important;
}
[data-theme="dark"] #recent-posts .article-meta,
[data-theme="dark"] #recent-posts .article-meta a,
[data-theme="dark"] #recent-posts .article-meta time,
[data-theme="dark"] #recent-posts .post-meta-date,
[data-theme="dark"] #recent-posts .post-meta-date a,
[data-theme="dark"] #recent-posts .post-meta-date time,
[data-theme="dark"] .post-meta-cat,
[data-theme="dark"] .post-meta-tag,
[data-theme="dark"] .post-meta-divider {
  color: #94A3B8 !important;
}

/* ─── 24. 卡片日历/万年历信息文字增强 ─── */
.calendar-detail .text,
.calendar-detail p,
.calendar-detail .calendar-info,
#page .calendar-page .calendar-content span,
#page .calendar-page .calendar-content p {
  color: #475569 !important;
}
[data-theme="dark"] .calendar-detail .text,
[data-theme="dark"] .calendar-detail p,
[data-theme="dark"] .calendar-detail .calendar-info,
[data-theme="dark"] #page .calendar-page .calendar-content span,
[data-theme="dark"] #page .calendar-page .calendar-content p {
  color: #94A3B8 !important;
}

/* ─── 25. ⭐ 导航页(工具箱)卡片 — 毛玻璃统一 ─── */
.category {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226,232,240,0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .category {
  background: rgba(30,41,59,0.72) !important;
  border-color: rgba(51,65,85,0.5) !important;
}
.tool-card {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226,232,240,0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
  transition: all 0.25s cubic-bezier(0,0,0.2,1) !important;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
}
[data-theme="dark"] .tool-card {
  background: rgba(30,41,59,0.72) !important;
  border-color: rgba(51,65,85,0.5) !important;
}

/* ─── 26. 社交图标 — 5个一排，不换行 ─── */
.card-info-social-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 4px !important;
}
.card-info-social-icons .social-icon {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
}

/* ─── 27. 登录按钮 — 导航栏最后方 ─── */
#nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#nav #blog-info {
  flex: 0 0 auto !important;
}
#nav #menus {
  display: flex !important;
  align-items: center !important;
}
#nav .menus_items {
  display: flex !important;
  align-items: center !important;
}
#nav .menus_items .menus_item {
  flex: 0 0 auto !important;
  list-style: none !important;
}
#nav #menus {
  flex: 1 !important;
}
#nav #site-auth-bar {
  margin-left: auto !important;
}
#nav #site-auth-bar a,
#nav #site-auth-bar .auth-login-btn {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  color: #E2E8F0 !important;
  white-space: nowrap !important;
}
#nav #site-auth-bar a:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* ─── 28. ⭐ 评论区表单 — 毛玻璃融合 ─── */
#cwd-comments > *,
#cwd-comments form,
#cwd-comments .comment-form {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#cwd-comments input,
#cwd-comments textarea,
#cwd-comments select {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(148,163,184,0.3) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: #1E293B !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}
#cwd-comments input:focus,
#cwd-comments textarea:focus {
  border-color: #818CF8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.15) !important;
  outline: none !important;
}
#cwd-comments button[type="submit"] {
  background: #818CF8 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
#cwd-comments button[type="submit"]:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] #cwd-comments input,
[data-theme="dark"] #cwd-comments textarea {
  background: rgba(30,41,59,0.5) !important;
  border-color: rgba(51,65,85,0.4) !important;
  color: #E2E8F0 !important;
}

/* ─── 29. ⭐ 移动端汉堡菜单 — 毛玻璃统一 ─── */
/* Override Butterfly's solid sidebar background with glassmorphism */
#sidebar-menus {
  background: rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-left: 1px solid rgba(226,232,240,0.5) !important;
  box-shadow: -8px 0 32px rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] #sidebar-menus {
  background: rgba(15,23,42,0.85) !important;
  border-left-color: rgba(51,65,85,0.4) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,0.25) !important;
}
/* Menu items container inside sidebar */
#sidebar-menus .menus_items {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(226,232,240,0.4) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}
[data-theme="dark"] #sidebar-menus .menus_items {
  background: rgba(30,41,59,0.45) !important;
  border-color: rgba(51,65,85,0.35) !important;
}
/* Sub-menu items inside mobile sidebar */
#sidebar-menus .menus_item_child {
  background: transparent !important;
}
#sidebar-menus .menus_item_child li a {
  color: #334155 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}
#sidebar-menus .menus_item_child li a:hover {
  background: rgba(129,140,248,0.15) !important;
  color: #818CF8 !important;
}
[data-theme="dark"] #sidebar-menus .menus_item_child li a {
  color: #CBD5E1 !important;
}
[data-theme="dark"] #sidebar-menus .menus_item_child li a:hover {
  background: rgba(129,140,248,0.15) !important;
  color: #A5B4FC !important;
}
/* Sidabar menu mask overlay — subtle dark glass rather than solid black */
#menu-mask {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
/* Site page links in sidebar */
#sidebar-menus .site-page {
  color: #334155 !important;
  transition: all 0.15s ease !important;
}
#sidebar-menus .site-page:hover {
  background: rgba(129,140,248,0.12) !important;
  color: #818CF8 !important;
  transform: translateX(3px) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #sidebar-menus .site-page {
  color: #CBD5E1 !important;
}
[data-theme="dark"] #sidebar-menus .site-page:hover {
  background: rgba(129,140,248,0.15) !important;
  color: #A5B4FC !important;
}

/* ================================================
   Hexo Butterfly 博客自定义样式
   文件: /source/css/custom.css
   规范: hexo_butterfly_work_cn.md

   注意: 组件样式已通过 post-build.js 合并到 bundle.css 中
   ================================================ */

/* ================================================
   Font Awesome 字体优化 — font-display: swap
   防止字体文件阻塞页面渲染
   覆盖 Font Awesome 默认的 font-display: block
   ================================================ */
@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
/* Legacy Font Awesome 5 compatibility */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-display: swap;
}
/* Legacy FontAwesome */
@font-face {
  font-family: "FontAwesome";
  font-display: swap;
}

/* ================================================
   全局响应式图片规范
   ================================================ */
img {
    max-width: 100%;
    height: auto;
}

iframe {
    width: 100%;
    max-width: 100%;
}

/* ================================================
   通用间距规范
   间距值: 4px / 8px / 12px / 16px / 20px / 24px / 32px
   ================================================ */

/* 页面容器 */
.page-container {
    width: min(100%, 1200px);
    margin: auto;
    padding: 16px;
    box-sizing: border-box;
}

/* ================================================
   通用动画规范
   ================================================ */
* {
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* 触控优化 - 消除 300ms 点击延迟 */
html {
    touch-action: manipulation;
}

/* ================================================
   移动端禁止复杂动画
   ================================================ */
@media screen and (max-width: 768px) {
    * {
        transition-duration: .15s;
    }

    /* 减少阴影复杂度 */
    .recent-post-item,
    #aside-content .card-widget {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ================================================
   移动端适配 — 覆盖 Butterfly 默认样式
   ================================================ */

/* 文章封面渐变条 — 移动端减矮 */
@media screen and (max-width: 768px) {
  /* 保持封面在左侧，不堆叠到标题上方 */
  .recent-post-item {
    flex-direction: row !important;
    height: auto !important;
    min-height: 80px;
  }
  .recent-post-item .post_cover {
    width: 80px !important;
    height: auto !important;
    min-height: 80px;
    flex-shrink: 0;
  }
  .recent-post-item .post_cover .post-bg {
    height: 100% !important;
    min-height: 80px;
  }
  /* 取消 right 封面在移动端的 order 重置 */
  .recent-post-item .post_cover.right {
    order: 1 !important;
  }
  /* 文章信息紧凑 */
  .recent-post-item > .recent-post-info {
    padding: 12px 16px !important;
    width: auto !important;
    flex: 1;
  }
  .recent-post-item > .recent-post-info .article-title {
    font-size: 1.15em !important;
  }
  .recent-post-item > .recent-post-info .content {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* 侧边栏卡片 — 移动端边距优化 */
@media screen and (max-width: 768px) {
  #aside-content {
    width: 100% !important;
    padding: 0 4px !important;
  }
  #aside-content .card-widget {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  #aside-content .card-info .avatar-img {
    width: 72px !important;
    height: 72px !important;
  }
  #aside-content .card-info .author-info-name {
    font-size: 1.2em !important;
  }
  #aside-content .card-info .author-info-description {
    font-size: 12px !important;
  }
  #aside-content .card-info-social-icons .social-icon {
    font-size: 1.2em !important;
    margin: 0 6px !important;
  }
  #aside-content .site-data {
    margin: 10px 0 0 !important;
  }
  #aside-content .site-data a {
    padding: 2px 0 !important;
  }
  #aside-content .site-data .headline {
    font-size: .85em !important;
  }
  #aside-content .site-data .length-num {
    font-size: 1.1em !important;
  }
  #aside-content .aside-list .aside-list-item {
    padding: 4px 0 !important;
  }
  #aside-content .aside-list .aside-list-item .title {
    font-size: 13px !important;
  }
  #aside-content .item-headline {
    font-size: 1em !important;
  }
  #aside-content .card-announcement .announcement_content {
    font-size: 13px !important;
  }
  /* 导航栏 auth bar 移动端紧凑 */
  #site-auth-bar {
    margin-left: 4px !important;
    padding: 0 2px !important;
  }
  #site-auth-bar .auth-login-btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
  }
  #site-auth-bar .auth-user-info {
    padding: 1px 5px 1px 3px !important;
    font-size: 11px !important;
  }
  #site-auth-bar .auth-user-info .auth-name {
    max-width: 50px !important;
    font-size: 11px !important;
  }
  /* 移动端强制隐藏导航菜单项，显示汉堡按钮 */
  #nav .menus_items {
    display: none !important;
  }
  #nav #toggle-menu {
    display: inline-block !important;
  }
}

/* 平板 — 侧边栏优化 */
@media screen and (min-width: 769px) and (max-width: 900px) {
  #aside-content {
    width: 100% !important;
    padding: 0 8px !important;
  }
  #aside-content .card-widget {
    padding: 18px 20px !important;
  }
}

/* 整体布局 — 移动端边距 */
@media screen and (max-width: 768px) {
  .layout {
    padding: 16px 6px !important;
  }
  #recent-posts .recent-post-item {
    margin-bottom: 12px !important;
  }
}

/* ================================================
   平板适配
   ================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .page-container {
        padding: 12px;
    }
}

/* 淡入淡出页面过渡 */
#loading-box {
  transition: opacity 0.5s ease;
}

#loading-box.loaded {
  opacity: 0;
  pointer-events: none;
}

#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  transition: opacity 0.5s ease !important;
  transform: none !important;
}

#loading-box.loaded .loading-left-bg,
#loading-box.loaded .loading-right-bg {
  opacity: 0;
}

/* Preloader 透明 */
:root {
  --preloader-bg: transparent !important;
}

#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  background-color: transparent !important;
}

#loading-box .spinner-box {
  display: none !important;
}

/* 强制覆盖 preloader 背景 */
.loading-bg,
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  background-color: transparent !important;
}

/* 强制覆盖 preloader 背景 */
.loading-bg,
#loading-box .loading-left-bg,
#loading-box .loading-right-bg,
#loading-box .spinner-box .configure-core {
  background-color: transparent !important;
}


/* 左下角音乐播放器 - 唱碟样式 */
.music-player {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.music-player:hover {
  transform: scale(1.1);
}

/* 唱碟容器 */
.disc-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

/* 唱碟内部纹理 */
.disc-container::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 2px,
    rgba(255, 255, 255, 0.05) 3px
  );
}

/* 中心圆点 */
.disc-container::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  box-shadow: 0 0 8px rgba(238, 90, 36, 0.5);
}

/* 唱针 */
.tonearm {
  position: absolute;
  top: -8px;
  right: -5px;
  width: 25px;
  height: 3px;
  background: linear-gradient(90deg, #888, #bbb);
  transform-origin: right center;
  transform: rotate(-30deg);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 1;
}

.tonearm::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #666;
}

.tonearm::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -1px;
  width: 5px;
  height: 5px;
  background: #999;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 播放状态 - 唱针移到唱片上 */
.music-player.playing .tonearm {
  transform: rotate(-5deg);
}

/* 唱碟旋转动画 */
@keyframes discRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-player.playing .disc-container {
  animation: discRotate 4s linear infinite;
  box-shadow: 0 4px 20px rgba(238, 90, 36, 0.3);
}

/* 音符容器 */
.music-notes {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 60px;
  pointer-events: none;
  overflow: visible;
}

/* 音符动画 */
.music-note {
  position: absolute;
  bottom: 0;
  left: 50%;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-50%);
  animation: noteFloat 2s ease-out infinite;
  color: #ff6b6b;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

.music-note:nth-child(1) {
  animation-delay: 0s;
  left: 30%;
}

.music-note:nth-child(2) {
  animation-delay: 0.5s;
  left: 70%;
  font-size: 12px;
}

.music-note:nth-child(3) {
  animation-delay: 1s;
  left: 50%;
  font-size: 16px;
}

@keyframes noteFloat {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.8) rotate(20deg);
  }
}

/* 暂停状态 - 音符停止 */
.music-player:not(.playing) .music-note {
  animation-play-state: paused;
  opacity: 0;
}

/* 播放/暂停图标 */
.play-icon,
.pause-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-icon {
  opacity: 1;
}

.music-player.playing .play-icon {
  opacity: 0;
}

.music-player.playing .pause-icon {
  opacity: 1;
}

.play-icon svg,
.pause-icon svg {
  width: 16px;
  height: 16px;
  fill: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* 响应式调整 */
@media (max-width: 768px) {
  .music-player {
    bottom: 15px;
    left: 15px;
  }
  
  .disc-container {
    width: 45px;
    height: 45px;
  }
  
  .disc-container::before {
    width: 35px;
    height: 35px;
  }
  
  .disc-container::after {
    width: 10px;
    height: 10px;
  }
}

/* 隐藏原始 APlayer */
#aplayer {
  display: none !important;
}

/* Site-wide auth bar — inside navbar */
#site-auth-bar{display:flex;align-items:center;padding:0 8px;white-space:nowrap;order:99}
#site-auth-bar .auth-login-btn{padding:4px 14px;background:rgba(37,99,235,.1);color:#2563EB;border:1px solid rgba(37,99,235,.2);border-radius:16px;cursor:pointer;font-size:13px;transition:all .2s;display:flex;align-items:center;gap:4px}
#site-auth-bar .auth-login-btn:hover{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.4)}
#site-auth-bar .auth-user-info{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;font-size:13px;color:#999}
#site-auth-bar .auth-user-info .auth-avatar-sm{width:22px;height:22px;border-radius:50%;background:#333;display:flex;align-items:center;justify-content:center;font-size:10px;color:#2563EB;overflow:hidden;flex-shrink:0}
#site-auth-bar .auth-user-info .auth-avatar-sm img{width:100%;height:100%;object-fit:cover}
#site-auth-bar .auth-user-info .auth-name{color:#2563EB;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-size:13px}
#site-auth-bar .auth-user-info .auth-name:hover{opacity:.8}
#site-auth-bar .auth-user-info .auth-logout{background:none;border:none;color:#666;cursor:pointer;font-size:11px;padding:2px 3px}
#site-auth-bar .auth-user-info .auth-logout:hover{color:#e94560}
/* Login modal */
#site-login-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:1002;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#site-login-modal.show{display:flex}
#site-login-modal .slm-box{background:#1a1a2e;border:1px solid #333;border-radius:16px;padding:32px;width:380px;max-width:90vw;text-align:center}
#site-login-modal .slm-box h3{color:#2563EB;margin:0 0 6px;font-size:18px}
#site-login-modal .slm-box .slm-sub{color:#888;font-size:13px;margin:0 0 20px;line-height:1.4}
#site-login-modal .slm-box .slm-error{color:#e94560;font-size:12px;margin-bottom:8px;min-height:16px}
/* Tabs */
#site-login-modal .slm-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid #333}
#site-login-modal .slm-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:#888;font-size:14px;padding:8px 0;cursor:pointer;transition:all .2s;font-family:inherit}
#site-login-modal .slm-tab:hover{color:#ddd}
#site-login-modal .slm-tab.active{color:#2563EB;border-bottom-color:#2563EB}
/* Form footer links */
#site-login-modal .slm-form-footer{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px}
#site-login-modal .slm-link{background:none;border:none;color:#888;font-size:12px;cursor:pointer;text-decoration:none}
#site-login-modal .slm-link:hover{color:#2563EB}
#site-login-modal .slm-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#555;font-size:12px}
#site-login-modal .slm-divider::before,#site-login-modal .slm-divider::after{content:'';flex:1;height:1px;background:#333}
/* OAuth buttons */
#site-login-modal .slm-oauth{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
#site-login-modal .slm-oauth-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border:1px solid #444;border-radius:10px;background:#222;color:#e0e0e0;font-size:14px;cursor:pointer;transition:all .2s}
#site-login-modal .slm-oauth-btn:hover{background:#333;border-color:#666}
#site-login-modal .slm-oauth-btn .slm-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
#site-login-modal .slm-oauth-btn.github{background:#24292e;border-color:#444}
#site-login-modal .slm-oauth-btn.github:hover{background:#333}
#site-login-modal .slm-oauth-btn.google{background:#fff;border-color:#ddd;color:#333}
#site-login-modal .slm-oauth-btn.google:hover{background:#f5f5f5}
/* Email/password form */
#site-login-modal .slm-email-form{display:flex;flex-direction:column;gap:10px}
#site-login-modal .slm-email-form input{width:100%;padding:10px 14px;background:#0f0f1a;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px;outline:none;box-sizing:border-box}
#site-login-modal .slm-email-form input:focus{border-color:#2563EB}
#site-login-modal .slm-email-form input::placeholder{color:#94a3b8}
#site-login-modal .slm-email-row{display:flex;gap:8px}
#site-login-modal .slm-email-row input{flex:1}
#site-login-modal .slm-email-row .slm-send-btn{width:100%;padding:10px 16px;background:#333;color:#2563EB;border:1px solid #444;border-radius:8px;cursor:pointer;font-size:13px;white-space:nowrap}
#site-login-modal .slm-email-row .slm-send-btn:hover{background:#444}
#site-login-modal .slm-email-row .slm-send-btn:disabled{opacity:.5;cursor:not-allowed}
#site-login-modal .slm-submit{width:100%;padding:10px;background:#2563EB;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
#site-login-modal .slm-submit:hover{background:#1D4ED8}
#site-login-modal .slm-submit:disabled{opacity:.5;cursor:not-allowed}
#site-login-modal .slm-cancel{background:none;border:none;color:#888;cursor:pointer;font-size:13px;margin-top:8px}
#site-login-modal .slm-cancel:hover{color:#2563EB}
@media(max-width:768px){
  #site-auth-bar{padding:0 4px}
  #site-auth-bar .auth-login-btn{padding:3px 10px;font-size:12px}
  #site-auth-bar .auth-user-info{padding:2px 8px 2px 5px;font-size:12px}
  #site-auth-bar .auth-user-info .auth-name{max-width:70px}
  #site-login-modal .slm-box{padding:24px 20px}
}
#user-center{max-width:640px;margin:0 auto;padding:80px 20px 40px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.uc-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;margin-bottom:16px}
.uc-card-title{margin:0 0 16px;font-size:16px;color:var(--primary,#3b82f6);display:flex;align-items:center;gap:8px}
.uc-card-title i{font-size:14px;color:inherit}
.uc-avatar-wrap{position:relative;width:80px;height:80px;margin-bottom:16px}
.uc-avatar{width:80px;height:80px;border-radius:50%;background:#333;overflow:hidden;display:block;border:2px solid rgba(255,255,255,.1);box-sizing:border-box}
.uc-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.uc-avatar-edit{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--primary,#3b82f6);color:#fff;border:2px solid #0f0f1a;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
.uc-name-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.uc-name{font-size:22px;font-weight:700;color:#fff}
.uc-edit-btn{background:none;border:none;color:#888;cursor:pointer;font-size:13px;padding:4px}
.uc-edit-btn:hover{color:var(--primary,#3b82f6)}
.uc-email{color:#888;font-size:14px;margin-bottom:4px}
.uc-meta{color:#666;font-size:13px}
.uc-account-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.uc-account-item:last-child{border-bottom:none}
.uc-account-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;color:#ccc}
.uc-account-info{flex:1}
.uc-account-name{display:block;font-size:14px;color:#ddd}
.uc-account-status{font-size:12px;color:#888}
.uc-account-status.linked{color:#4ecdc4}
.uc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.uc-danger-note{color:#666;font-size:12px;margin:0}
.uc-btn{padding:8px 20px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-family:inherit}
.uc-btn-primary{background:var(--primary,#3b82f6);color:#fff;font-weight:600}
.uc-btn-primary:hover{background:#2563eb;color:#fff}
.uc-btn-secondary{background:rgba(255,255,255,.1);color:#ccc;border:1px solid rgba(255,255,255,.15)}
.uc-btn-secondary:hover{background:rgba(255,255,255,.2)}
.uc-btn-danger{background:rgba(233,69,96,.15);color:#e94560;border:1px solid rgba(233,69,96,.3)}
.uc-btn-danger:hover{background:#e94560;color:#fff}
.uc-btn-sm{padding:5px 14px;font-size:12px}
.uc-login-prompt{text-align:center;padding:48px 24px}
.uc-login-prompt h3{color:var(--primary,#3b82f6);margin:0 0 8px}
.uc-login-prompt p{color:#888;margin:0 0 20px}
.uc-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:1002;align-items:center;justify-content:center}
.uc-modal.show{display:flex}
.uc-modal-box{background:#1a1a2e;border:1px solid #333;border-radius:12px;padding:24px;width:360px;max-width:90vw}
.uc-modal-box h3{margin:0 0 16px;color:var(--primary,#3b82f6);font-size:16px}
.uc-modal-box input{width:100%;padding:10px 14px;background:#0f0f1a;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px;outline:none;box-sizing:border-box}
.uc-modal-box input:focus{border-color:var(--primary,#3b82f6)}
.uc-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.uc-pwd-error{color:#e94560;font-size:12px;margin-top:8px;min-height:16px}
/* Comment info section */
.uc-comment-info{display:flex;flex-direction:column;gap:0}
.uc-comment-field{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.uc-comment-field:last-child{border-bottom:none}
.uc-comment-label{font-size:13px;color:#888;min-width:48px;flex-shrink:0}
.uc-comment-value{font-size:14px;color:#e0e0e0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-comment-edit{flex-shrink:0;background:none;border:none;color:#888;cursor:pointer;font-size:12px;padding:4px}
.uc-comment-edit:hover{color:var(--primary,#3b82f6)}
[data-theme="dark"] .uc-comment-value{color:#e0e0e0}
[data-theme="light"] .uc-comment-value{color:#333}
[data-theme="light"] .uc-comment-label{color:#999}
[data-theme="light"] .uc-comment-field{border-bottom-color:rgba(0,0,0,.08)}
.uc-loading{text-align:center;padding:120px 20px;color:#888;font-size:16px}
.uc-loading i{margin-right:8px}
@media(max-width:768px){#user-center{padding:70px 16px 30px}.uc-card{padding:18px}
.uc-history-item img{width:55px;height:75px}
.uc-history-item{gap:10px;padding:10px 0}
.uc-history-title{font-size:13px}
.uc-history-ep,.uc-history-time{font-size:11px}
}
/* History list */
.uc-hint{color:#888;font-size:13px;text-align:center;padding:16px 0}
.uc-history-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .2s}
.uc-history-item:last-child{border-bottom:none}
.uc-history-item:hover{background:rgba(255,255,255,.03)}
.uc-history-item img{width:70px;height:95px;object-fit:cover;border-radius:6px;flex-shrink:0}
.uc-history-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.uc-history-title{font-size:14px;color:#e0e0e0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-history-ep{font-size:12px;color:#aaa;margin-top:2px}
.uc-history-time{font-size:11px;color:#666;margin-top:2px}
.uc-history-progress{display:flex;align-items:center;gap:8px;margin-top:6px}
.uc-history-progress .uc-pbar{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.uc-history-progress .uc-pfill{height:100%;background:var(--primary,#3b82f6);border-radius:2px}
.uc-history-progress .uc-ppct{font-size:11px;color:var(--primary,#3b82f6);min-width:32px;text-align:right}
.uc-history-more{text-align:center;padding:12px 0}
.uc-history-more a{color:var(--primary,#3b82f6);font-size:13px;text-decoration:none}
.uc-history-more a:hover{text-decoration:underline}
[data-theme="dark"] .uc-history-title{color:#e0e0e0}
[data-theme="dark"] .uc-history-ep{color:#aaa}
/* Light mode */
.uc-name{color:#333}
.uc-account-name{color:#333}
.uc-account-icon{color:#666}
.uc-btn-secondary{color:#555;border-color:rgba(0,0,0,.15);background:rgba(0,0,0,.05)}
.uc-btn-secondary:hover{background:rgba(0,0,0,.1)}
.uc-email{color:#666}
.uc-edit-btn{color:#999}
.uc-card{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.uc-card-title{color:var(--primary,#3b82f6)}
[data-theme="dark"] .uc-name{color:#fff}
[data-theme="dark"] .uc-account-name{color:#ddd}
[data-theme="dark"] .uc-account-icon{color:#ccc}
[data-theme="dark"] .uc-btn-secondary{color:#ccc;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.1)}
[data-theme="dark"] .uc-btn-secondary:hover{background:rgba(255,255,255,.2)}
[data-theme="dark"] .uc-email{color:#888}
[data-theme="dark"] .uc-edit-btn{color:#888}
[data-theme="dark"] .uc-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .uc-card-title{color:var(--primary,#3b82f6)}