/* === Layout — Two-panel (sidebar + main) === */

.main {
  position: relative;
  margin-left: var(--sidebar-width);
  padding: var(--padding-desktop);
  min-height: 100vh;
  transition: margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-collapsed .main {
  margin-left: 100px;
}

/* Section base */
.section {
  padding: var(--gap-section) 0;
  width: 100%;
}

.main:not(.is-detail-view) .section {
  padding: var(--space-64) 0;
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

/* Section header */
.section__header {
  margin-bottom: 48px;
}

.section__label {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-top: 16px;
  max-width: 700px;
  line-height: var(--leading-relaxed);
}

/* Grid utilities */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}