* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: "Inter", "SF Pro Text", "Segoe UI Variable", "Trebuchet MS", sans-serif;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text-main);
  background:
    radial-gradient(circle at 88% 8%, rgba(232, 93, 36, 0.07) 0 17%, transparent 17%),
    radial-gradient(circle at 10% 92%, rgba(255, 214, 187, 0.35) 0 20%, transparent 20%),
    var(--bg-main);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.app-shell {
  margin: 0 auto;
  width: 100%;
  max-width: 580px;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, #f7f2ec 0%, #f3eee8 100%);
}

.page-content {
  padding: 14px max(14px, env(safe-area-inset-right)) calc(108px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow-x: clip;
}

body.keyboard-open .page-content {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .app-shell {
    margin-top: 18px;
    margin-bottom: 18px;
    border-radius: 36px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 34px 64px rgba(34, 24, 14, 0.14);
    min-height: calc(100vh - 36px);
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: 10px max(10px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}