body {
  background: #f5f7fb;
  color: #374151;
}

.site-hero {
  background: linear-gradient(135deg, #1d4ed8, #1e293b);
  color: #fff;
  border-radius: 20px;
  padding: 48px;
  margin-bottom: 24px;
}

.site-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  padding: 24px;
  margin-bottom: 24px;
}

.site-nav {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
  margin-bottom: 24px;
}

.site-nav a {
  margin-right: 20px;
  color: #374151;
  font-weight: 600;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.preview-grid img {
  width: 100%;
  border-radius: 14px;
}

.plan-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 460px;
}

.auth-cover {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.9), rgba(15, 23, 42, 0.96));
  color: white;
  display: grid;
  place-items: center;
  padding: 48px;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fff;
}

@media (max-width: 992px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
}