/* ========================================
   QR MENU — Base (mobile-first app shell)
   ======================================== */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
img, svg { display: block; max-width: 100%; }
img { object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-appearance: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; }

/* App shell */
#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  overflow: clip;
  background: var(--color-bg);
}

#page-container {
  padding-top: var(--header-h);
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
  min-height: 100dvh;
  position: relative;
}

.page {
  padding: var(--page-px);
  min-height: calc(100dvh - var(--header-h) - var(--nav-h) - var(--safe-bottom));
}

/* Scrollbar hiding for horizontal scrollers */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-text);
}

/* Desktop centering */
@media (min-width: 431px) {
  body { background: #F5F5F5; }
  #app {
    box-shadow: 0 0 20px rgba(0,0,0,0.06);
  }
}