/* ── Layout ──────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  margin-left: 340px;
  padding: 2rem 2.5rem 3rem;
  max-width: 1200px;
  transition: margin-left var(--transition);
}

.mainFull {
  margin-left: 0;
}

/* ── Error banner ───────────────────────────────────────────────────── */
.error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  margin: 1rem 0;
  font-size: 0.88rem;
  color: var(--error);
  animation: fadeIn 0.3s ease;
}

@media (max-width: 900px) {
  .main {
    margin-left: 0;
    padding: 1.2rem 1rem 2rem;
  }
}