/* Naffanet mobile application theme */
:root {
  --app-bg: #f4f7fb;
  --app-surface: #ffffff;
  --app-ink: #172033;
  --app-muted: #64748b;
  --app-line: #e2e8f0;
  --app-primary: #e11d48;
  --app-primary-dark: #9f1239;
  --app-radius: 16px;
  --app-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}
* { box-sizing: border-box; }
html {
  background: #cbd5e1;
  min-height: 100%;
}
body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 max(82px, env(safe-area-inset-bottom)) 0;
  background: #cbd5e1;
  color: var(--app-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--app-primary); }
button, input, select, textarea { border-radius: 12px; }
input, select, textarea {
  max-width: 100%;
  border: 1px solid var(--app-line);
  background: #fff;
  color: var(--app-ink);
  padding: 12px 13px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}
button, .btn, .button, [type="submit"] {
  min-height: 44px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}
.container, .box, main.wrap {
  width: 100% !important;
  max-width: 480px !important;
  min-height: 100vh;
  background: var(--app-surface);
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(15, 23, 42, .15) !important;
  position: relative;
}
.menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 370px) {
  .menu-grid { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .menu-card { font-size: 10px; padding-left: 2px; padding-right: 2px; }
}