.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(20rem, 34rem);
  gap: clamp(var(--s-5), 5vw, var(--s-8));
  align-items: stretch;
  justify-content: center;
  min-height: min(46rem, calc(100vh - 2 * var(--s-7)));
  max-width: 72rem;
  margin-inline: auto;
}

.auth-wrap {
  display: grid;
}

.auth-card {
  padding: var(--s-7);
}

.auth-panel {
  display: grid;
  align-content: center;
}

.auth-aside {
  display: grid;
  align-content: space-between;
  gap: var(--s-6);
  padding: var(--s-8);
  border-radius: var(--r-2xl);
  background: var(--gradient-panel);
  border: 1px solid color-mix(in oklab, var(--border) 84%, white);
  box-shadow: var(--shadow-sm);
}

.auth-kicker,
.dashboard-kicker {
  margin: 0 0 var(--s-3);
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-xs);
  font-weight: 800;
}

.auth-title {
  margin: 0;
  color: var(--ink-950);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.auth-subtitle {
  margin: var(--s-3) 0 0;
  color: var(--ink-600);
  font-size: var(--t-lg);
}

.auth-footer {
  margin-top: var(--s-5);
  color: var(--ink-500);
  font-size: var(--t-sm);
}

.auth-points,
.dashboard-points {
  display: grid;
  gap: var(--s-3);
}

.auth-point {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, white 58%, transparent);
}

.auth-point strong {
  display: block;
  color: var(--ink-950);
}

.dashboard-hero,
.apartment-hero,
.settings-hero {
  position: relative;
  overflow: clip;
  padding: var(--s-7);
  margin-bottom: var(--s-6);
  border: 1px solid color-mix(in oklab, var(--border) 80%, white);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--primary-100) 62%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 94%, white), color-mix(in oklab, var(--surface-muted) 94%, white));
  box-shadow: var(--shadow-xs);
}

.dashboard-hero-grid,
.apartment-hero-grid,
.settings-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.95fr);
  gap: var(--s-5);
  align-items: start;
}

.hero-actions,
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: stretch;
}

.hero-metric {
  min-width: 9rem;
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, white 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 68%, white);
}

.hero-metric strong {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-950);
  font-size: var(--t-xl);
  font-weight: 800;
}

.tenant-focus-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.tenant-priority-card {
  padding: var(--s-5);
  border-radius: var(--r-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 84%, white);
  background: color-mix(in oklab, var(--surface) 95%, white);
}

.tenant-priority-card h3,
.section-heading {
  margin: 0 0 var(--s-2);
  color: var(--ink-950);
  font-size: var(--t-xl);
  font-weight: 800;
}

.settings-stack,
.apartment-stack {
  display: grid;
  gap: var(--s-4);
}

.view-landlord,
.view-tenant,
.view-apartment,
.view-settings {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.view-landlord > :last-child,
.view-tenant > :last-child,
.view-apartment > :last-child,
.view-settings > :last-child {
  margin-bottom: 0;
}

.reading-review-row,
.handover-row {
  padding: var(--s-4) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 74%, white);
}

.reading-review-row:last-child,
.handover-row:last-child {
  border-bottom: 0;
}

.reading-review-actions,
.handover-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tab-content > * + * {
  margin-top: var(--s-4);
}

.analytics-content {
  display: grid;
  gap: var(--s-4);
}

.analytics-chart-wrap {
  padding: var(--s-5);
  border-radius: var(--r-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 84%, white);
  background: color-mix(in oklab, var(--surface) 95%, white);
}

.analytics-chart-title {
  margin-bottom: var(--s-4);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--ink-950);
}

.view-auth {
  display: grid;
  align-items: center;
  min-height: calc(100vh - 2 * var(--s-7));
  padding: var(--s-7);
}

.view-landlord .apt-grid,
.view-tenant .card + .card {
  margin-top: var(--s-4);
}

@media (max-width: 1100px) {
  .dashboard-hero-grid,
  .apartment-hero-grid,
  .settings-hero-grid,
  .tenant-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    max-width: 34rem;
  }

  .auth-aside {
    order: -1;
    padding: var(--s-6);
  }
}

@media (max-width: 720px) {
  .view-auth,
  .auth-card,
  .dashboard-hero,
  .apartment-hero,
  .settings-hero {
    padding: var(--s-5);
  }

  .view-auth {
    min-height: auto;
  }

  .hero-metric {
    min-width: 0;
    flex: 1 1 10rem;
  }

  .hero-actions,
  .hero-metrics,
  .reading-review-actions,
  .handover-row-actions {
    flex-direction: column;
  }

  .hero-actions .btn,
  .reading-review-actions .btn,
  .handover-row-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .auth-card,
  .auth-aside,
  .dashboard-hero,
  .apartment-hero,
  .settings-hero,
  .tenant-priority-card {
    padding: var(--s-4);
  }

  .auth-title {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }

  .page-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .page-subtitle,
  .auth-subtitle {
    font-size: var(--t-base);
  }
}