/* GitHub 周趋势看板 - 共享样式 */
:root {
  --bg: #0d1117; --card: #161b22; --card-hover: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --accent: #58a6ff; --green: #3fb950; --orange: #d29922;
  --purple: #bc8cff; --pink: #f778ba; --red: #f85149; --cyan: #39d353;
  --yellow: #e3b341;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }

/* Layout */
.page-wrapper { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--card); border-right: 1px solid var(--border); padding: 20px 0; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; }
.main-content { margin-left: 240px; flex: 1; padding: 32px 40px; max-width: 1200px; }

/* Sidebar */
.sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.sidebar-header h2 { font-size: 16px; font-weight: 700; color: var(--accent); }
.sidebar-header p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sidebar-section { padding: 0 12px; margin-bottom: 16px; }
.sidebar-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 0 8px; margin-bottom: 8px; }
.sidebar-link { display: block; padding: 6px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 13px; transition: all 0.15s; }
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sidebar-link.active { background: rgba(88,166,255,0.12); color: var(--accent); font-weight: 600; }
.sidebar-link .week-label { font-size: 11px; color: var(--muted); }

/* Header */
.page-header { margin-bottom: 32px; }
.page-header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.page-header h1 span { background: linear-gradient(90deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.page-header .subtitle { color: var(--muted); font-size: 14px; }

/* Stats bar */
.stats-bar { display: flex; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 24px; min-width: 140px; }
.stat-card .num { font-size: 28px; font-weight: 700; }
.stat-card .num.green { color: var(--green); }
.stat-card .num.accent { color: var(--accent); }
.stat-card .num.orange { color: var(--orange); }
.stat-card .num.purple { color: var(--purple); }
.stat-card .label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Section */
.section { margin-bottom: 40px; }
.section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.section-header .icon { font-size: 22px; }
.section-header h2 { font-size: 18px; font-weight: 600; }
.section-header .badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.badge-core { background: rgba(88,166,255,0.15); color: var(--accent); }
.badge-rec { background: rgba(188,140,255,0.15); color: var(--purple); }

/* Project row - full width */
.project-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; transition: border-color 0.2s, transform 0.15s; }
.project-row:hover { border-color: var(--accent); transform: translateY(-1px); }

.project-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.project-info { flex: 1; }
.project-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.project-name a { color: var(--accent); text-decoration: none; }
.project-name a:hover { text-decoration: underline; }
.project-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.project-lang { font-size: 12px; color: var(--muted); background: rgba(255,255,255,0.06); padding: 2px 10px; border-radius: 10px; }
.project-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 10px; }
.tag-ai { background: rgba(88,166,255,0.15); color: var(--accent); }
.tag-skill { background: rgba(188,140,255,0.15); color: var(--purple); }
.tag-mcp { background: rgba(63,185,80,0.15); color: var(--green); }
.tag-tool { background: rgba(210,153,34,0.15); color: var(--orange); }
.tag-web { background: rgba(247,120,186,0.15); color: var(--pink); }
.tag-monitor { background: rgba(248,81,73,0.15); color: var(--red); }
.tag-auto { background: rgba(57,211,83,0.15); color: var(--cyan); }

.project-metrics { display: flex; gap: 20px; flex-shrink: 0; }
.metric { text-align: center; min-width: 80px; }
.metric .val { font-size: 20px; font-weight: 700; }
.metric .val.green { color: var(--green); }
.metric .val.accent { color: var(--accent); }
.metric .label { font-size: 11px; color: var(--muted); }

.project-desc { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 16px; }

.project-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analysis-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.analysis-box h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.analysis-box h4.pro { color: var(--green); }
.analysis-box h4.con { color: var(--orange); }
.analysis-box h4.match { color: var(--cyan); }
.analysis-box ul { list-style: none; padding: 0; }
.analysis-box li { font-size: 13px; color: var(--muted); line-height: 1.6; padding-left: 16px; position: relative; margin-bottom: 4px; }
.analysis-box li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; }
.analysis-box.pros li::before { background: var(--green); }
.analysis-box.cons li::before { background: var(--orange); }
.analysis-box.match li::before { background: var(--cyan); }

/* Footer */
.footer { text-align: center; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* Mobile */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 16px; }
  .project-top { flex-direction: column; }
  .project-metrics { width: 100%; justify-content: space-around; }
  .project-analysis { grid-template-columns: 1fr; }
  .stats-bar { gap: 12px; }
  .stat-card { min-width: 100px; padding: 12px 16px; }
  .stat-card .num { font-size: 22px; }
}