/* ==========================================================================
   全局重置 & 字体
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-color: #f6f6f4;
  --text-main: #2b2b2b;
  --text-muted: #828282;
  --border-color: #e5e5e1;
  --border-strong: #2b2b2b;
  --hover-bg: #efefeb; 
  --accent-color: #637a66;
}

[data-theme="dark"] {
  --bg-color: #171717;
  --text-main: #d6d6d6;
  --text-muted: #7a7a7a;
  --border-color: #2e2e2e;
  --border-strong: #d6d6d6;
  --hover-bg: #222222;
  --accent-color: #84a388;
}

::selection { background-color: var(--accent-color); color: var(--bg-color); }

body { 
  font-family: 'Inter', -apple-system, sans-serif; 
  background-color: var(--bg-color); 
  color: var(--text-main); 
  line-height: 1.6; 
  font-size: 15px; 
  -webkit-font-smoothing: antialiased; 
  transition: background-color 0.3s ease, color 0.3s ease; 
  padding: 40px 20px; 
  overflow-y: scroll; 
}

.container { width: 100%; max-width: 900px; margin: 0 auto; padding: 0; }

/* ==========================================================================
   公共头部 (SYS HEADER) & 底部 (SYS FOOTER)
   ========================================================================== */
.sys-header { 
  display: flex; justify-content: space-between; align-items: center; 
  border-bottom: 2px solid var(--border-strong); padding-bottom: 16px; margin-bottom: 40px; 
}

.sys-title { 
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sys-title a { color: var(--text-main); text-decoration: none; transition: color 0.2s ease; }
.sys-title a:hover { color: var(--accent-color); }
.sys-title .path-separator { color: var(--border-color); font-weight: 400; }
.sys-title .current-path { color: var(--text-muted); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 24px; }

.theme-toggle { background: transparent; border: none; cursor: pointer; color: var(--text-main); display: flex; padding: 8px; transition: color 0.2s ease; }
.theme-toggle:hover { color: var(--accent-color); }
.theme-toggle svg { width: 18px; height: 18px; }
.sun-icon { display: none; }
.moon-icon { display: block; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }

.sys-footer { 
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); 
  text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;
  border-top: 2px solid var(--border-strong); padding-top: 16px; margin-top: 60px; 
}
.sys-footer a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.sys-footer a:hover { color: var(--accent-color); }

/* ==========================================================================
   作品集网格 (PORTFOLIO GRID)
   ========================================================================== */
.portfolio-grid { 
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  gap: 24px; margin-bottom: 40px; 
}

.portfolio-item { 
  display: flex; flex-direction: column; text-decoration: none; 
  border: 1px solid var(--border-color); background-color: var(--bg-color);
  transition: all 0.2s ease; 
}

.portfolio-item:hover { border-color: var(--accent-color); cursor: crosshair; transform: translateY(-2px); box-shadow: 4px 4px 0px 0px var(--border-color); }
[data-theme="dark"] .portfolio-item:hover { box-shadow: 4px 4px 0px 0px #000; }

.item-img-wrapper { 
  width: 100%; aspect-ratio: 4/4; overflow: hidden; 
  border-bottom: 1px solid var(--border-color); background-color: var(--hover-bg);
}

.item-img-wrapper img { 
  width: 100%; height: 100%; object-fit: cover; 
  filter: grayscale(100%) contrast(110%); 
  transition: all 0.3s ease; 
}

.portfolio-item:hover .item-img-wrapper img { filter: grayscale(0%) contrast(100%); }

.item-meta { 
  padding: 16px; display: flex; justify-content: space-between; align-items: center; 
}

.item-title { 
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; 
  color: var(--text-main); text-transform: uppercase; letter-spacing: 0.05em; 
  transition: color 0.2s ease;
}

.portfolio-item:hover .item-title { color: var(--accent-color); }
.item-ext { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); }

/* ==========================================================================
   项目详情页 (PROJECT DETAIL)
   ========================================================================== */
.project-wrapper { max-width: 800px; margin: 0 auto; }

.project-header { margin-bottom: 40px; border-bottom: 1px dashed var(--border-color); padding-bottom: 24px; }
.project-title { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--text-main); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.project-desc { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--text-muted); line-height: 1.8; }

.project-gallery { display: flex; flex-direction: column; gap: 32px; }
.project-gallery img { 
  width: 100%; height: auto; display: block; 
  border: 1px solid var(--border-color); 
  background-color: var(--hover-bg); 
}

/* ==========================================================================
   移动端响应式 (MOBILE)
   ========================================================================== */
@media (max-width: 650px) {
  body { padding: 24px 16px; }
  .sys-header { flex-direction: row; align-items: center; padding-bottom: 12px; gap: 16px; }
  .sys-title { font-size: 12px; }
  .header-actions { width: auto; justify-content: flex-end; }
  .sys-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-title { font-size: 20px; }
}