.app {
  display: flex;
  min-height: 100vh;
}

/* ── Left panel ── */
.left-panel {
  width: 52%;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  padding: 32px;
}

/* ── Right panel ── */
.right-panel {
  width: 48%;
  min-height: 100vh;
  overflow-y: auto;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) and (min-width: 768px) {
  .left-panel {
    width: 44%;
  }
  .right-panel {
    width: 56%;
  }
  .earnings-strip {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .earnings-card {
    flex: 1 1 calc(50% - var(--space-sm));
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .app {
    flex-direction: column;
  }
  .left-panel {
    width: 100%;
    position: static;
    height: auto;
    overflow: visible;
    padding: 24px 20px;
  }
  .right-panel {
    width: 100%;
    min-height: 100vh;
  }
}