.project-page {
  padding: 150px 8% 80px;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), var(--bg-deep) 55%);
  min-height: 100vh;
}

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.back-link:hover { text-decoration: underline; }

.project-detail {
  max-width: 950px;
  background: linear-gradient(145deg, var(--bg-deep), var(--bg-card));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-accent);
  margin-bottom: 40px;
}

.project-detail h1 { font-size: clamp(32px, 5vw, 44px); margin: 18px 0 20px; }
.project-detail h2 { color: var(--accent); margin: 35px 0 18px; }
.project-detail p, .project-detail li { color: var(--text-muted); line-height: 1.8; margin-bottom: 18px; }
.project-detail ul { list-style: none; }
.project-detail li { padding-left: 22px; position: relative; }
.project-detail li::before { content: ">"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.project-detail pre { margin-top: 1rem; background: #071426; border-radius: 12px; padding: 1.5rem; overflow: auto; border: 1px solid var(--border-soft); }
.project-detail code { color: #79e8ff; font-family: Consolas, monospace; }

.gallery { margin-top: 40px; }
.gallery h2 { color: var(--accent); margin-bottom: 22px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.gallery-item { background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; transition: 0.25s ease; }
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-accent); }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.gallery-caption { padding: 18px; color: var(--text-soft); font-size: 15px; line-height: 1.65; }
.gallery-caption h3 { color: var(--text-main); margin-bottom: 10px; }
.gallery-caption p { color: var(--text-muted); margin-bottom: 16px; }
.gallery-caption a { display: inline-block; color: var(--accent); font-weight: 800; text-decoration: none; }
.gallery-caption a:hover { text-decoration: underline; }
.project-actions { margin-top: 30px; }