/* Screenshots page styles (minimal, leveraging base.css) */
.page-hero {
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
  background: radial-gradient(1000px 500px at 10% 10%, rgba(0,212,255,.08), transparent 60%),
              radial-gradient(900px 500px at 90% 80%, rgba(123,47,247,.08), transparent 60%);
}
.page-hero .hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Gallery */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-btn.is-active { box-shadow: var(--shadow-glow-primary); border-color: var(--color-primary); color: var(--color-background); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }

.gallery-grid { margin-top: var(--space-6); }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-background-elevated); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: var(--transition-all); }
.gallery-item:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-xl), 0 0 18px var(--color-primary-glow); }
.gallery-figure { display: grid; }
.gallery-media { width: 100%; height: 220px; object-fit: cover; }
.gallery-caption { padding: var(--space-4); border-top: 1px solid var(--color-border); }
.gallery-title { margin: 0; font-size: var(--font-size-xl); margin-top: var(--space-2); }

/* Compare tool */
.compare-wrapper { margin-top: var(--space-6); }
.compare-inner { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-background-elevated); box-shadow: var(--shadow-md); }
.compare-before, .compare-after { display: block; width: 100%; height: 420px; object-fit: cover; }
.compare-after-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.compare-after { width: 100%; height: 100%; object-fit: cover; }
.compare-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); box-shadow: var(--shadow-glow-primary); pointer-events: none; }
.compare-range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; appearance: none; height: 44px; background: linear-gradient(90deg, rgba(0,212,255,0.12), rgba(123,47,247,0.12)); backdrop-filter: blur(4px); }
.compare-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-background); box-shadow: var(--shadow-glow-primary); }
.compare-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-background); box-shadow: var(--shadow-glow-primary); }
.compare-legend { display: flex; gap: var(--space-3); margin-top: var(--space-3); }

/* Showcase */
.showcase-grid .card img { border-radius: var(--radius-md); margin-bottom: var(--space-3); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } .gallery-media { height: 200px; } .compare-before, .compare-after { height: 280px; } }

/* Success inline messages (revealed by JS) */
.success-inline { margin-top: var(--space-3); color: var(--color-success); font-weight: var(--font-weight-semibold); }
.hidden { display: none !important; }