/* TEAMilo Beta 2.0 - UI layer; colours inherit active Beta 1 theme tokens. */
#tm-beta2-mainnav {
  position:fixed; z-index:2147481000; left:50%; bottom:max(8px, env(safe-area-inset-bottom));
  transform:translateX(-50%); display:flex; align-items:center; justify-content:center;
  gap:clamp(1px, .5vw, 7px); max-width:calc(100vw - 16px); box-sizing:border-box;
  padding:6px; border-radius:18px; border:1px solid var(--tm-rsvp-frame, var(--hig-line, var(--ap-primary, #929292)));
  color:var(--ap-text, var(--hig-text, inherit));
  background:var(--ap-canvas, var(--hig-canvas, #25272e));
  box-shadow:0 10px 30px rgba(0,0,0,.22); font-family:inherit;
}
#tm-beta2-mainnav[hidden] { display:none !important; }
#tm-beta2-mainnav button.tm-beta2-nav-item {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:clamp(56px, 11vw, 93px); min-height:55px; gap:3px; padding:5px 4px;
  background:transparent; color:inherit; border:1px solid transparent;
  border-radius:12px; font:inherit; font-size:12px; font-weight:600; line-height:1.1;
  cursor:pointer; transition:background-color 100ms ease;
}
#tm-beta2-mainnav button.tm-beta2-nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#tm-beta2-mainnav button.tm-beta2-nav-item:hover { background:color-mix(in srgb, currentColor 9%, transparent); }
#tm-beta2-mainnav button.tm-beta2-nav-item[aria-current="page"] {
  color:var(--ap-primary, var(--hig-accent, var(--tm-rsvp-frame, currentColor)));
  border-color:currentColor;
  background:color-mix(in srgb, currentColor 7%, transparent);
}
#tm-beta2-mainnav button:focus-visible {
  outline:3px solid var(--ap-primary, var(--hig-accent, currentColor)); outline-offset:2px;
}
#tm-beta2-mainnav .tm-beta2-version { font:inherit; font-size:10px; opacity:.8; white-space:nowrap; padding:0 6px; }
/* Keep original navigation actions in DOM, but remove duplicate navigation after verified detection. */
#app .tm-beta2-original-nav[data-beta2-native-nav="true"] { display:none !important; }
body.tm-beta2-active #app { padding-bottom:max(84px, calc(75px + env(safe-area-inset-bottom))) !important; }
#tm-beta2-feedback { position:fixed; left:50%; bottom:94px; transform:translateX(-50%);
  max-width:min(400px, 90vw); padding:12px 16px; border-radius:12px; z-index:2147481001;
  background:var(--ap-canvas, var(--hig-canvas, #26272d)); color:var(--ap-text, var(--hig-text, #fff));
  border:1px solid var(--ap-primary, var(--hig-accent, currentColor));
  box-shadow:0 6px 20px #0004; font:inherit; font-size:13px;
}
#tm-beta2-feedback[hidden] { display:none !important; }
@media (max-width:570px) {
  #tm-beta2-mainnav { width:calc(100vw - 12px); bottom:max(2px, env(safe-area-inset-bottom)); border-radius:13px; padding:4px 2px; }
  #tm-beta2-mainnav button.tm-beta2-nav-item { width:20%; min-width:0; min-height:56px; font-size:11px; }
  #tm-beta2-mainnav .tm-beta2-version { display:none; }
}
@media (prefers-reduced-motion: reduce) { #tm-beta2-mainnav button { transition:none !important; } }
@media (forced-colors: active) { #tm-beta2-mainnav { border-color:CanvasText; } }