html, body {
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: var(--app-max-width-content);
  margin: 0 auto;
  background: var(--app-color-bg);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  body {
    background: var(--app-color-surface-alt);
  }
  #app {
    box-shadow: var(--app-shadow-md);
    border-radius: var(--app-radius-md);
    margin: var(--app-spacing-md) auto;
    height: calc(100% - var(--app-spacing-md) * 2);
  }
}

.view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.view__header {
  flex: 0 0 auto;
  padding: var(--app-spacing-md);
  background: var(--app-color-surface);
  border-bottom: 1px solid var(--app-color-border);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  min-height: var(--app-touch-target);
}

.view__body {
  flex: 1 1 auto;
  padding: var(--app-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.view__footer {
  flex: 0 0 auto;
  padding: var(--app-spacing-md);
  border-top: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.error-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--app-spacing-xl);
  gap: var(--app-spacing-md);
  text-align: center;
}

.error-fallback h2 {
  color: var(--app-color-text);
}

.error-fallback p {
  color: var(--app-color-text-muted);
}

.error-fallback a {
  display: inline-block;
  margin-top: var(--app-spacing-md);
  padding: var(--app-spacing-sm) var(--app-spacing-lg);
  background: var(--app-color-primary);
  color: var(--app-color-text-inverse);
  border-radius: var(--app-radius-md);
  font-weight: 600;
  min-height: var(--app-touch-target);
  display: inline-flex;
  align-items: center;
}