/* ===== 洛墨云上星港 · Butterfly 轻量美化 ===== */
/* 基于原版 Butterfly 风格，仅做温和增强 */

:root {
  --star-bg: #f7f8fc;
  --neon-blue: #2563eb;
  --neon-purple: #7c3aed;
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(99, 102, 241, 0.16);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --surface-soft: #f8fafc;
  --surface-tint: #eef2ff;
  --shadow-soft: 0 8px 30px rgba(71, 85, 105, 0.08);
  --hl-color: #334155;
  --hl-bg: #f8fafc;
  --hltools-bg: #eef2f7;
  --hltools-color: #475569;
  --hlnumber-bg: #f1f5f9;
  --hlnumber-color: #94a3b8;
  --card-radius: 12px;
  --transition-speed: 0.3s;
}

/* ---------- Background ---------- */
body {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 32%, #eef2ff 66%, #ffffff 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-primary);
}

/* ---------- Navigation ---------- */
#nav {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 22px rgba(71, 85, 105, 0.07) !important;
}

#nav .site-name,
#nav .site-page,
#nav #search-button,
#nav #toggle-menu {
  color: #334155 !important;
  text-shadow: none !important;
}

#nav a:hover {
  color: var(--neon-blue) !important;
}

/* ---------- Site Title ---------- */
#site-title,
.site-title {
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.35) !important;
}

#subtitle,
.subtitle {
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.25) !important;
}

/* ---------- Cards ---------- */
.recent-post-item,
.card-widget,
#aside-content .card-widget {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all var(--transition-speed) ease !important;
}

.recent-post-item:hover,
.card-widget:hover {
  border-color: rgba(168, 85, 247, 0.28) !important;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12) !important;
}

/* ---------- Post/Page ---------- */
#post #article-container {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 24px 32px !important;
  box-shadow: var(--shadow-soft) !important;
}

#article-container {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--text-primary) !important;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  color: #172033 !important;
}

/* ---------- Code Blocks ---------- */
#article-container :not(pre) > code {
  background: rgba(124, 58, 237, 0.09) !important;
  color: #6d28d9 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

#article-container pre {
  background: var(--surface-soft) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
}

/* ---------- Tables / Quotes / Notes ---------- */
#article-container table {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

#article-container table th {
  background: var(--surface-tint) !important;
  color: #312e81 !important;
}

#article-container table td {
  background: #ffffff !important;
  color: #334155 !important;
}

#article-container table tr:nth-child(even) td {
  background: var(--surface-soft) !important;
}

#article-container blockquote {
  background: var(--surface-soft) !important;
  border-left-color: var(--neon-purple) !important;
  color: #475569 !important;
}

#article-container .note,
#article-container .tabs,
#article-container .mermaid-wrap {
  color: var(--text-primary);
}

/* ---------- Buttons ---------- */
#post .post-button a.btn {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-speed) ease !important;
}

#post .post-button a.btn:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

/* ---------- Friend Link ---------- */
.flink-list a {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  transition: all var(--transition-speed) ease !important;
}

.flink-list a:hover {
  border-color: rgba(0, 212, 255, 0.28) !important;
}

/* ---------- Footer ---------- */
#footer {
  border-top: 1px solid var(--glass-border) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
}

#footer-wrap,
#footer-wrap a {
  color: #475569 !important;
  text-shadow: none !important;
}

/* ---------- Previous / Next Post ---------- */
#pagination.pagination-post {
  background: #ffffff !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

#pagination.pagination-post .cover {
  background: var(--surface-tint) !important;
  opacity: 1 !important;
}

#pagination.pagination-post .prev_info,
#pagination.pagination-post .next_info {
  color: #334155 !important;
}

#pagination.pagination-post .prev-post .label,
#pagination.pagination-post .next-post .label {
  color: var(--neon-purple) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-purple), var(--neon-blue)) !important;
  border-radius: 8px !important;
}

