body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  padding-top: var(--safe-top);
}

#app {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.loader {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Page container — mobile-first */
.page {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-4));
  width: 100%;
  max-width: 100%;
}

/* Center on larger screens */
@media (min-width: 768px) {
  .page {
    max-width: 540px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  #app {
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-height);
  }
  .page {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: var(--space-6);
  }
  .page--full {
    margin-left: 0;
  }
}

.page--full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding: var(--space-4);
  padding-bottom: var(--space-4);
}

/* Utility: hide scrollbar but keep scrollable */
.scroll-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-hide::-webkit-scrollbar {
  display: none;
}