#app { padding: env(safe-area-inset-top) 16px 96px; max-width: 640px; margin: 0 auto; min-height: 100%; }
.screen[hidden] { display: none; }
.screen { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.btn-primary { width: 100%; background: var(--gold); color: var(--bg); border: none;
  border-radius: var(--radius); font-size: 18px; font-weight: 700; box-shadow: var(--shadow);
  padding: 14px; transition: transform .15s ease; }
.btn-primary:active { transform: scale(.98); }
.surface { background: var(--parchment); color: var(--ink); border: 2px solid var(--amber-border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
#tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  background: #1d0f09; border-top: 2px solid var(--amber-border);
  padding-bottom: env(safe-area-inset-bottom); }
#tabbar button { flex: 1; background: none; border: none; color: var(--parchment);
  font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 0; }
#tabbar button span:first-child { font-size: 20px; line-height: 1; }
#tabbar button[aria-current="page"] { color: var(--gold); }
#toast-root { position: fixed; bottom: 88px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }

/* Capture screen: float the tile into the upper-middle. justify-content:center only
   distributes spare space, so Stage A (short tile) centers while the taller Stage C
   form just packs from the top — no clipping. padding-bottom biases the tile up.
   :not([hidden]) is REQUIRED — without it the #screen-capture specificity (1,0,0)
   overrides .screen[hidden]'s display:none, leaking the capture tile onto every tab. */
#screen-capture:not([hidden]) { display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - 120px); padding-bottom: 6vh; }