:root {
  --portfolio-bg: #101214;
  --portfolio-surface: #181c20;
  --portfolio-panel: #20262b;
  --portfolio-line: #343b42;
  --portfolio-text: #f5f3ef;
  --portfolio-muted: #aeb6bd;
  --portfolio-accent: #e1b866;
  --portfolio-accent-2: #3fb7a3;
  --portfolio-danger: #f19a8a;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--portfolio-bg);
  color: var(--portfolio-text);
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.portfolio-navbar {
  background: rgba(16, 18, 20, 0.96);
  border-bottom: 1px solid var(--portfolio-line);
}

.portfolio-navbar .navbar-brand,
.portfolio-navbar .nav-link {
  color: var(--portfolio-text);
}

.portfolio-navbar .nav-link {
  color: var(--portfolio-muted);
}

.portfolio-navbar .nav-link:hover {
  color: var(--portfolio-text);
}

.navbar-toggler {
  border-color: var(--portfolio-line);
}

.navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--portfolio-panel);
  --bs-dropdown-border-color: var(--portfolio-line);
  --bs-dropdown-link-color: var(--portfolio-text);
  --bs-dropdown-link-hover-bg: #2b3339;
  --bs-dropdown-link-hover-color: var(--portfolio-text);
}

.portfolio-hero {
  border-bottom: 1px solid var(--portfolio-line);
}

.hero-banner {
  align-items: center;
  aspect-ratio: 16 / 7;
  background: var(--portfolio-panel);
  border: 1px solid var(--portfolio-line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.hero-banner-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-placeholder {
  color: var(--portfolio-muted);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 2rem;
  text-align: center;
}

.hero-copy {
  max-width: 38rem;
}

.hero-copy h1,
.gallery-heading {
  color: var(--portfolio-text);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
  overflow-wrap: anywhere;
}

.hero-copy p,
.gallery-description {
  color: var(--portfolio-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 1rem 0 0;
}

.section-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0;
}

.gallery-card {
  background: var(--portfolio-surface);
  border: 1px solid var(--portfolio-line);
  border-radius: 8px;
  color: var(--portfolio-text);
  display: block;
  height: 100%;
  overflow: hidden;
}

.gallery-card:hover {
  border-color: var(--portfolio-accent-2);
  color: var(--portfolio-text);
}

.gallery-cover {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--portfolio-panel);
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.gallery-cover-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.empty-cover {
  color: var(--portfolio-muted);
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 1rem;
  text-align: center;
}

.gallery-card-body {
  display: block;
  padding: 0.9rem;
}

.gallery-card-title {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gallery-card-action {
  color: var(--portfolio-muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 0.45rem;
}

.empty-state,
.admin-state {
  background: var(--portfolio-surface);
  border: 1px solid var(--portfolio-line);
  border-radius: 8px;
  color: var(--portfolio-muted);
  margin: 0;
  padding: 1.2rem;
}

.gallery-page-header {
  border-bottom: 1px solid var(--portfolio-line);
}

.back-link,
.image-caption a {
  color: var(--portfolio-accent);
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover,
.image-caption a:hover {
  color: var(--portfolio-accent-2);
}

.gallery-masonry {
  column-gap: 1.1rem;
  columns: 1;
}

.gallery-masonry-item {
  break-inside: avoid;
  margin: 0 0 1.1rem;
}

.image-tile {
  background: var(--portfolio-surface);
  border: 1px solid var(--portfolio-line);
  border-radius: 8px;
  overflow: hidden;
}

.gallery-image {
  height: auto;
  width: 100%;
}

.image-caption {
  border-top: 1px solid var(--portfolio-line);
  padding: 0.7rem 0.85rem;
}

.admin-card,
.admin-panel,
.admin-image-tile,
.admin-gallery-row {
  background: var(--portfolio-surface);
  border: 1px solid var(--portfolio-line);
  border-radius: 8px;
}

.admin-card,
.admin-panel {
  padding: 1.2rem;
}

.admin-toolbar {
  border-bottom: 1px solid var(--portfolio-line);
  gap: 1rem;
}

.admin-nav {
  border-bottom: 1px solid var(--portfolio-line);
}

.form-control,
.form-select {
  background-color: #11161a;
  border-color: var(--portfolio-line);
  color: var(--portfolio-text);
}

.form-control:focus,
.form-select:focus {
  background-color: #11161a;
  border-color: var(--portfolio-accent-2);
  box-shadow: 0 0 0 0.2rem rgba(63, 183, 163, 0.18);
  color: var(--portfolio-text);
}

.form-control::file-selector-button {
  background-color: var(--portfolio-panel);
  color: var(--portfolio-text);
}

.form-label,
.form-check-label {
  color: var(--portfolio-text);
  font-weight: 700;
}

.text-muted-soft {
  color: var(--portfolio-muted);
}

.admin-gallery-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.admin-gallery-cover,
.admin-image-preview,
.admin-banner-preview {
  background: var(--portfolio-panel);
  border-radius: 6px;
  overflow: hidden;
}

.admin-gallery-cover {
  aspect-ratio: 1 / 1;
}

.admin-gallery-cover img,
.admin-image-preview img,
.admin-banner-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.admin-image-preview {
  aspect-ratio: 4 / 3;
}

.admin-banner-preview {
  aspect-ratio: 16 / 6;
}

.admin-image-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.admin-image-actions {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
}

.drop-zone {
  align-items: center;
  border: 1px dashed var(--portfolio-line);
  border-radius: 8px;
  color: var(--portfolio-muted);
  display: flex;
  justify-content: center;
  min-height: 92px;
  padding: 1rem;
  text-align: center;
}

.drop-zone.drag-over {
  border-color: var(--portfolio-accent-2);
  color: var(--portfolio-text);
}

.admin-message {
  color: var(--portfolio-danger);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

.cover-badge {
  border: 1px solid var(--portfolio-accent);
  border-radius: 6px;
  color: var(--portfolio-accent);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  text-align: center;
}

@media (min-width: 700px) {
  .gallery-masonry {
    columns: 2;
  }
}

@media (min-width: 1120px) {
  .gallery-masonry {
    columns: 3;
  }
}

@media (min-width: 1500px) {
  .gallery-masonry {
    columns: 4;
  }
}

@media (max-width: 760px) {
  .hero-copy h1,
  .gallery-heading {
    font-size: 2.2rem;
  }

  .hero-banner {
    aspect-ratio: 16 / 9;
  }

  .admin-gallery-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .admin-gallery-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .gallery-card-body {
    padding: 0.7rem;
  }

  .gallery-card-title {
    font-size: 0.9rem;
  }

  .admin-image-grid {
    grid-template-columns: 1fr;
  }
}