/* frontend/containers/App/App.css */
.app-main {
  overflow-y: auto;
  background: var(--bg-main);
  flex: 1;
  padding: 0 24px;
}

.app-placeholder {
  display: flex;
  color: var(--text-faint);
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  height: 100%;
}

.app-placeholder svg {
  opacity: .3;
}

.app-placeholder p {
  font-size: 14px;
}

.app-detail {
  background: var(--bg-surface);
  box-shadow: 1px 0 0 var(--border), -1px 0 0 var(--border);
  max-width: 720px;
  min-height: 100%;
  margin: 0 auto;
  padding: 40px 48px;
}

.app-menu-btn {
  display: none;
  position: fixed;
  z-index: 200;
  background: var(--text-base);
  box-shadow: 0 2px 8px var(--shadow);
  cursor: pointer;
  color: var(--bg-surface);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items:  center;
  width: 44px;
  height: 44px;
  bottom: 20px;
  right: 20px;
}

.app-overlay {
  position: fixed;
  background: var(--overlay);
  z-index: 99;
  display: none;
  inset: 0;
}

@media (width <= 640px) {
  .app-menu-btn {
    display: flex;
  }

  .app-main {
    padding: 0;
  }

  .app-detail {
    padding: 24px 20px;
  }

  .app-overlay.open {
    display: block;
  }
}