/* ---------- Footer ICP ---------- */
.footer-beian { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.footer-beian a { text-decoration: none; }
.beian-separator { opacity: 0.75; }

/* ---------- Project Archive ---------- */
.projects-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); padding: 5px 14px; border-radius: 16px; cursor: pointer; font-size: 0.88rem; transition: all var(--transition-speed) ease; }
.filter-btn:hover { border-color: rgba(168,85,247,0.35); color: var(--text-primary); }
.filter-btn.active { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.35); color: var(--neon-blue); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.project-card { background: var(--glass-bg); backdrop-filter: blur(8px); border: 1px solid var(--glass-border); border-radius: var(--card-radius); padding: 18px 20px; transition: all var(--transition-speed) ease; display: flex; flex-direction: column; gap: 8px; }
.project-card { box-shadow: var(--shadow-soft); }
.project-card:hover { border-color: rgba(168,85,247,0.28); box-shadow: 0 12px 30px rgba(99,102,241,0.12); }
.project-card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.project-name { font-size: 1.05rem; color: var(--neon-blue); margin: 0; }
.project-desc { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; margin: 0; }
.project-status { font-size: 0.8rem; font-weight: 500; padding: 2px 10px; border-radius: 10px; }
.status-online { color: #22c55e; background: rgba(34,197,94,0.1); }
.status-building { color: #eab308; background: rgba(234,179,8,0.1); }
.status-debug { color: #f97316; background: rgba(249,115,22,0.1); }
.project-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tech-tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.15); color: var(--neon-blue); }
.project-link { display: inline-block; margin-top: auto; color: rgba(168,85,247,0.8); text-decoration: none; font-size: 0.88rem; transition: all var(--transition-speed) ease; }
.project-link:hover { color: var(--neon-blue); }

/* ---------- Cloud Dashboard ---------- */
.cloud-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cloud-card { background: var(--glass-bg); backdrop-filter: blur(8px); border: 1px solid var(--glass-border); border-radius: var(--card-radius); padding: 16px 18px; transition: all var(--transition-speed) ease; display: flex; flex-direction: column; gap: 6px; }
.cloud-card { box-shadow: var(--shadow-soft); }
.cloud-card:hover { border-color: rgba(168,85,247,0.25); box-shadow: 0 12px 30px rgba(99,102,241,0.12); }
.cloud-card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.cloud-name { font-size: 1.02rem; color: var(--neon-blue); margin: 0; }
.cloud-desc { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.status-indicator { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 500; }
.status-indicator.status-online { color: #22c55e; }
.status-indicator.status-building { color: #eab308; }
.status-indicator.status-debug { color: #f97316; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-online .status-dot { background: #22c55e; }
.status-building .status-dot { background: #eab308; }
.status-debug .status-dot { background: #f97316; }
.cloud-url a { color: var(--text-secondary); font-size: 0.8rem; text-decoration: none; }
.cloud-url a:hover { color: var(--neon-blue); }
.check-time { color: var(--text-secondary); font-size: 0.75rem; opacity: 0.6; }

/* ---------- Build Log Timeline ---------- */
.timeline { position: relative; padding: 16px 0; margin: 0 auto; max-width: 680px; }
.timeline::before { content: ''; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: rgba(168,85,247,0.25); }
.timeline-item { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; }
.timeline-dot { position: absolute; left: 94px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: rgba(168,85,247,0.5); border: 2px solid transparent; z-index: 1; }
.timeline-date { width: 80px; text-align: right; flex-shrink: 0; color: var(--neon-blue); font-weight: 500; font-size: 0.88rem; padding-top: 2px; }
.timeline-content { flex: 1; background: var(--glass-bg); backdrop-filter: blur(8px); border: 1px solid var(--glass-border); border-radius: var(--card-radius); padding: 12px 16px; margin-left: 16px; transition: all var(--transition-speed) ease; }
.timeline-content { box-shadow: var(--shadow-soft); }
.timeline-content:hover { border-color: rgba(168,85,247,0.25); box-shadow: 0 10px 24px rgba(99,102,241,0.1); }
.timeline-content h3 { color: var(--neon-blue); font-size: 0.95rem; margin: 0 0 4px; border: none; }
.timeline-content p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; line-height: 1.55; }

/* ---------- Section Footer ---------- */
.luomo-section-footer { text-align: center; color: var(--text-secondary); padding: 32px 16px; font-style: italic; opacity: 0.7; }

/* ---------- Hero Area (Project/Cloud/Build Log pages) ---------- */
.luomo-hero { text-align: center; padding: 32px 16px 20px; }
.luomo-hero-title { font-size: 1.7rem; font-weight: 600; margin-bottom: 6px; }
.luomo-hero-sub { color: var(--text-secondary); font-size: 0.95rem; }

/* ---------- Home Entry Cards ---------- */
.luomo-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.luomo-entry-card { display: block; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 24px 18px; text-align: center; text-decoration: none; box-shadow: var(--shadow-soft); transition: all var(--transition-speed) ease; }
.luomo-entry-card:hover { transform: translateY(-6px); border-color: rgba(37,99,235,0.32); box-shadow: 0 12px 30px rgba(99,102,241,0.13); }
.luomo-entry-icon { font-size: 2.4rem; margin-bottom: 8px; }
.luomo-entry-title { color: var(--neon-blue); font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.luomo-entry-desc { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .recent-post-item:hover { transform: none !important; }
  .luomo-entry-card:hover { transform: none; }
  #post #article-container { padding: 16px 18px !important; }
  #article-container { font-size: 15px !important; }
  #article-container table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #article-container table th,
  #article-container table td { min-width: 120px; }
  .projects-grid { grid-template-columns: 1fr; }
  .cloud-dashboard { grid-template-columns: 1fr; }
  .timeline::before { left: 16px; }
  .timeline-dot { left: 10px; }
  .timeline-date { width: auto; text-align: left; font-size: 0.8rem; padding-left: 32px; }
  .timeline-item { flex-direction: column; gap: 4px; }
  .timeline-content { margin-left: 0; }
}