* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: #0a0a0a; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
}
#app { padding: 20px; padding-bottom: 90px; }
.tab { display: none; }
.tab.active { display: block; }
.tab h1 { font-size: 28px; margin-bottom: 16px; }
.tab p { opacity: 0.6; }

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  background: #111; border-top: 1px solid #222;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
}
.tab-btn {
  background: none; border: none; color: #666;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; padding: 6px 12px; cursor: pointer;
  transition: color 0.2s;
}
.tab-btn span { font-size: 11px; }
.tab-btn.active { color: #fff; }