/* ═══════════════════════════════════════════════════════════════════════
   MUJIX — SHARED STRUCTURAL BASE
   Always loaded, before the selected theme. Themes should NEVER need to
   redeclare anything in this file — only colors, fonts, and decoration.

   Why this file exists: bauhaus/neon/postmodern/renaissance were each
   independently missing box-sizing, the body/#app scroll model, and PWA
   safe-area handling, which is what caused overlapping buttons and
   misaligned inputs. Rather than re-audit every theme by hand again next
   time a new one is added, this file makes the correct box model and
   scroll container the DEFAULT — a new theme.css that only sets colors
   and fonts will still lay out correctly with zero extra effort.

   Cascade order note: this file loads first, so any rule a theme.css DOES
   declare (even without !important) wins normally. These rules only take
   effect when a theme leaves them out entirely.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Box model ── */
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; overflow: hidden; touch-action: manipulation; -webkit-overflow-scrolling: touch }
body {
  margin: 0; padding: 0;
  position: fixed; width: 100%; height: 100%; overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── PWA / notch safe areas ── */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
@media (display-mode:standalone), (display-mode:fullscreen), (display-mode:window-controls-overlay) {
  body { height: 100vh; padding-top: 0; padding-bottom: 0 }
}

/* ── Scroll container — the single scrollable region under the fixed body ── */
#app { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }

/* ── Focus ring (desktop only — avoids a11y ring on touch taps) ── */
@media (min-width:1280px) { :focus-visible { outline: 3px solid var(--ac, #a259ff) !important; outline-offset: 3px !important } }

/* ── Structural safety net for core components ──
   Themes are free to override colors/radius/shape for these; these rules
   only guarantee the BOX MODEL (width, padding, display) so nothing
   overlaps or overflows if a theme forgets to set it. */
.inp { width: 100%; padding: 11px 15px; border-radius: var(--r, 12px); outline: none; box-sizing: border-box }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: none; padding: 10px 20px; font-size: .875rem; border-radius: var(--r, 12px); text-decoration: none; white-space: nowrap }
.gl, .gl-d { border-radius: var(--rl, 20px); box-sizing: border-box }
.nav-a { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r, 12px); text-decoration: none }
.badge, .bp, .bb, .bg2 { display: inline-block; border-radius: 20px; padding: 3px 9px; box-sizing: border-box }