/* Flip app styles. Colours, font and sizes come from tokens.css only. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.app { position: relative; min-height: 100dvh; max-width: 520px; margin: 0 auto; background: var(--bg); padding-bottom: var(--tabbar-h); }

.screen { min-height: calc(100dvh - var(--tabbar-h)); padding: var(--pad); }
.screen[hidden] { display: none; }
.screen h1 { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: -.5px; }

.screen--scan { padding: 0; background: radial-gradient(70% 55% at 50% 38%, var(--cam-1) 0%, var(--cam-2) 60%, var(--cam-3) 100%); }

.tabs {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; height: var(--tabbar-h);
  display: flex; justify-content: space-around; padding-top: 9px;
  border-top: 1px solid var(--line-soft); background: var(--tabbar);
}
.tab {
  width: 70px; background: none; border: 0; color: var(--tab-off);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: center; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.tab svg { display: block; margin: 0 auto 3px; }
.tab[aria-current="page"] { color: var(--go); }
.tab[aria-current="page"] svg { filter: drop-shadow(0 0 6px var(--go-a70)); }
.tab:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 12px; }